Separator

Instalacja#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/separator.json

Użycie#

import { Separator } from "@/components/ui/separator"

<Separator />
<Separator orientation="vertical" />

Separator to linia o grubości 1 px w kolorze tokenu border. Separatory poziome wypełniają szerokość kontenera, a pionowe rozciągają się na wysokość swojego wiersza flex — nadaj więc wierszowi wysokość (h-5), a separatory się do niej dopasują.

Przykłady#

Grupy w pasku narzędzi#

Pionowe separatory dzielą powiązane kontrolki na grupy bez otaczania ich ramkami. Gdy separator ma być niższy niż jego wiersz, ustaw mu wysokość i wyrównaj go klasą data-vertical:self-center — wariant jest potrzebny, żeby nadpisać domyślne rozciąganie.

Listy#

Między wierszami listy albo panelu ustawień separatory pełnią rolę obramowań, nie dublując przy tym krawędzi kontenera.

Z etykietą#

Aby wstawić lub między alternatywami, użyj FieldSeparator. Składa się z dwóch separatorów wokół etykiety i nie potrzebuje tła, więc dobrze wygląda na każdej powierzchni.

Dekoracyjny#

Separatory są domyślnie semantyczne. Gdy separator nadaje jedynie rytm — na przykład między metadanymi w jednym wierszu — oznacz go jako decorative, żeby czytniki ekranu go nie odczytywały.

<Separator orientation="vertical" decorative />

Wytyczne#

Kiedy używać#

• Do podziału powierzchni na grupy, których związek nie wynika już z odstępów ani nagłówków.
• Między grupami kontrolek w pasku narzędzi, sekcjami menu i wierszami listy.
• Między metadanymi w jednym wierszu, gdzie przecinki lub punktory wprowadzałyby szum.

Kiedy nie używać#

• Tam, gdzie grupy rozdzieliłaby sama pusta przestrzeń. Odstęp to cichsze narzędzie — sięgaj po niego w pierwszej kolejności.
• Jako krawędź powierzchni — karty, okna dialogowe i tabele same rysują swoje obramowania.
• Do oddzielania sekcji strony, które mają nagłówki — to nagłówek jest separatorem.

Najpierw odstęp, potem linia#

Układy prfct czerpią strukturę ze skali odstępów. Dodaj separator tylko wtedy, gdy grupowanie samym odstępem wymagałoby go tak dużo, że układ by się rozsypał, albo gdy elementy leżą zbyt gęsto, by rozdzielić je w inny sposób.

Trzymaj się tokenu border#

Separatory używają bg-border — subtelnego koloru strukturalnego. Nie przyciemniaj ich, żeby coś wyróżnić — jeśli podział ma być mocniejszy, prawdopodobnie potrzebuje raczej nagłówka albo większego odstępu.

Dostępność#

Separator w prfct renderuje <div role="separator"> z aria-orientation, dzięki czemu technologie wspomagające mogą zasygnalizować granicę między grupami. Nie przyjmuje fokusu i nie obsługuje klawiatury.

• Semantyczny czy dekoracyjny. Zostaw domyślną rolę, gdy separator wyznacza rzeczywistą granicę między grupami treści. Użyj decorative, gdy jest czysto wizualny: renderuje wtedy role="none" i pomija aria-orientation, którego ta rola nie może mieć.
• Kontrast elementów nietekstowych. Token border jest celowo subtelny i nie musi spełniać progu 3:1 — separator nigdy sam nie przekazuje informacji. Nie traktuj go jako jedynego wskaźnika zmiany stanu.

Dokumentacja API#

Separator#

Renderuje <div>. Przyjmuje wszystkie propsy komponentu Separator z Base UI.