Pane

Przewijany panel układu podzielonego z przyklejonym nagłówkiem. Użyj wariantu side dla listy obok pracy, a sunken dla panelu pod nią.

Pane
PaneHeader

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: Pane

Sessions

Session 1
Session 2
Session 3
Session 4
Session 5
Session 6
Session 7
Session 8
Session 9
Session 10
Session 11
Session 12

Output

Nothing yet.

Noc, podgląd: Pane

Sessions

Session 1
Session 2
Session 3
Session 4
Session 5
Session 6
Session 7
Session 8
Session 9
Session 10
Session 11
Session 12

Output

Nothing yet.

Wysoki kontrast, podgląd: Pane

Sessions

Session 1
Session 2
Session 3
Session 4
Session 5
Session 6
Session 7
Session 8
Session 9
Session 10
Session 11
Session 12

Output

Nothing yet.

UżycieLink do sekcji Użycie

tsx

import { Pane, PaneHeader } from '@skribly/ui/shell'

tsx

<Pane variant="side">
  <PaneHeader title="Files" icon={<Folder />} actions={<IconButton label="Refresh">…</IconButton>} />
  …
</Pane>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Nagłówek PaneHeader nazywa panel, więc staje się regionem.
Gdy jego zawartość się przepełnia, panel jest przystankiem Tab, aby klawiatura mogła go przewijać; jego obwódka jest rysowana wewnątrz, aby krawędź nigdy jej nie ucinała.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.