@capgo/capacitor-hojas

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

Empezar GitHub

Independiente de marco de trabajo

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

Capacitor listo

Respete las áreas de seguridad, el movimiento del teclado, las gestos de borde nativos y la reducción de color del tema de WebView desde la capa web.

Todas las formas de hoja

Componga hojas de trabajo inferiores, cajones laterales, hojas de trabajo superiores, diálogos centrados, tostadas, hojas de trabajo desacopladas, tarjetas, páginas y cajas de luz.

CSS moderno

Autora detentes con em, rem, unidades de vista, calc(), y variables CSS mientras la tamaño por defecto permanece em basado.

¿Cuándo Usarlo

@capgo/capacitor-sheets es para aplicaciones Capacitor que necesitan hojas de trabajo 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 trabajo inferiores con uno o más detentes
barra lateral izquierda o derecha y hojas de trabajo superiores
ventanas emergentes centradas, ventanas emergentes claras, tarjetas y ventanas emergentes similares a toast
ventanas persistentes que mantienen la aplicación detrás de ellas interactiva
ventanas emergentes de toda la página 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
diseño de Capacitor-seguro para ranuras, indicadores de inicio, recortes de Android y teclados de software

Cobertura de casos de uso

Caso de uso	Hojas de cálculo patrón Capgo
Hojas de cálculo largas	`cap-sheet` con contenido natural de desplazamiento o `cap-scroll`
Hojas de cálculo con detente	`detents="18em 32em"` más `stepTo()` o un disparador de paso
Barra lateral	`content-placement="left"` o `content-placement="right"`
Hoja de cálculo inferior	por defecto `content-placement="bottom"`
Hoja de cálculo con teclado	`native-focus-scroll-prevention` y manejo de desplazamiento de la vista visual
Notificación	`inert-outside="false"`, `focus-trap="false"`, y sin cierre al hacer clic fuera
Hoja Desconectada	`cap-sheet-special-wrapper` con márgenes y radio personalizados
Página desde la parte inferior	contenido de hoja inferior de altura completa
Hoja de la parte 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 con Paralaje	`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 de hoja compacto centrado

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, alternar 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 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 vista predeterminada del hoja de cálculo lee env(safe-area-inset-*) y Capacitor-estilo --safe-area-inset-* variables de respaldo, luego aplica las bordes seleccionadas como relleno alrededor de la capa de sobreposición. safe-area="auto" protege todas las bordes; use safe-area="bottom left right" o safe-area="none" ¿Qué alternativas hay?

¿Qué alternativas hay? visualViewport ¿Qué alternativas hay? preventScroll ¿Qué alternativas hay?

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.

¿Qué alternativas hay?

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

Ficha larga	Detentes

Barra lateral	Ventana emergente

Siga adelante desde @capgo/capacitor-sheets

Si está utilizando @capgo/capacitor-sheets para planificar el trabajo de plugin nativo, conecte con Capgo Directorio de Plugin para el flujo de trabajo del producto en Capgo Directorio de Plugin, Capacitor Plugins por Capgo Detalles de implementación para Capacitor Plugins por Capgo Agregar o Actualizar Plugins Detalles de implementación para Agregar o Actualizar Plugins Alternativas de Plugins de Ionic Enterprise Detalles de flujo de trabajo para Alternativas de Plugins de Ionic Enterprise, y Capgo Compilaciones Nativas Detalles de flujo de trabajo para Capgo Compilaciones Nativas.