Skip to content

Separador

El componente Separador proporciona una línea fina y discreta para agrupar elementos y reforzar la jerarquía visual.

Introducción

El componente Separador se representa como un <hr> gris oscuro por defecto, y cuenta con varios accesorios útiles para realizar ajustes de estilo rápidos.

Cepillo de dientes

$4.50

La blusa de algodón azul aciano a rayas te lleva de paseo al parque o por el pasillo.

Seleccionar tipo

Suave

Medio

Duro

Conceptos básicos

import Divider from '@u_ui/u-ui/Divider';

Variantes

El componente Separador admite tres variantes: fullWidth (por defecto), inset y middle.

Variante de ancho completo
Variante encajada abajo
Variante central abajo
Elemento de la lista

Orientación

Usa el prop orientation para cambiar el Separador de horizontal a vertical. Cuando se utiliza la orientación vertical, el separador muestra un <div> con los atributos de accesibilidad correspondientes en lugar de <hr> para cumplir la especificación WAI-ARIA (Inglés).

<FormatAlignLeftIcon />
<FormatAlignCenterIcon />
<FormatAlignRightIcon />
<Divider orientation="vertical" flexItem />
<FormatBoldIcon />

<FormatAlignLeftIcon />
<FormatAlignCenterIcon />
<FormatAlignRightIcon />
<Divider orientation="vertical" flexItem />
<FormatBoldIcon />

Press Enter to start editing

Flex item

Utilice la propiedad flexItem para mostrar el divisor cuando se utilice en un contenedor flexible.

<FormatBoldIcon />
<Divider orientation="vertical" variant="middle" flexItem />
<FormatItalicIcon />

<FormatBoldIcon />
<Divider orientation="vertical" variant="middle" flexItem />
<FormatItalicIcon />

Press Enter to start editing

Con hijos

Utilice la propiedad textAlign para alinear los elementos envueltos por el divisor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CENTRO

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

IZQUIERDA

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

DERECHA

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Chip

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<Root>
  {content}
  <Divider>CENTRO</Divider>
  {content}
  <Divider textAlign="left">IZQUIERDA</Divider>
  {content}
  <Divider textAlign="right">DERECHA</Divider>
  {content}
  <Divider>
    <Chip label="Chip" size="small" />
  </Divider>
  {content}
</Root>

<Root>
  {content}
  <Divider>CENTRO</Divider>
  {content}
  <Divider textAlign="left">IZQUIERDA</Divider>
  {content}
  <Divider textAlign="right">DERECHA</Divider>
  {content}
  <Divider>
    <Chip label="Chip" size="small" />
  </Divider>
  {content}
</Root>

Press Enter to start editing

Personalización

Uso con una lista

Cuando utilice el divisor para separar elementos en una lista, utilice la propiedad component para mostrarlo como un <li>, de lo contrario no será un elemento HTML válido.

Bandeja de entrada
Borradores
Papelera
Spam

Agrupación de iconos

La siguiente demostración muestra cómo combinar los accesorios variant="middle" y orientation="vertical".

Accesibilidad

Debido a su papel implícito de separador, el Separador, que es un elemento <hr>, será anunciado por los lectores de pantalla como un "Divisor Horziontal" (o vertical, si está utilizando la propiedad orientation).

Si lo está utilizando como un elemento puramente estilístico, le recomendamos que configure aria-hidden="true" para que los lectores de pantalla lo omitan.

<Divider aria-hidden="true" />

Si utilizas el separador para envolver otros elementos, como texto o chips, te recomendamos que cambies su elemento renderizado por un simple <div> utilizando la propiedad component y estableciendo role="presentation". Esto asegura que no sea anunciado por los lectores de pantalla mientras se preserva la semántica de los elementos dentro de él.

<Divider component="div" role="presentation">
  <Typography>Elemento de texto</Typography>
</Divider>

Anatomía

El componente Separador está compuesto por una raíz <hr>.

<hr class="uiDivider-root">
  <!-- El hijo del separador va aquí -->
</hr>

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

<Divider />