Divider
<plz-divider> | PlzDivider
El componente
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á
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 | |
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/...' | |
Distintas posiciones de imagen del componente | 'top left' |