Agnostique au framework
Utiliser des éléments personnalisés basés sur des normes directement ou utiliser des aides de configuration pour React, Vue, Angular, Svelte et Solid.
Capacitor prêt
Respecter les zones de sécurité, les mouvements de clavier, les gestes de bordure native et l'ombrage de la couleur de la fenêtre WebView depuis la couche web.
Chaque forme de feuille
Composer des feuilles inférieures, des tiroirs latéraux, des feuilles supérieures, des dialogues centrés, des toasts, des feuilles détachées, des cartes, des pages et des boîtes de lecture.
CSS moderne
L'auteur maintient des détails avec em, rem, unités de vue, calc(), et variables CSS tout en gardant la taille par défaut basée sur. em Quand l'utiliser
Section intitulée « Quand l'utiliser »
est pour les applications __CAPGO_KEEP_0__ qui nécessitent des surcouche mobiles de haute qualité sans adopter un framework de UI spécifique. Il est livré sous forme d'éléments personnalisés, donc le package de base n'a pas de dépendance en runtime pour React, Vue, Angular, Svelte ou Solid.@capgo/capacitor-sheets is for Capacitor apps that need high-quality mobile overlays without adopting a specific UI framework. It ships as custom elements, so the core package has no React, Vue, Angular, Svelte, or Solid runtime dependency.
feuilles inférieures avec un ou plusieurs détails
- barres latérales gauche ou droite et feuilles supérieures
- dialogues centrés, lightboxes, cartes et surcouche de type toast
- feuilles persistantes qui gardent l'application derrière elles interactive
- persistent sheets that keep the app behind them interactive
- fenêtres de page complète qui entrent par un bord
- effets de pile, de profondeur et de parallaxe pilotés par la progression de la feuille
- assistant de défilement qui expose des valeurs de progression et de distance
- Capacitor-safe layout for notches, home indicators, Android cutouts, and software keyboards
Portée des cas d'utilisation
Section intitulée “Portée des cas d'utilisation”| cas d'utilisation | Modèle de feuilles Capgo |
|---|---|
| Feuille longue | cap-sheet avec contenu naturel défilement ou cap-scroll |
| Feuille avec Detent | detents="18em 32em" plus stepTo() ou un déclencheur d'étape |
| Sidebar | content-placement="left" ou content-placement="right" |
| Feuille par défaut | Feuille avec clavier content-placement="bottom" |
| et gestion de décalage de vue visuelle | native-focus-scroll-prevention Toast |
| , et aucune suppression par clic en dehors | inert-outside="false", focus-trap="false"__CAPGO_KEEP_0__ |
| Feuille de calcul détachée | cap-sheet-special-wrapper plus de marges et de rayon personnalisés |
| Page depuis le bas | contenu de la feuille de calcul en bas plein écran |
| Feuille de haut | content-placement="top" |
| Feuille avec empilement | cap-sheet-stack avec des variables de profondeur |
| Feuille avec profondeur | cap-sheet-outlet et des transformations guidées par le progrès |
| Page parallaxe | cap-sheet-outlet avec cap-scroll des transformations guidées par le progrès |
| Page | contenu plein écran entrant par un bord |
| Lightbox | content-placement="center" avec un fond et un contenu multimédia |
| Fenêtre persistante avec détent | default-presented, swipe-dismissal="false"et inert-outside="false" |
| Carte | contenu de feuille de travail compact centré |
Noyau API
Section intitulée « Noyau API »<cap-sheet>gère l'état de présentation, les détent, la disposition, les gestes, l'accessibilité et les événements.<cap-sheet-trigger>déclare les actions de présent, de fermer, de basculer et de détent-étape.<cap-sheet-view>positionne l'overlay et applique les décalages de zone de sécurité et de clavier.<cap-sheet-backdrop>affiche un fond d'arrière-plan synchronisé sur la progression.<cap-sheet-content>affiche la surface de la feuille.<cap-sheet-handle>fournit des contrôles de déplacement et de détent de clavier.<cap-sheet-stack>coordonne les feuilles empilées.<cap-sheet-outlet>expose la progression de la feuille aux effets de page, de profondeur et de parallaxe.<cap-scroll>et<cap-scroll-content>expose les assistants de progression de roulage et de distance.setupSheet(element, options?)configure une feuille à partir d'effets de framework ou de hooks de cycle de vie.
Capacitor Modèle de disposition
Sous-titre « Capacitor Modèle de disposition »La vue par défaut de la feuille de lecture lit env(safe-area-inset-*) et Capacitor-style --safe-area-inset-* les variables de remplacement par défaut, puis applique les arêtes sélectionnées comme bordure autour de l'overlay. safe-area="auto" protège toutes les arêtes ; utilisez safe-area="bottom left right" ou safe-area="none" lorsqu'une utilisation nécessite un comportement différent.
La gestion du clavier est activée par défaut. La feuille écoute les événements de redimensionnement et de défilement, ajoute un décalage de clavier à la vueport et met en surbrillance les contrôles avec visualViewport afin que les entrées restent visibles au-dessus du clavier logiciel. preventScroll Le package fonctionne dans la couche web. Il ne rend pas les feuilles inférieures natives UIKit ou Android, donc votre application conserve le contrôle de style complet tout en respectant les contraintes de la vueport qui comptent dans __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.
Titre de la section « Démonstrations et Environnements de Développement »
Les démos animées WebP pour chaque cas d'utilisation pris en charge sont embarquées dans le fichier README du dépôt. Les exemples sont également disponibles sous forme d'environnements de développement StackBlitz :Animated WebP demos for every supported usecase ship in the repository README. The examples are also available as StackBlitz playgrounds:
| Feuille longue | Détentes |
|---|---|
 |  |
| Barre latérale | Lightbox |
|---|---|
 |  |
- Grille de démonstration complète
- Jardin de jeu React
- Jardin de jeu Vue
- Jardin de jeu Angular
- Jouer avec Svelte
- Jouer avec Solid
Continuez à partir de @capgo/capacitor-sheets
Section intitulée “Continuez à partir de @capgo/capacitor-sheets”Si vous utilisez @capgo/capacitor-sheets pour planifier le travail de plugin natif, connectez-le avec Répertoire de Plugin Capgo pour le flux de travail du produit dans le Répertoire de Plugin Capgo Plugins Capacitor par Capgo pour les détails d'implémentation dans les Plugins Capacitor par Capgo, Ajouter ou Mettre à jour les Plugins pour les détails d'implémentation dans l'ajout ou la mise à jour de plugins, Alternatives de plugins d'entreprise Ionic pour le flux de travail du produit dans Alternatives de plugins d'entreprise Ionic, et Capgo Builds natifs pour le flux de travail du produit dans Capgo Builds natifs.