SplitView

Panele rozdzielone dzielnikami, które można przesuwać wskaźnikiem i klawiaturą. Panele obok siebie układają się w stos poniżej 40 rem, aby żaden nie był zbyt wąski do czytania.

SplitView
Splitter

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: SplitView

Files

README.md
package.json
src
tokens
test

Preview

Drag the line, or focus it and use the arrow keys.

File list: 30%

Noc, podgląd: SplitView

Files

README.md
package.json
src
tokens
test

Preview

Drag the line, or focus it and use the arrow keys.

File list: 30%

Wysoki kontrast, podgląd: SplitView

Files

README.md
package.json
src
tokens
test

Preview

Drag the line, or focus it and use the arrow keys.

File list: 30%

UżycieLink do sekcji Użycie

tsx

import { SplitView, Splitter } from '@skribly/ui/shell'

tsx

<SplitView defaultSizes={[0.3, 0.7]} label="Files and preview">
  <Pane>…</Pane>
  <Splitter label="Resize the file list" />
  <Pane>…</Pane>
</SplitView>

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ść

Każdy Splitter jest separatorem z fokusem, który zgłasza udział panelu przed nim w procentach i wskazuje go przez aria-controls.
Klawisze strzałek przesuwają o 1%, Page Up i Page Down o 10%, Home i End do granic, Enter zwija i przywraca; podwójne kliknięcie przywraca początkowy podział.
Klawisze strzałek podążają za kierunkiem czytania.
Gdy panele układają się w stos na wąskim ekranie i przewijają razem, ta kolumna staje się przystankiem Tab, nazwanym przez label, aby klawiatura mogła ją przewijać.

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