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

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 fenêtres de feuille, des panneaux latéraux, des fenêtres en haut, des dialogues centrés, des toasts, des feuilles détachées, des cartes, des pages et des lightboxes.

CSS moderne

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

Lorsque l'utiliser

@capgo/capacitor-sheets s'est pour les applications Capacitor qui ont besoin de fenêtres 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 fenêtres de feuille avec un ou plusieurs détenants
des panneaux latéraux gauche ou droit et des fenêtres en haut
fenêtres modales centrées, lightboxes, cartes et surimpressions similaires à des toast
feuilles persistantes qui gardent l'application derrière elles interactive
surimpressions de page complète qui entrent par 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
disposition sécurisée pour les notches, les indicateurs de domicile, 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 la vue d'ensemble
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` 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

Section intitulée « Core API »

<cap-sheet> gestion de l'état de présentation, maintient, placement, gestes, accessibilité et événements.
<cap-sheet-trigger> déclare les actions de présentation, de fermeture, de basculement et d'é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 toutes 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 : 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 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 : 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 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 : 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 de Capwesome). | Page/zone : page de services de consulting. 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` (Sujet de FAQ 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 de @capgo/capacitor-sheets

Si vous utilisez @capgo/capacitor-sheets pour planifier le travail de plugin natif, connectez-l’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 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 d'Entreprise Ionic pour le flux de travail du produit dans Alternatives aux Plugins d'Entreprise Ionic, et Capgo Bâtiments Natives pour le flux de travail du produit dans Capgo Bâtiments Natives.