@capgo/capacitor-feuilles

Construire des feuilles, des tiroirs, des dialogues, des toasts, des lightboxes, des cartes et des surimpressions de page dans n'importe quel Capacitor frontend.

Commencer 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 d'arête natifs et l'ombrage de la couleur de la vue Web depuis la couche web.

Tous les modèles de feuilles

Créez 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

Écrivez des détenants avec em, rem, unités de vue, calc(), et des variables CSS tout en gardant la taille par défaut em basée.

Quand l'utiliser

@capgo/capacitor-sheets est pour les applications Capacitor qui ont besoin de surcouches 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.

Utilisez-le lorsque vous avez besoin de:

des feuilles de bas avec un ou plusieurs détenants
des tiroirs latéraux gauche ou droit et des feuilles de haut
fenêtres modales centrées, lightboxes, cartes et fenêtres de notification similaires à la toast
feuilles persistantes qui gardent l'application derrière elles interactive
fenêtres sur page complète qui entrent par un bord
effets de pile, de profondeur et de parallaxe déclenchés par la progression de la feuille
aideurs de défilement qui exposent des valeurs de progression et de distance
disposition sécurisée pour les notches, les indicateurs de maison, les coupures d'Android et les claviers logiciels Capacitor

Portée des cas d'utilisation

cas d'utilisation	Capgo Modèles de feuilles
Feuille longue	`cap-sheet` avec contenu de roulage naturel ou `cap-scroll`
Feuille avec détent	`detents="18em 32em"` plus `stepTo()` ou un déclencheur de pas
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 prise en charge de décalage de vue
Toast	`inert-outside="false"`, `focus-trap="false"`, et aucune fermeture par clic en dehors
Feuille déconnectée	`cap-sheet-special-wrapper` plus de marges et de rayon personnalisés
Page depuis le Bas	contenu de feuille inférieure haute en hauteur
Feuille en 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 en Parallaxe	`cap-sheet-outlet` avec `cap-scroll` progression
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

Noyau API

<cap-sheet> gestion de l'état de présentation, maintient, positionnement, gestes, accessibilité et événements.
<cap-sheet-trigger> déclare les actions de présentation, fermeture, basculement et étapes de maintien.
<cap-sheet-view> positionne l'overlay et applique les décalages de zone sécurisée 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 clavier pour les étapes de maintien.
<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 aides 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

La vue par défaut du feuillet de feuille 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 tous les bords ; utilisez safe-area="bottom left right" ou safe-area="none" context : fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `alternatives_cta_questions`). Page/zone : page de comparaison de alternatives de mise à jour en direct de Capacitor. Rôle : Paragraphe marketing ou juridique long. Vu dans : page alternatives.astro. Préservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `alternatives_cta_questions` (Questions de CTA alternatives). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `appflow_cta_questions`). Page/zone : page de comparaison/migration de Appflow. Rôle : Paragraphe marketing ou juridique long. Vu dans : page ionic-appflow.astro. Préservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `appflow_cta_questions` (Questions de CTA Appflow). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `capwesome_cta_questions`). Page/zone : page de comparaison de Capawesome. Rôle : Paragraphe marketing ou juridique long. Vu dans : page capwesome.astro. Préservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `capwesome_cta_questions` (Questions de CTA Capwesome). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `consulting_faq_subtitle`). Page/zone : page de services de conseil. Rôle : Sujet de section ou slogan. Vu dans : page consulting.astro. Préservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `consulting_faq_subtitle` (Sous-titre FAQ de conseil). | Page/zone : page de comparaison/migration d'Appflow. Rôle : Étiquette de navigation ou élément de navigation court. Vu dans : page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. Clé de message `appflow_plugins_or` (Appflow Plugins ou).

lorsqu'une utilisation nécessite un comportement différent. visualViewport Le traitement du clavier est activé par défaut. Le feuillet é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 preventScroll afin que les entrées restent visibles au-dessus du clavier logiciel.

Le package fonctionne dans la couche web. Il ne rend pas les feuilles de feuille 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 Capacitor.

Démonstrations et Jardins d'expérimentation

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 Calcul Longue	Détentes

Barre latérale	Lightbox

Continuez de là à @capgo/capacitor-sheets

Si vous utilisez @capgo/capacitor-sheets pour planifier le travail de plugin natif, connectez-l’avec Capgo Répertoire des plugins pour le flux de travail du produit dans Capgo Répertoire des plugins, Capacitor Plugins par Capgo pour les détails d'implémentation dans 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 aux Plugins Ionic Enterprise pour le flux de travail du produit dans Alternatives aux Plugins Ionic Enterprise, et Capgo Builds Natives pour le flux de travail du produit dans Capgo Builds Natives.