SidePanel

Sivupaneeli

Sisältöä kaventava paneeli; molemmat puolet jäävät käytettäviksi.

Käyttöpaikat

Suoraan: palvelu tuo osan itse. Välillisesti: osa tulee mukaan toisen paketin osan kautta, ja sen muutos näkyy palvelussa silti. Laskettu julkaisun yhteydessä 23.10.2026.

TP-IAM

Sisältö kapenee paneelin viereltä, ja molemmat puolet pysyvät käytettävinä.

Käyttö

Paketin README:n luku sellaisenaan.

SidePanel — sisältöä kaventava sivupalkki

Layout-elementti, ei overlay. Ottaa oman tilansa vierestä ja jättää molemmat puolet käytettäviksi.

import {
  SidePanel, SidePanelHeader, SidePanelTitle,
  SidePanelBody, SidePanelFooter,
} from "@karkkainen/ui";

<div className="flex min-h-0 flex-1">
  {/* min-w-0 on PAKOLLINEN — ilman sitä flex ei anna sisällön kaventua */}
  <main className="min-w-0 flex-1 overflow-y-auto">…taulukko…</main>

  <SidePanel open={open} onClose={() => setOpen(false)} size="sm">
    <SidePanelHeader>
      <SidePanelTitle>Toimittajan tiedot</SidePanelTitle>
    </SidePanelHeader>
    <SidePanelBody>…</SidePanelBody>
    <SidePanelFooter>…</SidePanelFooter>
  </SidePanel>
</div>

Propsi	Arvot	Oletus
`open`	pakollinen	—
`onClose`	kun annettu, piirtää sulkupainikkeen	—
`size`	`sm` · `default` · `lg`	`default`
`side`	`right` · `left`	`right`

Kapealla näytöllä (< md) paneeli menee sisällön päälle — inline-paneeli puristaisi sisältöalueen käyttökelvottoman kapeaksi puhelimessa.

Ei hookkeja eikä globaaleja kuuntelijoita: sulkeminen on kutsujan vastuulla, joten paneelin tila voi tulla myös URL:sta ilman asiakaspuolen tilaa.

Dialog, Sheet vai SidePanel?

Kysymys	Dialog	Sheet	SidePanel
Näkyykö tausta?	Ei — tummennettu	Kyllä	Kyllä — vieressä
Voiko taustaa käyttää samalla?	Ei	Ei	Kyllä
Vieikö tilaa sisällöltä?	Ei	Ei	Kyllä — kaventaa
Kuinka kauan käyttäjä viipyy?	Sekunteja	Minuutteja	Koko työskentelyn ajan
Esimerkki	Poiston vahvistus	Detaljit, suodattimet, loki	Tarkastelupaneeli, syöttö taulukon rinnalla

Nyrkkisääntö: jos käyttäjän on tarkoitus *lukea tai klikata taustaa* paneelin ollessa auki, se on SidePanel. Muuten Sheet.

Neljä tyypillistä käyttötapausta (kaikki klikattavina demo-sivustolla):

Detaljinäkymä listan rinnalla — operaattori käy listaa läpi rivi riviltä. Oma sivu veisi listan pois ja pakottaisi takaisin-napin joka kerta. *Jos sisältö ansaitsee oman URL:n ja jaettavan linkin, tee siitä sivu.*
Suodattimet suurelle taulukolle — suodattaminen on iteratiivista: säädä, katso tulos, säädä uudelleen. Dialogi peittäisi juuri sen mitä ollaan säätämässä.
Lomake joka ei mahdu dialogiin — kiinteä footer pitää tallennuksen näkyvissä.
Tapahtumaloki — luettavaa, ei muokattavaa; ei footeria.

Vasen reuna on varattu navigaatiolle. Käytä oikeaa, ellei sinulla ole erityistä syytä.

Tuonti ja lähde

import { SidePanel, SidePanelHeader, SidePanelBody, SidePanelFooter, SidePanelTitle, SidePanelDescription } from "@karkkainen/ui";

src/components/side-panel.tsx