palaze-web Palaze web Docs Github Empezando Componentes Button Card Colors Divider Footer Header Hero Menu Menu-dropdown Menu-item Section Showcase Sidebar Spinner Tooltip Design System Colores Tipografia Formas

Divider

<plz-divider> | PlzDivider

El componentedividersirve para dividir distintas partes del contenido y hacer que se diferencien.

En este caso se hará uso de dividers de tipo horizontal ya que son los más comunes y se podrá ajustar grosor, color y forma del mismo.

El uso más normal de estos es de tipo minimalista, una línea fina solida de un color que vaya acorde al estilo de la página y que no resalte mucho.

Ejemplos

Tipos de divider

Usaremos el atributo type para elegir el tipo de divider que veamos adecuado para nuestro contenido entre "solid", "dashed" y "dotted".

En este caso estaremos modificando la forma del divider, pudiendo elegir entre tres tipos.

Variante custom

Usaremos el atributo variant para elegir la variante de divider "custom" y podremos ajustarlo a nuestra página haciendo uso del atributo height y custom-position para determinar la posición del divider. También haremos uso del atributo custom-divider en el que definiremos la imagen que utilizaremos para el componente.

A continuación se muestran dos ejemplos de su posible uso:

Grosor del divider

Usaremos el atributo height para elegir el grosor del divider.

Pese a que lo más común es utilizar un grosor pequeño, en algunas ocasiones puede darse el caso de necesitar un grosor más grande.

Color del divider

Usaremos el atributo color para elegir el color más adecuado según nuestro estilo de página web. Por defecto seráblack-4.

Se puede usar tanto hex, rgb o rgba para el atributo color.

Margen superior e inferior del divider

Usaremos el atributo space-top y space-bottom para añadir espacio entre los elementos y el divider.

En algunos casos es necesario añadir un margen extra para que la colocación de nuestro elemento divider se visualice correctamente con nuestro contenido.

El divider estará a 10px de este elemento.

El divider estará a 20px de este elemento.

Combinaciones para crear dividers originales

Podemos usar combinaciones de los atributos vistos para crear dividers originales.

En ocasiones se da el caso de necesitar un divider con distintos colores para hacer el cambio de sección más visual, pudiendo cambiar grosor, forma, etc. y lograr así set más creativo.

En este caso obtenemos un divider de distintos colores.

En este caso obtenemos uno con colores y tipos distintos que se parece a una cremallera.

Hay distintas combinaciones para investigar.

Atributos

Nombre Descripción Posibilidades Por defecto
variant Distintas variantes del componente 'default' - 'custom' 'default'
type Distintas tipos del componente 'solid' - 'dashed' - 'dotted' 'default'
color Distintos colores del componente hex, rgb, rgba black-4
space-top Separación superior del componente Number(px) '0'
space-bottom Separación inferior del componente Number(px) '0'
custom-divider Referencia a una imagen '../assets/icon/...'
custom-position Distintas posiciones de imagen del componente 'example' 'top left'