Header
<plz-header> | PlzHeader
El componente
Los header son sencillos y atractivos visualmente para que la interacción del usuario sea sencilla.
Dependiendo de la variante que usemos, podremos acceder a unos slots o a otros. Para la variante "right-hover", usaremos el slot name "left" para la parte izquierda del header y el slot name "right-select" para la parte derecha del header. Para la variante "left-hover", usaremos el slot name "left-selected" para la parte izquierda del header y el slot name "right" para la parte derecha del header. Por último, la variante "both-hover", usaremos "left-selected" y "right-selected" para ambas partes del header respectivamente.
Se puede cambiar el color del header haciendo uso del atributo color, con atributo color-text se puede cambiar el color del texto de dentro del header. Para cambiar el tanto el color del header como el texto de este cuando se pasa el cursor por encima de los distintos elementos del header, usaremos color-hover y color-text-hover.
Se podrá introducir colores en hex, rgb y rgba.
Atributos
Nombre | Descripción | Posibilidades | Por defecto |
---|---|---|---|
variant | Distintas variantes del componente | 'right-hover' - 'left-hover' - 'both-hover' | 'right-hover' |
color | Distintos colores del componente | hex, rgb, rgba | 'white' |
color-text | Color que tendra el texto de dentro del componente. | hex, rgb, rgba | 'black' |
color-hover | Color que tendrá el componente al pasar el cursor por encima | hex, rgb, rgba | |
color-text-hover | Color del texto que tendrá el componente al pasar el cursor por encima | hex, rgb, rgba |