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

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

CSS moderno

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

¿Cuándo Usarlo

@capgo/capacitor-sheets es para aplicaciones Capacitor que necesitan sobreimpresiones 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 de trabajo inferiores con uno o más detentes
lados izquierdo o derecho y hojas superiores
diálogos centrados, ventanas emergentes, tarjetas y sobreimpresiones similares a toast
hojas de trabajo persistentes que mantengan la aplicación detrás de ellas interactiva
sobreimpresiones de página 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-disposición segura 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 desplazamiento de contenido natural o `cap-scroll`
Hoja con detente	`detents="18em 32em"` más `stepTo()` o un disparador de paso
Menú lateral	`content-placement="left"` o `content-placement="right"`
Hoja de diálogo	Hoja inferior `content-placement="bottom"`
Hoja con teclado	`native-focus-scroll-prevention` y manejo de desplazamiento de la vista visual
Notificación	`inert-outside="false"`, `focus-trap="false"`, y no cierre con clic fuera
Hoja desacoplada	`cap-sheet-special-wrapper` más márgenes y radio personalizados
Página desde la parte inferior	contenido de hoja inferior de altura completa
Hoja Superior	`content-placement="top"`
Hoja de cálculo con pila	`cap-sheet-stack` con variables de profundidad
Hoja de cálculo 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 ingresando desde un borde
Luz de fondo	`content-placement="center"` con fondo de pantalla y contenido de medios
Hoja de cálculo persistente con detente	`default-presented`, `swipe-dismissal="false"`, y `inert-outside="false"`
Tarjeta	contenido compacto de hoja de cálculo centrado

Núcleo API

<cap-sheet> gobierna el estado de presentación, detenciones, 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> renders a progress-synced backdrop.
<cap-sheet-content> renders la superficie de la hoja.
<cap-sheet-handle> proporciona controles de detención de arrastre y teclado.
<cap-sheet-stack> coordina hojas pila.
<cap-sheet-outlet> exposa el progreso de la hoja a efectos de página, profundidad y parallax.
<cap-scroll> y <cap-scroll-content> exponga ayudantes de progreso de desplazamiento y distancia.
setupSheet(element, options?) configura una hoja desde efectos de marco o hooks de ciclo de vida.

Capacitor Modelo de disposición

La vista predeterminada del visor de hoja lee env(safe-area-inset-*) y Capacitor-estilo --safe-area-inset-* variables de fallback, luego aplica las esquinas seleccionadas como relleno alrededor de la capa. safe-area="auto" protege todas las esquinas; use safe-area="bottom left right" o safe-area="none" cuando un caso de uso requiere un comportamiento diferente.

El manejo del teclado está habilitado por defecto. La hoja escucha eventos de visualViewport para que los campos de entrada permanezcan visibles por encima del teclado de software. preventScroll Los campos de entrada permanecen visibles sobre el teclado del software.

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 sección “Demos Y Playgrounds”

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

Detentes	Detents

Barra lateral	Lightbox

Continúa desde @capgo/capacitor-sheets

Si estás utilizando @capgo/capacitor-hojas para planificar el trabajo de plugins nativos, conecta con Capgo Directorio de Plugins para el flujo de trabajo del producto en Capgo Directorio de Plugins, Capacitor Plugins por Capgo para el detalle de implementación en Capacitor Plugins por Capgo, Agregar o Actualizar Plugins para el detalle de implementación en Agregar o Actualizar Plugins, Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Ionic Enterprise Plugin Alternatives, y Capgo Construcción nativa para el flujo de trabajo del producto en compilaciones nativas Capgo.