Panoramica
Separator esegue il rendering di un div con role="separator" e un orientamento accessibile. Utilizza il contratto del separatore di Base UI, incluse le proprietà native, i ref e la composizione render. Importa SeparatorProps dallo stesso punto di ingresso.
Utilizzo
Orientamento e aspetto
orientation è impostato su horizontal per impostazione predefinita. I margini sono impostati su zero per impostazione predefinita in entrambi gli orientamenti. I separatori orizzontali occupano tutta la larghezza disponibile. I separatori verticali si estendono lungo il relativo contenitore flex. Assegna un’altezza a un separatore verticale autonomo. Controlla la spaziatura tramite il layout padre oppure usa style o className nativi per margini espliciti e il colore della linea. Base UI accetta anche funzioni dell’orientamento per queste proprietà.
Divisori con etichetta
Usa LabeledSeparator per un’etichetta di testo tra le linee di divisione o alla fine di un separatore. Fornisce il layout e un unico nome accessibile per il separatore.Migrazione
Sostituisci il precedente helper orizzontale conSeparator. Rimuovi noMargin, poiché ora i margini sono impostati su zero per impostazione predefinita. Per mantenere la precedente spaziatura predefinita, aggiungi style={{ marginBlock: 'var(--t-spacing-3)' }}. Sostituisci color con style={{ backgroundColor: color }}. Usa LabeledSeparator per i separatori con etichetta, passa l’etichetta come children e rinomina textPosition in labelPosition. Sostituisci i separatori utilizzati solo per la spaziatura invisibile con la spaziatura del layout.
Props
string | ((state: SeparatorState) => string | undefined)
CSS class or function of the separator orientation.
"horizontal" | "vertical"
predefinito:"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.