Skip to main content

Divider

<gstock-divider> | GstockDivider

Vertical

Utilice el atributo vertical para dibujar el divisor en una orientación vertical. El divisor ocupará toda la altura de su contenedor.

Los divisores verticales funcionan especialmente bien dentro de un contenedor flexible.

First Middle Last
<div style="display: flex; align-items: center; height: 2rem">
  First
  <gstock-divider vertical></gstock-divider>
  Middle
  <gstock-divider vertical></gstock-divider>
  Last
</div>

Color

Utilice la propiedad personalizada --color para cambiar el color del divisor.

<gstock-divider style="--color: orange"></gstock-divider>

Espaciado

Utilice la propiedad personalizada --spacing para cambiar la cantidad de espacio entre el divisor y sus elementos vecinos.

Above Below
<div style="text-align: center">
  Above
  <gstock-divider style="--spacing: 2rem"></gstock-divider>
  Below
</div>

Ancho

Utilice la propiedad personalizada --width para cambiar el ancho del divisor.

<gstock-divider style="--width: 4px"></gstock-divider>