@capgo/capacitor-sheets

Construya hojas de estilo de seda, cajones, diálogos, notificaciones, ventanas emergentes, tarjetas y capas de página en cualquier Capacitor frontend.

Empezar GitHub

Agnostico a marcos

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 inferiores, cajones laterales, hojas superiores, diálogos centrados, tostadas, hojas desacopladas, tarjetas, páginas y cajas de luz.

CSS moderno

Autorice detentes con unidades de vista portátil, unidades de vista portátil y variables CSS mientras la tamaño por defecto se queda em, rembasado. calc()based em based

When to 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 inferior con uno o más detentes
barra lateral izquierda o derecha y hojas superior
diálogos centrados, ventanas emergentes, tarjetas y sobreposiciones de tipo toast
sobreposiciones persistentes que mantengan la aplicación detrás de ellas interactiva
sobreposiciones de página completa que entren desde un borde
efectos de pila, profundidad y paralaje impulsados por el progreso de la hoja
ayudas de desplazamiento que expongan valores de progreso y distancia
diseño de Capacitor-seguro para ranuras, indicadores de hogar, recortes de Android y teclados de software

Cobertura de casos de uso

Caso de uso	Capgo Hojas de patrón
Hojas largas	`cap-sheet` con desplazamiento de contenido natural o `cap-scroll`
Hojas con detente	`detents="18em 32em"` o un disparador de paso `stepTo()` o un disparador de paso
Barra lateral	`content-placement="left"` o `content-placement="right"`
Hoja 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 de ella
Hoja separada	`cap-sheet-special-wrapper` con márgenes y radio personalizados
Página desde la parte inferior	contenido de hoja inferior de altura completa
Hoja Superior	`content-placement="top"`
Hoja con Pila	`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` progreso
Página	contenido de toda la pantalla que entra desde un borde
Ventana de luz	`content-placement="center"` con fondo y contenido de medios
Hoja persistente con detente	`default-presented`, `swipe-dismissal="false"`, y `inert-outside="false"`
Tarjeta	Contenido de hoja compacto centrado

Núcleo API

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

Capacitor Modelo de disposición

La hoja de visor predeterminada lee env(safe-area-inset-*) y Capacitor-estilo --safe-area-inset-* variables de fallback, luego aplica las aristas seleccionadas como relleno alrededor de la capa de sobreposición. safe-area="auto" protege todas las aristas; use safe-area="bottom left right" o safe-area="none" When un caso requiere 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 estilo nativas de UIKit o Android, por lo que su aplicación conserva el control de estilo completo mientras 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”

Hoja larga

Detentes	Demo animado de hoja larga para @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-sheets

Menú lateral	Ventana emergente

Seguir adelante desde @capgo/capacitor-sheets

Si estás utilizando @capgo/capacitor-hojas de cálculo conectarlo con el Capgo Directorio de Plugins for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, para los detalles de implementación en __CAPGO_KEEP_0__ Plugins por __CAPGO_KEEP_1__ Agregar o Actualizar Plugins Capgo Native Builds para el flujo de trabajo del producto en Capgo Construcción Nativa.