Liukupaneeli

Sheet — sivupaneeli

Reunasta liukuva modaali. Rakentuu samalle Radix-dialogille kuin Dialog, joten fokusansa, Esc, scroll-lukitus ja aria-attribuutit tulevat samasta lähteestä. Ei uutta riippuvuutta.

import {
  Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription,
  SheetBody, SheetFooter, Button,
} from "@karkkainen/ui";

<Sheet open={open} onOpenChange={setOpen}>
  <SheetContent size="lg">
    <SheetHeader>
      <SheetTitle>Toimittajan tiedot</SheetTitle>
      <SheetDescription>Lähetys SUB-4821</SheetDescription>
    </SheetHeader>

    <SheetBody>{/* pitkä sisältö vierii tässä */}</SheetBody>

    <SheetFooter>
      <Button variant="ghost" onClick={() => setOpen(false)}>Peruuta</Button>
      <Button onClick={onSave}>Tallenna</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

size säätää vaakasuunnassa leveyttä ja pystysuunnassa korkeutta. Kapealla näytöllä sivupaneeli on aina täysleveä.

Kolme osaa, ja keskimmäinen on se tärkeä

SheetHeader ja SheetFooter ovat kiinteitä, SheetBody vierii. Dialogilla ei ole vastaavaa Body-osaa, koska se vierittää koko sisältönsä — paneelissa se tarkoittaisi että ”Tallenna” katoaa näkyvistä pitkässä lomakkeessa, juuri silloin kun käyttäjä etsii sitä.

Jätä `SheetFooter` pois kun toimintoa ei ole (esim. loki). Tyhjä toimintopalkki vie tilaa ja lupaa toimintoa jota ei ole.

Tausta jätetään näkyviin

Sheet ei sumenna eikä tummenna taustaa oletuksena. Paneeliin syötetään usein tietoa jota luetaan taustan sisältöalueelta, ja sumennettu tausta tekee siitä mahdotonta. overlay-propsi palauttaa tummennuksen kun taustan piilottaminen on nimenomainen tarkoitus.

Dialog säilyttää sumennuksen tarkoituksella: se on lyhyt keskeytys jossa taustan piilottaminen on koko pointti.

> Tausta pysyy silti klikkaamattomana, koska Radix lukitsee sen > modaalitilassa. Jos haluat taustan myös *käytettäväksi*, tarvitset > SidePanelin.