@capgo/capacitor-hojas

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

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 gesturas de borde nativas y la atenuación del tema WebView desde la capa web.

Cada forma de hoja

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

CSS moderno

Autenticación con em, rem, unidades de vista, calc(), y variables CSS mientras el 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.

Usalo cuando necesites:

hojas de cálculo inferiores con uno o más detentes
Lados izquierdo y derecho, y hojas superiores
diálogos centrados, ventanas emergentes, tarjetas y sobreimpresiones similares a toast
hojas persistentes que mantienen la aplicación detrás de ellas interactiva
overlay de pantalla completa que entra 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 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 de desplazamiento 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 visual
Toast	`inert-outside="false"`, `focus-trap="false"`y no cierre de clic fuera de ella
Hoja Desconectada	`cap-sheet-special-wrapper` con márgenes y radio personalizados
Desde la parte inferior de la página	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` progreso
Página	contenido de vista 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 compacto centrado

Núcleo API

<cap-sheet> gestiona el estado de presentación, detentes, colocación, gestos, accesibilidad y eventos.
<cap-sheet-trigger> declara acciones de presentación, cierre, alternación y paso de detente.
<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 de detente.
<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 ayudantes de progreso de desplazamiento y distancia.
setupSheet(element, options?) configura una hoja desde efectos de marco o hooks de ciclo de vida.

Modelo de Diseño de Capacitor

La vista por defecto del hoja de cálculo env(safe-area-inset-*) y el estilo Capacitor- --safe-area-inset-* variables de fallback, luego aplica las aristas seleccionadas como relleno alrededor de la superposición. safe-area="auto" protege todas las bordes; use safe-area="bottom left right" o safe-area="none" cuando un escenario requiere un comportamiento diferente.

El manejo del teclado está habilitado por defecto. La hoja de cálculo escucha visualViewport resize y eventos de desplazamiento, agrega un desplazamiento del teclado al viewport, y enfoca controles con preventScroll Los inputs permanecen visibles por encima del teclado de 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.

Demostraciones y Entornos de Pruebas

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:

Hoja larga	Detentes

Barra lateral	Lightbox

Continúa desde @capgo/capacitor-hojas

Si estás utilizando @capgo/capacitor-hojas 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 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 Compilaciones Nativas para el flujo de trabajo del producto en Capgo Compilaciones Nativas.