Prezentare generală
Separator redă un div cu role="separator" și o orientare accesibilă. Utilizează contractul de separator Base UI, inclusiv proprietăți native, referințe și compunerea render. Importă SeparatorProps din același punct de intrare.
Utilizare
Orientare și aspect
orientation are valoarea implicită horizontal. Marginile au valoarea implicită zero în ambele orientări. Separatoarele orizontale umplu lățimea disponibilă. Separatoarele verticale se întind de-a lungul containerului lor flex. Oferă unui separator vertical independent o înălțime. Controlează spațierea prin aspectul părinte sau utilizează style nativ sau className pentru margini explicite și culoarea liniei. Base UI acceptă, de asemenea, funcții ale orientării pentru aceste proprietăți.
Separatoare cu etichetă
Utilizați LabeledSeparator pentru o etichetă text între liniile de separare sau la sfârșitul unei linii de separare. Acesta oferă aspectul și un singur nume accesibil pentru separator.Migrare
Înlocuiește utilitarul orizontal anterior cuSeparator. Elimină noMargin, deoarece marginile au acum valoarea implicită zero. Pentru a păstra spațierea implicită anterioară, adaugă style={{ marginBlock: 'var(--t-spacing-3)' }}. Înlocuiește color cu style={{ backgroundColor: color }}. Utilizați LabeledSeparator pentru separatoare etichetate, transmiteți eticheta ca children și redenumiți textPosition în labelPosition. Înlocuiește separatoarele utilizate doar pentru spațiere invizibilă cu spațiere de aspect.
Proprietăți
string | ((state: SeparatorState) => string | undefined)
CSS class or function of the separator orientation.
"horizontal" | "vertical"
implicit:"horizontal"
Direction of the divider: horizontal or vertical.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>
Element or render function composed with the native separator props and ref.
CSSProperties | ((state: SeparatorState) => CSSProperties | undefined)
Native style or function of the separator orientation. Use it for spacing and line color.