Resumen
Separator representa un div con role="separator" y una orientación accesible. Utiliza el contrato de separador de Base UI, incluidas las props nativas, las referencias y la composición mediante render. Importa SeparatorProps desde el mismo punto de entrada.
”Uso”
Orientación y apariencia
orientation tiene como valor predeterminado horizontal. Los márgenes tienen como valor predeterminado cero en ambas orientaciones. Los separadores horizontales ocupan todo el ancho disponible. Los separadores verticales se estiran a lo largo de su contenedor flex. Asigna una altura a un separador vertical independiente. Controla el espaciado mediante el diseño principal o usa style o className nativos para establecer márgenes explícitos y el color de la línea. Base UI también acepta funciones de la orientación para estas props.
Divisores con etiqueta
Use LabeledSeparator para una etiqueta de texto entre líneas divisorias o al final de una regla. Proporciona el diseño y un único nombre de separador accesible.Migración
Reemplaza el antiguo asistente horizontal porSeparator. Elimina noMargin, ya que los márgenes ahora tienen como valor predeterminado cero. Para conservar el espaciado predeterminado anterior, añade style={{ marginBlock: 'var(--t-spacing-3)' }}. Reemplaza color por style={{ backgroundColor: color }}. Use LabeledSeparator para divisores con etiqueta, pase la etiqueta como elementos secundarios y cambie el nombre de textPosition a labelPosition. Reemplaza los separadores que se usan solo para espaciado invisible por espaciado de diseño.
”Props”
string | ((state: SeparatorState) => string | undefined)
CSS class or function of the separator orientation.
"horizontal" | "vertical"
predeterminado:"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.