@capgo/capacitor-hojas

Construye hojas, 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, los gestos de borde nativos y la atenuación del tema de WebView desde la capa web.

Todos los formatos 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 de núcleo 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 emergentes 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
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	Capgo Hojas de cálculo de patrón
Hojas de cálculo largas	`cap-sheet` con contenido de desplazamiento natural 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	predeterminado `content-placement="bottom"`
Hojas 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` más 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 de 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
Cuadro persistente con detente	`default-presented`, `swipe-dismissal="false"`, y `inert-outside="false"`
Tarjeta	contenido compacto de hoja 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 de detención.
<cap-sheet-stack> coordina hojas apiladas.
<cap-sheet-outlet> exposa el progreso de la hoja a la página, profundidad y efectos de 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? | ¿Qué alternativas hay? | ¿Qué alternativas hay? | ¿Qué alternativas hay?

¿Cuándo un caso de uso necesita un comportamiento diferente? visualViewport El manejo del teclado está habilitado por defecto. La hoja de cálculo escucha eventos de preventScroll y agrega un desplazamiento del teclado a la vista, y enfoca controles con

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.

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 estilos completo mientras aún respeta las restricciones de la vista de WebView que importan en __CAPGO_KEEP_0__.

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