@capgo/capacitor-feuilles

Construire des feuilles, des tiroirs, des boîtes de dialogue, 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 bord natifs et l'ombrage de la couleur de la vue Web depuis la couche web.

Tous les formes de feuille

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

Auteur de détenus avec em, rem, unités de vue, calc(), et 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 de haute qualité pour les appareils mobiles 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 de runtime pour React, Vue, Angular, Svelte ou Solid.

Utilisez-le lorsque vous avez besoin de:

feuilles de bas avec un ou plusieurs détenus
tiroirs latéraux gauche ou droit et feuilles de 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 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 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 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` 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é avec 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 dialogue 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 de marketing ou juridique long. Voir dans : page alternatives.astro. Préservez les termes de produit et de marque 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 dialogue Capgo UI plus longue (clé parente `appflow_cta_questions`). Page/zone : page de comparaison/migration de Appflow. Rôle : Paragraphe de marketing ou juridique long. Voir dans : page ionic-appflow.astro. Préservez les termes de produit et de marque 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 dialogue Capgo UI plus longue (clé parente `capwesome_cta_questions`). Page/zone : page de comparaison de Capawesome. Rôle : Paragraphe de marketing ou juridique long. Voir dans : page capwesome.astro. Préservez les termes de produit et de marque 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. Voir dans : page consulting.astro. Préservez les termes de produit et de marque 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. Voir 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 champs de saisie 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, 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 Capacitor.

Démonstrations et Jardins d'expérimentation

Les démos WebP animées 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	Detentes

Barre latérale	Lightbox

Continuez à partir de @capgo/capacitor-feuilles

Si vous utilisez @capgo/capacitor-feuilles 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 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 Entreprise Ionic Détails du flux de travail pour les Alternatives aux Plugins Entreprise Ionic, et Capgo pour les Déploiements Natives Détails du flux de travail pour Capgo pour les Déploiements Natives.