Indépendant du framework
Utilisez des éléments personnalisés basés sur des normes directement ou utilisez des assistants de configuration pour React, Vue, Angular, Svelte et Solid.
Capacitor prêt
Respectez les zones de sécurité, les mouvements de clavier, les gestes de bordure native et l'ombrage de la couleur de thème de WebView à partir de la couche web.
Tous les modèles de feuille de calcul
Composez des feuilles de calcul inférieures, des tiroirs latéraux, des feuilles de calcul supérieures, des dialogues centrés, des toasts, des feuilles de calcul détachées, des cartes, des pages et des boîtes de lecture.
CSS moderne
Auteur maintient des détentes 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
Sous-section intitulée « Quand l'utiliser »
s'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 paquet 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 une ou plusieurs détentes
- barres latérales gauche ou droite et feuilles supérieures
- dialogs centrés, lightboxes, cartes et surcouche similaires à des toast
- feuilles persistantes qui gardent l'application derrière elles interactive
- bottom sheets with one or more detents
- fenêtres sur toute la page qui entrent d'un bord
- effets de pile, de profondeur et de parallaxe pilotés par la progression de la feuille
- outils de défilement qui exposent 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 de défilement naturel ou cap-scroll |
| Fenêtre avec détent | detents="18em 32em" plus stepTo() ou un déclencheur d'étape |
| Barre latérale | content-placement="left" ou content-placement="right" |
| Fenêtre inférieure | par défaut content-placement="bottom" |
| Fenêtre avec clavier | native-focus-scroll-prevention et prise en charge de décalage de vue de viewport |
| Toast | inert-outside="false", focus-trap="false", et aucune suppression par clic en dehors |
| Feuille de calcul détachée | cap-sheet-special-wrapper plus de marges et de rayon personnalisés |
| Page depuis le bas | contenu de feuille de calcul en bas plein écran |
| Feuille de haut | content-placement="top" |
| Feuille avec empilement | cap-sheet-stack avec variables de profondeur |
| Feuille avec profondeur | cap-sheet-outlet et transformations guidées par le progrès |
| Page parallaxe | cap-sheet-outlet avec cap-scroll guidé 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 compact centré de feuille de travail |
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 fermeture, de basculement 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 glissade 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 expose les aides de progression de roulage et de distance.<cap-scroll-content>configure une feuille à partir d'effets de framework ou de hooks de cycle de vie.setupSheet(element, options?)__CAPGO_KEEP_0__ Modèle de disposition
Sous-titre « Capacitor Modèle de disposition »
Section titled “Capacitor Layout Model”La vue par défaut de la feuille de lecture affiche __CAPGO_KEEP_0__ 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 vue WebView 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.
Sous-titre « Démonstrations et Environnements de Développement »
Les démos animées WebP pour chaque utilisation prise 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 :Demos et Environnements de Développement
| Feuille longue | Detentes |
|---|---|
 |  |
| Barre latérale | Lightbox |
|---|---|
 |  |
Continue de @capgo/capacitor-sheets
Section intitulée “Continue 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 Répertoire de plugin Capgo Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou Mettre à jour des 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.