@capgo/capacitor-feuilles

Construire des feuilles, des tiroirs, des boîtes de dialogue, des toasts, des boîtes de lumière, des cartes et des surimpressions de page dans n'importe quel Capacitor frontend.

Commencez GitHub

Indépendant du framework

Utiliser des éléments personnalisés basés sur des normes directement ou utiliser des assistants de configuration pour React, Vue, Angular, Svelte et Solid.

Capacitor prêt

Respecter les zones de sécurité, le déplacement du clavier, les gestes de bord natifs et l'ombrage de la couleur de la fenêtre de la couche web.

Chaque forme de feuille

Compose des feuilles de bas, des tiroirs latéraux, des feuilles de haut, des dialogues centrés, des toasts, des feuilles détachées, des cartes, des pages et des boîtes de dialogue claires.

CSS moderne

Définir des dénivellations avec __CAPGO_KEEP_0__ em, rem, unités de vue calc(), et variables CSS tout en gardant la taille par défaut em basée.

Quand l'utiliser

@capgo/capacitor-sheets est destinée aux applications Capacitor qui nécessitent des surcouche de qualité mobile 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.

Utilisez-le lorsque vous avez besoin de:

des feuilles de bas avec une ou plusieurs dénivellations
des tiroirs latéraux gauche ou droit et des feuilles de haut
boîtes de dialogue centrées, lightboxes, cartes et fenêtres de notification
feuilles persistantes qui gardent l'application derrière elles interactive
fenêtres sur toute la page qui entrent par un bord
effets de pile, de profondeur et de parallaxe pilotés par la progression de la feuille
aideurs de défilement qui exposent des valeurs de progression et de distance
Capacitor-sécurité de mise en page pour les notches, les indicateurs de maison, les coupures d'Android et les claviers logiciels

Couverture des cas d'utilisation

Cas d'utilisation	Capgo Feuilles de calcul modèle
Feuille de calcul Longue	`cap-sheet` avec un défilement de contenu naturel ou `cap-scroll`
Feuille de calcul 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 de calcul en bas	par défaut `content-placement="bottom"`
Feuille de calcul avec clavier	`native-focus-scroll-prevention` et prise en charge de décalage de la vue d'ensemble
Toast	`inert-outside="false"`, `focus-trap="false"`et aucun clic extérieur pour fermer
Feuille détachée	`cap-sheet-special-wrapper` plus de marges et de rayon personnalisés
Page depuis le Bas	contenu de feuille inférieure plein écran
Feuille en 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 en Parallaxe	`cap-sheet-outlet` avec `cap-scroll` 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 compacte centré

Noeud central API

<cap-sheet> gestion de l'état de présentation, des détenus, de la disposition, des gestes, de l'accèsibilité et des événements.
<cap-sheet-trigger> déclare les actions de présentation, 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é avec 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> 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 la scroll et de la distance. <cap-scroll-content> configure une feuille à partir des effets de framework ou des appels de méthode de cycle de vie.
setupSheet(element, options?) __CAPGO_KEEP_0__ Modèle de disposition

Capacitor

La vue par défaut de la feuille de calcul lit env(safe-area-inset-*) et Capacitor-style --safe-area-inset-* les 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" lorsqu'une utilisation nécessite un comportement différent.

Le traitement du clavier est activé par défaut. La feuille écoute les événements de redimensionnement et de défilement, ajoute un décalage de clavier à la vue, 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 calcul natives UIKit ou Android, de sorte que 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.

Section titled “__CAPGO_KEEP_0__ Layout Model”

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 :

Feuille de Papier Longue	Detentes

Barre latérale	Lampe d'Atelier

Continuez à partir de @capgo/capacitor-sheets

Si vous utilisez @capgo/capacitor-sheets pour planifier le travail de plugin natif, connectez-le avec 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 les Capacitor Plugins par Capgo, Ajouter ou Mettre à Jour les Plugins pour les détails d'implémentation dans Ajouter ou Mettre à Jour les Plugins, Alternatives de Plugins d'Entreprise Ionic pour le flux de travail du produit dans Alternatives de Plugins d'Entreprise Ionic, et Capgo Builds Natives pour le flux de travail du produit dans Capgo Builds Natives.