@capgo/capacitor-sheets

Des bottom sheets, drawers, dialogs et overlays agnostiques au framework, optimisés pour les WebViews Capacitor.

Indépendant du framework

Utilisez directement des éléments personnalisés basés sur les standards ou utilisez des helpers pour React, Vue, Angular, Svelte et Solid.

Capacitor est prêt

Respectez les safe areas, le mouvement du clavier, les gestes natifs de l'edge et l'assombrissement de la couleur du thème WebView depuis la couche web.

Chaque forme de sheet

Composez des bottom sheets, des side drawers, des top sheets, des dialogs centrés, des toasts, des sheets détachés, des cards, des pages et des lightboxes.

CSS moderne

Définissez les detents avec em, rem, des unités de viewport, calc(), et des variables CSS, tandis que le dimensionnement par défaut reste em basé.

Support des plateformes

Plateforme	Support	Notes
iOS	Couche web	Éléments personnalisés dans WKWebView
Android	Couche web	Éléments personnalisés dans Android WebView
Le Web	Oui	Mêmes composants pour les builds web Capacitor

Quand l'utiliser

@capgo/capacitor-sheets est conçu pour les applications Capacitor qui nécessitent des overlays mobiles de haute qualité sans adopter de framework UI spécifique. Il est livré sous forme de custom elements, le package principal n'ayant donc aucune dépendance runtime vers React, Vue, Angular, Svelte ou Solid.

Utilisez-le lorsque vous avez besoin de :

bottom sheets avec un ou plusieurs detents
sidebars à gauche ou à droite et top sheets
dialogues centrés, lightboxes, cartes et overlays de type toast
sheets persistantes qui maintiennent l'interactivité de l'app en arrière-plan
overlays plein écran qui entrent depuis un edge
effets de stack, de profondeur et de parallaxe pilotés par la progression de la sheet
des helpers de scroll qui exposent la progression et la distance
layout sécurisé pour Capacitor (notches, indicateurs home, encoches Android et claviers logiciels)

Couverture des cas d'usage

Cas d'usage	Modèle de Capgo Sheets
Sheet long	`cap-sheet` avec défilement naturel du contenu ou `cap-scroll`
Sheet avec detent	`detents="18em 32em"` , ce qui `stepTo()` ou un déclencheur d'étape
Sidebar	`content-placement="left"` ou `content-placement="right"`
Bottom Sheet	par défaut `content-placement="bottom"`
Sheet avec clavier	`native-focus-scroll-prevention` et gestion du décalage du viewport visuel
Toast	`inert-outside="false"`, `focus-trap="false"`, et sans fermeture au clic extérieur
Sheet détaché	`cap-sheet-special-wrapper` avec marges et rayons personnalisés
Page depuis le bas	contenu de bottom sheet plein écran
Top Sheet	`content-placement="top"`
Sheet avec empilement	`cap-sheet-stack` avec des variables de profondeur
Sheet avec profondeur	`cap-sheet-outlet` et des transformations axées sur la progression
Page en parallaxe	`cap-sheet-outlet` par `cap-scroll` progression
Page	contenu plein écran entrant depuis un edge
Lightbox	`content-placement="center"` avec arrière-plan et contenu média
Sheet persistante avec detent	`default-presented`, `swipe-dismissal="false"`, et `inert-outside="false"`
Carte	contenu de la sheet compact et centré

Core API

<cap-sheet> gère l'état de présentation, les detents, le placement, les gestes, l'accessibilité et les événements.
<cap-sheet-trigger> déclare les actions present, dismiss, toggle et detent-step.
<cap-sheet-view> positionne l'overlay et applique les décalages de safe-area et de clavier.
<cap-sheet-backdrop> affiche un backdrop synchronisé avec la progression.
<cap-sheet-content> affiche la surface de la sheet.
<cap-sheet-handle> fournit les contrôles de detent par drag et clavier.
<cap-sheet-stack> coordonne les sheets empilées.
<cap-sheet-outlet> expose la progression des feuilles aux effets de page, de profondeur et de parallaxe.
<cap-scroll> et <cap-scroll-content> expose les helpers de distance et de progression du scroll.
setupSheet(element, options?) configure un sheet via les effets du framework ou les hooks de cycle de vie.

Modèle de mise en page Capacitor

La vue du sheet par défaut lit env(safe-area-inset-*) et le style Capacitor --safe-area-inset-* les variables de repli, puis applique les edges sélectionnés comme padding autour de l'overlay. safe-area="auto" protège tous les edges ; utilisez safe-area="bottom left right" ou safe-area="none" lorsqu'un cas d'usage nécessite un comportement différent.

La gestion du clavier est activée par défaut. Le sheet écoute visualViewport gère les événements de redimensionnement et de défilement, ajoute un décalage du clavier au viewport et gère le focus avec preventScroll pour que les champs restent visibles au-dessus du clavier logiciel.

Le package s'exécute dans la couche web. Il ne génère pas de bottom sheets natives UIKit ou Android, ce qui permet à votre app de garder un contrôle total sur le style tout en respectant les contraintes WebView essentielles dans Capacitor.

Démos et playgrounds

Des démos WebP animées pour chaque cas d'usage sont incluses dans le README du dépôt. Les exemples sont également disponibles via des playgrounds StackBlitz :

Sheet long	Detents

Sidebar	Lightbox

Continuer avec @capgo/capacitor-sheets

Si vous utilisez @capgo/capacitor-sheets pour planifier le travail sur les plugins natifs, connectez-l’à Capgo Répertoire des plugins pour le workflow produit dans Capgo Plugin Directory, Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans Adding or Updating Plugins, Alternatives aux plugins Ionic Enterprise pour le workflow produit dans les alternatives aux plugins Ionic Enterprise, et Capgo Native Build pour le workflow produit dans Capgo Native Builds.