Sheet · Documentation

UISheet

Flux de travail latéraux sans quitter le contexteLien vers la section

Les Sheet component est un panneau coulissant utilisé pour les workflows latéraux, les filtres, la navigation et l'édition contextuelle.

Utilisez-le pour:

Filtres avancés
navigation mobile
panneaux d'édition latéraux
panneaux de détail
paramètres contextuels
flux de travail secondaires qui devraient préserver le contexte de la page

La feuille est construite sur Boîte de dialogue Radix et stylisé avec des tokens sémantiques PyColors tels que bg-card, border-borderet text-foreground.

Idée de base

Sheet maintient l'utilisateur dans son contexte tout en exposant un flux de travail secondaire plus important.

ImportationLien vers la section

sheet-import.tsx

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@pycolors/ui";

Utilisation de baseLien vers la section

Utilisez Sheet pour un panneau latéral qui contient un flux de travail ciblé mais plus important qu’une boîte de dialogue.

Règle de déclenchement

Préférez SheetTrigger asChild Ainsi, le déclencheur conserve la sémantique de l'élément que vous passez, comme un bouton réel.

Quand utiliser SheetLien vers la section

Utilisez Sheet lorsque l'utilisateur a besoin de plus d'espace qu'un menu, mais doit conserver le contexte de la page.

Filtres

Utilisez pour les filtres avancés sans surcharger la barre d'outils.

Édition latérale

Utiliser pour modifier les enregistrements tout en gardant la page parent visible.

Navigation mobile

Utilisez un panneau latéral de gauche pour les menus mobiles et la navigation dans les applications.

CôtésLien vers la section

Les feuilles prennent en charge quatre options de placement à travers le side prop.

Utilisez le placement pour correspondre au modèle mental du flux de travail.

Orientation en matière de placementLien vers la section

Côté	Idéal pour
`right`	Montage, détails, panneaux contextuels
`left`	Navigation, menu de l'application, barre latérale mobile
`top`	Filtres globaux, annonces, commandes compactes
`bottom`	Action mobile-first, contrôles rapides

Règle de placement

Utilisation right pour l'édition, left pour la navigation, et bottom pour les panneaux d'action mobiles.

Comportement procheLien vers la section

SheetContent Comprend un bouton de fermeture. Utilisation SheetClose pour des actions de footer explicites.

UtilisationsLien vers la section

Choisissez le bon côté

Choisissez le placement en fonction du flux de travail : à droite pour les détails, à gauche pour la navigation, en bas pour les actions mobiles.

Gardez le contexte de la page visible

Une feuille devrait prolonger la page, pas la remplacer. Évitez de l'utiliser pour les flux qui ont besoin d'une page complète.

Fournir le titre et la description

Utilisation SheetTitle et SheetDescription afin que les utilisateurs comprennent le but du panel.

Utilisez une action principale

La plupart des feuilles devraient avoir une action principale et une action secondaire de fermeture ou d'annulation.

Manipuler le défilement intentionnellement

Évitez les conteneurs de défilement imbriqués. Préférez une région à défilement clair à l'intérieur de le panneau latéral.

Situation	Utilisation
Filtres avancés	Sheet
Panneau d'édition latéral	Sheet
Navigation mobile	Sheet
Enregistrer les détails du panneau	Sheet
Courte confirmation destructive	boîte dialogue
Petite liste d'actions contextuelles	menu déroulant
Flux de travail complet en plusieurs étapes	Page

Règle de décision

Sheet est pour les flux de travail latéraux. Le dialogue est pour des décisions ciblées. Le menu déroulant est pour les choix compacts.

APILien vers la section

Composante

Composante	Désignation
`Sheet`	Récipient racine
`SheetTrigger`	Élément déclencheur, généralement avec `asChild`
`SheetClose`	Fermez le contrôle, généralement en enveloppant un bouton
`SheetContent`	Surface du panneau coulissant
`SheetHeader`	Titre et description stack helper
`SheetFooter`	Action Row Helper
`SheetTitle`	Titre de feuille accessible
`SheetDescription`	Texte d ' appui

SheetContent props

Prop	Type	Par défaut	Désignation
`side`	`SheetSide`	`"right"`	Placement du panel
`className`	`string`	—	Autres classes Tailwind
`...props`	`DialogPrimitive.Content` props	—	Radix Dialog Contenu props

Sheet, SheetTriggeret SheetClose sont des réexportations de primitives Radix Dialog et acceptent leurs props natifs.

TypeScript typesLien vers la section

sheet-types.ts

export type SheetSide = "top" | "bottom" | "left" | "right";

export interface SheetContentProps extends React.ComponentPropsWithoutRef<
  typeof DialogPrimitive.Content
> {
  side?: SheetSide;
}

AccessibilitéLien vers la section

Sheet est construit sur les primitives Radix Dialog.

Cela signifie :

La focus est piégée alors qu’elle est ouverte
se concentrer revient au déclencheur à la fermeture
Escape ferme le panneau latéral par défaut
les lecteurs d'écran reçoivent la sémantique de dialogue
SheetTitle Fournir le nom accessible

Directives :

utilisation SheetTrigger asChild avec un déclencheur sémantique
Inclure une claire SheetTitle
Inclure un utile SheetDescription
éviter d'utiliser Sheet pour les confirmations destructives
éviter les feuilles imbriquées
éviter les longs flux en plusieurs étapes à l'intérieur d'un panneau latéral

Règle d'accessibilité

Une feuille se comporte toujours comme un dialogue. Il a besoin d'un étiquetage clair, d'une gestion ciblée et d'une tâche limitée.

Préférez/évitezLien vers la section

Préférez

bonnes feuilles pour l'édition et les détails
feuilles de gauche pour la navigation
Titre et description clairs
une action de pied de page primaire
une région intentionnelle de défilement

Éviter

Des confirmations destructrices qui devraient être des dialogues
flux de travail pleine page pressés dans un panneau
feuilles imbriquées
de multiples actions principales concurrentes
défilement peu clair avec des conteneurs imbriqués

Directives de copie du produitLien vers la section

La copie de feuille devrait indiquer aux utilisateurs ce que le panneau fait et ce qui se passe ensuite.

Filtrer les projets

Filtering should reduce noise without overwhelming the interface.

Narrow results by status, owner, date, and plan.

Questions courantesLien vers la section

BoutonUtilisez le bouton comme déclencheur et action de pied de page à l'intérieur des feuilles.EntréesFeuilles internes communes pour éditer les formulaires et les filtres.boîte dialogueUtilisez la boîte de dialogue pour des confirmations ciblées et des tâches modales courtes.Motif de recouvrementsChoisissez entre Sheet, Boîte de dialogue et Menu déroulant pour les flux de produits.