@capgo/capacitor-feuilles

Construire 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.

Démarrer 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 bord natifs et l'ombrage de la couleur de la fenêtre WebView à partir de la couche web.

Tous les formes 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 légères.

CSS moderne

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

Lorsque l'utiliser

@capgo/capacitor-sheets est pour les applications Capacitor 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.

Utilisez-le lorsque vous avez besoin de:

des feuilles de bas avec une ou plusieurs détentes
des tiroirs latéraux gauche ou droit et des feuilles de haut
fenêtres de dialogue 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éterminés par la progression de la feuille
aideurs de défilement qui exposent des valeurs de progression et de distance
disposition de mise en page Capacitor-sûre pour les rebords, les indicateurs de domicile, les coupures d'Android et les claviers logiciels

Portée des cas d'utilisation

cas d'utilisation	Capgo Modèles 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 prise en charge de décalage de la 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, de la rétention, de la disposition, des gestes, de l'accessibilité et des événements.
<cap-sheet-trigger> déclare les actions de présentation, de fermeture, de basculement et d'étape de rétention.
<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 clavier pour les étapes de rétention.
<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 Layout Model

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 des alternatives de mise à jour en direct de Capacitor. Rôle : long paragraphe de marketing ou juridique. Vu dans : page alternatives.astro. Conservez 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 des 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 : long paragraphe de marketing ou juridique. Vu dans : page ionic-appflow.astro. Conservez 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 d'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 : long paragraphe de marketing ou juridique. Vu dans : page capwesome.astro. Conservez 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 de Capwesome). | Page/zone : page de services de consulting. Rôle : sous-titre ou tagline de section. Vu dans : page consulting.astro. Conservez 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 des services de consulting). | 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 à partir de @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 Détails d'implémentation pour Capacitor par Capgo Ajouter ou Mettre à Jour les Plugins Détails d'implémentation pour Ajouter ou Mettre à Jour les Plugins Alternatives aux Plugins d'Entreprise Ionic Détails du flux de travail pour Alternatives aux Plugins d'Entreprise Ionic, et Capgo pour les Déploiements Natives Détails du flux de travail pour Capgo pour les Déploiements Natives.