@capgo/capacitor-hojas

Construye 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 marcos

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

Capacitor listo

Respetar áreas de seguridad, movimiento del teclado, gestos de borde nativos y atenuación de tema de WebView desde la capa web.

Cada forma de hoja

Componer hojas inferiores, cajones laterales, hojas superiores, diálogos centrados, tostadas, hojas desacopladas, tarjetas, páginas y ventanas emergentes.

CSS moderno

El autor detiene 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 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 inferiores con uno o más detentes
barra lateral izquierda o derecha y hojas superiores
diálogos centrados, ventanas emergentes, tarjetas y sobreposiciones de tipo toast
hojas persistentes que mantengan la aplicación detrás de ellas interactiva
ventanas 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-safe layout for notches, home indicators, Android cutouts, and software keyboards

Cobertura de casos de uso

Caso de uso	patrón de hojas Capgo
Hoja larga	`cap-sheet` con contenido natural desplazarse o `cap-scroll`
Hoja con Detente	`detents="18em 32em"` más `stepTo()` o un disparador de paso
Sidebar	`content-placement="left"` o `content-placement="right"`
Bottom Sheet	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 se puede cerrar con un clic fuera
Hoja Desconectada	`cap-sheet-special-wrapper` con márgenes y radio personalizados
Hoja desde la parte inferior	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` transformaciones impulsadas por el progreso
Página	Contenido de pantalla completa que entra desde un borde
Diafragma	`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 compacta centrada

Núcleo API

<cap-sheet> Administra el estado de presentación, detentes, colocación, gestos, accesibilidad y eventos.
<cap-sheet-trigger> Declara acciones de presentar, deshacer, alternar 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 desplazamiento de teclado.
<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> exponer progreso 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.

Modelo de disposición de Capacitor

La hoja de vista 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 overlay. 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 escucha eventos de redimensionamiento y desplazamiento, agrega un desplazamiento del teclado a la vista 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 bottom nativas de UIKit o Android, por lo que su aplicación conserva el control de estilos completo mientras aún 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”

when a usecase needs different behavior.

Hoja larga	Detentes

Barra lateral	Ventana emergente

Continúa 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 la sección de 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.