@capgo/capacitor-sheets

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

Empezar 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

Configura 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.

Utilízalo cuando necesites:

hojas de abajo con uno o más detentes
barra lateral izquierda o derecha y hojas de arriba
ventanas emergentes centradas, ventanas emergentes claras, tarjetas y ventanas emergentes como tostadas
hojas persistentes que mantienen la aplicación detrás de ellas interactiva
ventanas emergentes de pantalla completa que entran desde un borde
efectos de pila, profundidad y paralaje 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 hogar, recortes de Android y teclados de software

Cobertura de casos de uso

Caso de uso	Capgo Hojas de cálculo patrón
Hoja larga	`cap-sheet` con contenido de desplazamiento natural 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"`
Hoja inferior	por defecto `content-placement="bottom"`
Hoja con teclado	`native-focus-scroll-prevention` y manejo de desplazamiento de vista visual
Toast	`inert-outside="false"`, `focus-trap="false"`y no cierre al hacer clic fuera de ella
Hoja desacoplada	`cap-sheet-special-wrapper` con márgenes y radio personalizados
Hoja desde la parte inferior de la página	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 parallax	`cap-sheet-outlet` con `cap-scroll` progreso
Página	contenido de toda la pantalla que entra desde un borde
Lightbox	`content-placement="center"` con fondo y contenido de medios
Hoja persistente con detente	`default-presented`, `swipe-dismissal="false"`, y `inert-outside="false"`
Tarjeta	contenido compacto y centrado de hoja

Núcleo API

<cap-sheet> gestiona el estado de presentación, detenciones, colocación, gestos, accesibilidad y eventos.
<cap-sheet-trigger> declara acciones de presentar, despedir, intercambiar y detener pasos.
<cap-sheet-view> posiciona la capa de sobreposición y aplica desplazamientos de área segura y teclado.
<cap-sheet-backdrop> renderiza un fondo de progreso sincronizado.
<cap-sheet-content> renderiza la superficie de la hoja.
<cap-sheet-handle> proporciona controles de arrastre y teclado para detenciones.
<cap-sheet-stack> coordina hojas apiladas.
<cap-sheet-outlet> exposa el progreso de la hoja a efectos de página, profundidad y paralaje.
<cap-scroll> y <cap-scroll-content> exposa progresos de desplazamiento y distancia 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 vista por defecto de la hoja de cálculo lee env(safe-area-inset-*) y Capacitor-estilo --safe-area-inset-* variables de respaldo, luego aplica las aristas seleccionadas como relleno alrededor de la capa de sobrepuesta. 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 de cálculo escucha eventos de redimensionamiento y desplazamiento, agrega un desplazamiento del teclado a la vista y enfoca controles con visualViewport para que los campos de entrada permanezcan visibles por encima del teclado de software. preventScroll El paquete se ejecuta en la capa web. No renderiza hojas de cálculo nativas de UIKit o Android, por lo que su aplicación conserva el control de estilo completo mientras respeta las restricciones de la vista 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.

__CAPGO_KEEP_0__

Los demos animados de WebP para cada caso de uso admitido se envían en el archivo README del repositorio. Los ejemplos también están disponibles como playgrounds de StackBlitz:

Hoja larga	Detentes

Barra lateral	Ventana de diálogo

Sigue adelante desde @capgo/capacitor-sheets

Si estás utilizando @capgo/capacitor-sheets para planificar el trabajo de plugin nativo, conecta con Capgo Directorio de Plugin para el flujo de trabajo del producto en Capgo Directorio de Plugin, Capacitor Plugins por Capgo para los detalles de implementación en Capacitor Plugins por Capgo, Agregar o Actualizar Plugins para los detalles de implementación en 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 Compilaciones Nativas para el flujo de trabajo del producto en Capgo Compilaciones Nativas.