Menu-item
<plz-menu-item> | PlzMenuItem
Los componentes
El hecho de ser un componente web hace que sea escalable y personalizable.
Ejemplos
Colores en menu-item
Usaremos el atributo color-hover para elegir el color al que cambiará el elemento al pasar el cursor por encima de este. También haremos uso del atributo color-text para determinar el color del texto al pasar el cursor por encima.
Se puede usar tanto hex, rgb o rgba para el atributo color-hover y color-text.
El atributo color-hover también se usará para determinar el color cuando el componente esté activo como
se mostrará en el ejemplo siguiente. Para determinar qué elemento está activado haremos uso del atributo
active con las opciones "true" o "false".
Cuando se haga click sobre un componente menu-item, este cambiará al color especificado y en caso de no
especificar a nuestro color
Link en menu-item
Usaremos el atributo link para determinar hacia que página accederemos al hacer click sobre el menu-item. En caso de elegir un link, el desarrollador en cuestión podrá realizar las modificaciones que se ajusten al contexto de su página web.
Haremos uso del atributo target y elegiremos entre las opciones "_self", "_blank", "_parent", "_top", "framename", por defecto será "_self". Con esto determinaremos cómo queremos que se abra el link.
Variantes de menu-item
Usaremos el atributo variant para elegir el tipo de menu-item que consideremos entre "simple", "custom" o "image".
Como se puede observar en el ejemplo siguiente, se pueden crear menus que se adapten a tus necesidades, tambien puedes incorporar otros componentes o elementos web al componente padre "menu" para hacerlo así todavía más personalizable.
En la variante "simple" obtendremos el menú más básico sin configuraciones.
En la variante "image" podremos determinar la imagen localizada en la parte izquierda del menu-item mediante el atributo image-url que recibirá la url a la imagen como se muestra a continuación.
Submenu
Usaremos el atributo submenu para elegir el tipo entre "true" o "false". Por defecto será "false".
Este atributo determinará una indentación más en el componente para cuando sea necesario. Uno de sus usos
más frecuentes será cuando utilicemos el componente dropdown-menu con elementos
Atributos
Nombre | Descripción | Posibilidades | Por defecto |
---|---|---|---|
variant | Distintas variantes del componente | 'simple' - 'custom' - 'image' | 'simple' |
color-hover | Distintos colores para el hover y para active:true del componente | hex, rgb, rgba | |
color-text | Distintos colores para texto del componente en hover o active:true | hex, rgb, rgba | 'white' |
link | Url a la que se accedera a partir del componente | 'docs-ejemplo.html' | |
Distintas formas de mostar el link del componente | '_self' - '_blank' - '_parent' - '_top' - 'framename' | '_self' | |
image-url | Url a la imagen para el componente | 'icon-ejemplo.svg' | |
submenu | Determina una indentación mayor para casos especificos | 'true' - 'false' | 'false' |