@capgo/capacitor-hojas

Construye hojas, cajones, diálogos, tostadas, ventanas emergentes, tarjetas y capas de página en cualquier Capacitor frontend.

Comienza GitHub

Independiente de marco

Utilice elementos personalizados basados en estándares directamente o utilice ayudantes de configuración para React, Vue, Angular, Svelte y Solid.

Capacitor listo

Respete áreas de seguridad, movimiento de teclado, gestos de borde nativos y atenuación de tema de WebView desde la capa web.

Cada forma de hoja

Componga hojas de abajo, cajones laterales, hojas de arriba, diálogos centrados, tostadas, hojas desprendidas, tarjetas, páginas y cajas de luz.

CSS moderno

Author detentes con em, rem, unidades de vista, calc(), y variables CSS mientras el tamaño por defecto se mantiene em basado.

Cuándo Usarlo

@capgo/capacitor-sheets es para aplicaciones Capacitor que necesitan sobreposiciones móviles de alta calidad sin adoptar un marco de trabajo de interfaz de usuario específico. Se envía como elementos personalizados, por lo que el paquete principal no tiene dependencia de tiempo de ejecución de React, Vue, Angular, Svelte o Solid.

Usa cuando necesites:

hojas inferiores con uno o más detentes
barra lateral izquierda o derecha y hojas superiores
diálogos centrados, luces de fondo, tarjetas y sobreposiciones de tipo toast
hojas persistentes que mantengan la aplicación detrás de ellas interactiva
ventanas de pantalla completa que entran desde un borde
efectos de pila, profundidad y parallax impulsados por el progreso de la hoja
ayudas de desplazamiento que exponen valores de progreso y distancia
Capacitor-seguro diseño para ranuras, indicadores de inicio, recortes de Android y teclados de software

Cobertura de casos de uso

Caso de uso	Capgo Patrón de hojas
Hoja larga	`cap-sheet` con contenido natural desplazamiento hacia abajo o `cap-scroll`
Hoja con Detente	`detents="18em 32em"` más `stepTo()` o un disparador de paso
Barra lateral	`content-placement="left"` o `content-placement="right"`
Ventana emergente inferior	por defecto `content-placement="bottom"`
Hoja con teclado	`native-focus-scroll-prevention` y manejo de desplazamiento de la vista visual
Toast	`inert-outside="false"`, `focus-trap="false"`, y no se puede cerrar con un clic fuera
Hoja Desconectada	`cap-sheet-special-wrapper` con márgenes y radio personalizados
Hoja desde la parte inferior	contenido de hoja inferior de altura completa
Hoja Superior	`content-placement="top"`
Hoja con Superposición	`cap-sheet-stack` con variables de profundidad
Hoja con Profundidad	`cap-sheet-outlet` y transformaciones impulsadas por el progreso
Página de Paralaje	`cap-sheet-outlet` con `cap-scroll` progresivo
Página	Contenido de pantalla completa que entra desde un borde
Lightbox	`content-placement="center"` Con fondo y contenido de medios
Ventana persistente con detente	`default-presented`, `swipe-dismissal="false"`y `inert-outside="false"`
Tarjeta	Contenido de hoja compacta centrado

Núcleo API

<cap-sheet> Administra el estado de presentación, detentes, colocación, gestos, accesibilidad y eventos.
<cap-sheet-trigger> Declara acciones de presentar, deshacer, alternar y paso de detente.
<cap-sheet-view> posiciona la capa de sobreposición y aplica desplazamientos de área segura y teclado.
<cap-sheet-backdrop> dibuja un fondo de progreso sincronizado.
<cap-sheet-content> dibuja la superficie de la hoja.
<cap-sheet-handle> proporciona controles de arrastre y desplazamiento de teclado.
<cap-sheet-stack> coordina hojas superpuestas.
<cap-sheet-outlet> exposa el progreso de la hoja a efectos de profundidad, página y paralaje.
<cap-scroll> y <cap-scroll-content> exponer progreso de desplazamiento y distancia de la barra de desplazamiento.
setupSheet(element, options?) configura una hoja desde efectos de marco o hooks de ciclo de vida.

Capacitor Modelo de Diseño de la Hoja

La hoja de vista predeterminada lee env(safe-area-inset-*) y Capacitor-estilo --safe-area-inset-* variables de respaldo, luego aplica las aristas seleccionadas como relleno alrededor de la superposición. safe-area="auto" protege todas las aristas; use safe-area="bottom left right" o safe-area="none" cuando un caso de uso necesita un comportamiento diferente.

El manejo del teclado está habilitado por defecto. La hoja escucha eventos de redimensionamiento y desplazamiento, agrega un desplazamiento del teclado al viewport y enfoca controles con visualViewport para que los inputs permanezcan visibles por encima del teclado de software. preventScroll El paquete se ejecuta en la capa web. No renderiza hojas de fondo nativas de UIKit o Android, por lo que su aplicación conserva el control de estilo completo mientras aún respeta las restricciones de WebView que importan en __CAPGO_KEEP_0__.

The package runs in the web layer. It does not render native UIKit or Android bottom sheets, so your app keeps full styling control while still respecting the WebView constraints that matter in Capacitor.

Título de la sección “Demos y Entornos de Pruebas”

Demos y Entornos de Pruebas

Hoja larga	Detentes

Barra lateral	Ventana emergente

Sigue adelante desde @capgo/capacitor-sheets

Si estás utilizando @capgo/capacitor-sheets para planificar el trabajo de plugin nativo, conecta con Directorio de Plugins de Capgo para el flujo de trabajo del producto en Directorio de Plugins de Capgo Plugins de Capacitor por Capgo para los detalles de implementación en Plugins de Capacitor por Capgo, Agregar o Actualizar Plugins para los detalles de implementación en la sección de Agregar o Actualizar Plugins, Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise, y Capgo Compilación Nativa para el flujo de trabajo del producto en Capgo Compilación Nativa.