Capgo-@capgo/capacitor-feuilles

Construirez des feuilles, des tiroirs, des boîtes de dialogue, des toasts, des lightboxes, 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 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'édge natifs et l'atténuation de la couleur de thème WebView à partir de la couche web.

Tous les modèles de feuilles

Compose bottom sheets, side drawers, top sheets, centered dialogs, toasts, detached sheets, cards, pages, and lightboxes.

CSS moderne

L'auteur détermine avec em, rem, unités de vue, calc(), et variables CSS tout en gardant la taille par défaut inchangée em basée.

Quand 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 package 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énivellés
barres latérales gauche et droite et feuilles d'en-tête
fenêtres contextuelles, boîtes de dialogue légères, cartes et fenêtres de notification
feuilles persistantes qui gardent l'application derrière elles interactive
surcouche de page complète qui entre par un bord
Effets de pile, profondeur et parallaxe animés par les progrès de la feuille
aideurs de scroll qui exposent des valeurs de progression et de distance
Capacitor-disposition sécurisée pour les coins d'écran, les indicateurs de maison, les coupures Android et les claviers logiciels

Portée des cas d'utilisation

Usecase	Capgo modèle de feuilles
Feuille de calcul	`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 de bas de page	default `content-placement="bottom"`
Feuille avec clavier	`native-focus-scroll-prevention` and visual viewport offset handling
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érieur 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 transformations guidées par la progression
Page Parallaxe	`cap-sheet-outlet` avec `cap-scroll` progress
Page	contenu plein écran entrant d'un bord
Lightbox	`content-placement="center"` avec un fond d'arrière-plan et un contenu multimédia
Fenêtre persistante avec un détent	`default-presented`, `swipe-dismissal="false"`, et `inert-outside="false"`
Carte	contenu compact centré de la feuille

Core API

<cap-sheet> gère l'état de présentation, les détenus, la disposition, les gestes, l'accessibilité et les événements.
<cap-sheet-trigger> declare des actions de présence, 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> renders a progress-synced backdrop.
<cap-sheet-content> affiche la surface de la feuille.
<cap-sheet-handle> fournit des contrôles de détent et de clavier.
<cap-sheet-stack> coordonne les feuilles empilées.
<cap-sheet-outlet> expose les progrès de feuille à la page, la profondeur et les effets de parallaxe.
<cap-scroll> et <cap-scroll-content> Exposer les progressions et les distances de scroll.
setupSheet(element, options?) configure une feuille à partir d'effets de framework ou de hooks de cycle de vie.

Modèle de disposition Capacitor

La vue par défaut du feuillet de données env(safe-area-inset-*) et Capacitor-style --safe-area-inset-* variables de rechange, 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" when a usecase needs different behavior.

La gestion du clavier est activée par défaut. Le feuille d'attente écoute visualViewport resizez et défilez les événements, ajoute un décalage clavier à la vueport, 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 bas de page 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 Playgrounds

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 de plateformes StackBlitz :

Feuille de calcul	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 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 de Plugins Entreprise Ionic pour le flux de travail du produit dans les alternatives du plugin Enterprise Ionic Capgo Builds Natives pour le flux de travail du produit dans Capgo Builds Natives.