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

Menu-item

<plz-menu-item> | PlzMenuItem

Los componentesmenu-itemforman parte del componente padreMenu.Se utilizan como parte del menu para funcionar como enlaces para las distintas secciones que se requieren en una página web.

El hecho de ser un componente web hace que sea escalable y personalizable.

Acciones Subir Bajar Girar Rodar Saltar

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 colorblack-3.

Acciones Subir Bajar Girar Rodar Saltar

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.

Acciones Subir Bajar Girar Rodar Saltar

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.

Panel Admin Overview Configuration Users Notifications Register Calendar Log out

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 elementosdropdown-menuen su interior.

Subir Acciones Girar Rodar Saltar

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 'black-3'
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'
target 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'