Reddot UI Library

Docs
Sheet

Sheet

Extends the Dialog component to display content that complements the main screen content.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/sheet.json

Utilisation

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
 
export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger>Open</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Are you absolutely sure?</SheetTitle>
          <SheetDescription>
            This action cannot be undone. This will permanently delete your account
            and remove your data from our servers.
          </SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

Exemples

Positionnement latéral

Utilisez la propriété side sur <SheetContent /> pour spécifier de quel bord d'écran le sheet apparaît :

<SheetContent side="top">
  {/* Contenu du sheet en haut */}
</SheetContent>
 
<SheetContent side="right">
  {/* Contenu du sheet à droite */}
</SheetContent>
 
<SheetContent side="bottom">
  {/* Contenu du sheet en bas */}
</SheetContent>
 
<SheetContent side="left">
  {/* Contenu du sheet à gauche */}
</SheetContent>

Valeurs possibles : top, right, bottom, left

Personnalisation de la taille

Ajustez la taille du sheet en utilisant les classes CSS :

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent className="w-[400px] sm:w-[540px]">
    {/* Contenu du sheet */}
  </SheetContent>
</Sheet>

API Reference

Sheet

Conteneur racine pour le composant sheet.

PropTypeDefaultDescription
defaultOpenbooleanfalseL'état d'ouverture par défaut du sheet.
openboolean-L'état d'ouverture contrôlé du sheet.
onOpenChange(open: boolean) => void-Gestionnaire d'événement appelé lorsque l'état d'ouverture change.

SheetTrigger

Le déclencheur qui ouvre le sheet.

SheetContent

Le contenu du sheet.

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""right"Le côté de l'écran à partir duquel le sheet apparaît.
onEscapeKeyDown(event: KeyboardEvent) => void-Gestionnaire d'événement appelé lorsque la touche Escape est pressée.
onPointerDownOutside(event: PointerDownOutsideEvent) => void-Gestionnaire d'événement appelé lorsqu'un pointeur est pressé en dehors du sheet.
onInteractOutside(event: PointerDownOutsideEvent | FocusOutsideEvent) => void-Gestionnaire d'événement appelé lorsqu'une interaction se produit en dehors du sheet.

SheetHeader

Zone d'en-tête optionnelle du sheet.

SheetTitle

Titre du sheet pour l'accessibilité.

SheetDescription

Description du sheet pour l'accessibilité.

SheetFooter

Zone de pied de page optionnelle du sheet.

SheetClose

Bouton pour fermer le sheet.

Références