palaze-web Palaze web Docs Github demo-image Componentes Sidebar Header

Header

<plz-header> | PlzHeader

El componenteheaderes el primer elemento de una página, generalmente se encuentra en la parte superior, pero también la podemos encontrar en ambos lados de la página verticalmente. Suele contener elementos enlace o de navegación para acceder a páginas relacionadas con el contenido donde se encuentre.

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