Divider

<gstock-divider> | GstockDivider

Examples

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>
  First
  <gstock-divider vertical></gstock-divider>
  Middle
  <gstock-divider vertical></gstock-divider>
  Last
</div>

<style>
  div {
    display: flex;
    align-items: center;
    height: 2rem;
  }
</style>

Color

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

<gstock-divider></gstock-divider>

<style>
  gstock-divider {
    --color: orange;
  }
</style>

Espaciado

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

Above Below

<div>
  Above
  <gstock-divider></gstock-divider>
  Below
</div>

<style>
  div {
    text-align: center;
  }

  gstock-divider {
    --spacing: 2rem;
  }
</style>

Ancho

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

<gstock-divider></gstock-divider>

<style>
  gstock-divider {
    --width: 4px;
  }
</style>