@capgo/capacitor-feuilles

Construisez des feuilles, des tiroirs, des dialogues, des toasts, des boîtes de dialogue, des cartes et des surimpressions de page dans n'importe quel Capacitor frontend.

Commencez GitHub

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 natifs et l'ombrage de la couleur de la vue Web.

Tous les modèles de feuille

Composez 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

Concevez des décalages d'auteur avec les unités de vueports, les unités de vueports et les variables CSS tout en gardant la taille par défaut em, rembasé. calc()__CAPGO_KEEP_0__ em __CAPGO_KEEP_0__

When Utiliser Cela

@capgo/capacitor-sheets est pour les applications Capacitor qui nécessitent des surimpressions mobiles de haute qualité sans adopter un framework de conception 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.

Utilisez-le lorsque vous avez besoin de:

feuilles inférieures avec un ou plusieurs dénivellations
barres latérales gauche ou droite et feuilles supérieures
dialogues centrés, boîtes de dialogue, cartes et surimpressions similaires à des toast
feuilles persistantes qui gardent l'application derrière elles interactive
surimpressions de page complète qui entrent d'un bord
effets de pile, de profondeur et de parallaxe déclenchés par la progression de la feuille
assistant de défilement qui expose les valeurs de progression et de distance
disposition Capacitor-sûre pour les notches, les indicateurs de maison, les coupures d'Android et les claviers logiciels

Couverture des cas d'utilisation

Cas d'utilisation	Feuille de Capgo de modèle de feuilles
Feuille longue	`cap-sheet` avec un défilement de contenu naturel ou `cap-scroll`
Feuille avec détent	`detents="18em 32em"` plus `stepTo()` ou un déclencheur d'étape
Barre latérale	`content-placement="left"` ou `content-placement="right"`
Feuille inférieure	par défaut `content-placement="bottom"`
Feuille avec clavier	`native-focus-scroll-prevention` et gestion de décalage de la vue
Toast	`inert-outside="false"`, `focus-trap="false"`et aucune fermeture par clic en dehors
Feuille détachée	`cap-sheet-special-wrapper` plus des marges et un rayon personnalisés
Page depuis le bas	contenu de feuille inférieure plein écran
Feuille d'en-tête	`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 de parallaxe	`cap-sheet-outlet` avec `cap-scroll` progrès
Page	contenu plein écran entrant d'un bord
Lightbox	`content-placement="center"` avec fond d'écran et contenu multimédia
Feuille persistante avec détent	`default-presented`, `swipe-dismissal="false"`, et `inert-outside="false"`
Carte	Contenu compact centré de la feuille

Coeur API

<cap-sheet> contrôle 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 d'étape de détent.
<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étent et de clavier pour le déplacement.
<cap-sheet-stack> coordonnées empilées feuilles.
<cap-sheet-outlet> expose les progrès de la feuille à la page, la profondeur et les effets de parallaxe.
<cap-scroll> et <cap-scroll-content> expose les aides de progression et de distance de la scroll.
setupSheet(element, options?) configure une feuille à partir des effets du framework ou des hooks de cycle de vie.

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-* variables de remplacement, puis applique les bords sélectionnés en tant que marge autour de l'overlay. safe-area="auto" protège toutes les bords; utilisez safe-area="bottom left right" ou safe-area="none" When une cas d'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 clavier au viewport 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 de bas de page natives UIKit ou Android, donc votre application conserve le contrôle de la mise en forme tout en respectant les contraintes de la vue web 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 »

Fenêtre Longue

Détentes	Démonstration animée de la fenêtre longue pour @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-sheets

Barre latérale	Lightbox

Continuez depuis @capgo/capacitor-feuilles

Si vous utilisez @capgo/capacitor-feuilles de calcul pour planifier le travail de plugin natif, connectez-le à Capgo Répertoire de plugin pour le flux de travail du produit dans Capgo Répertoire de plugin, Capacitor Plugins par Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo, Ajout ou Mise à jour de Plugins pour les détails d'implémentation dans Ajout ou 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 Bâtiments natifs pour le flux de travail du produit dans Capgo Native Builds.