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 de WebView desde la capa web.
Cada forma 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
Sección titulada “¿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 capas de notificación similares a toast
- hojas 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
- disposición de Capacitor-segura para ranuras, indicadores de inicio, recortes de Android y teclados de software
Cobertura de casos de uso
Título de la sección “Cobertura de casos de uso”| Caso de uso | Capgo Hojas de cálculo de patrón |
|---|---|
| Hoja larga | cap-sheet con contenido de desplazamiento natural 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" |
| Ventana emergente | por defecto content-placement="bottom" |
| Hoja con teclado | native-focus-scroll-prevention y manejo de desplazamiento de la vista visual |
| Toast | inert-outside="false", focus-trap="false", y no cierre al hacer clic fuera |
| Hoja Desconectada | cap-sheet-special-wrapper más márgenes y radio personalizados |
| Hoja desde la parte inferior de la página | contenido de hoja inferior de altura completa |
| Hoja en 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 compacto de hoja centrado |
Núcleo API
Sección titulada “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 detenciones.<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 Capa
Sección titulada “Capacitor Modelo de Diseño”La vista predeterminada del hoja de cálculo lee env(safe-area-inset-*) y Capacitor-estilo --safe-area-inset-* variables de fallback, 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" ¿Necesita diferentes comportamientos en un escenario?
El manejo del teclado está habilitado por defecto. La hoja de cálculo escucha eventos de visualViewport y preventScroll 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 respeta las restricciones de la vista web que importan en __CAPGO_KEEP_0__.
Sección titulada “Demos y Entornos de Pruebas”Demos de WebP animados para cada caso de uso admitido 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 |
|---|---|
 |  |
- Grid de demo completo
- Entorno de pruebas de React
- Jardín de juego de Vue
- Jardín de juego de Angular
- Jardín de juego de Svelte
- Jardín de juego de Solid
Continúa desde @capgo/capacitor-sheets
Título de la sección “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 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.