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

Dropdown menu

<plz-dropdown-menu> | PlzDropdownMenu

El componentedropdown-menusirve para agrupar distintos elementos con una estructura concreta con la funcionalidad de desplegarse y recogerse como un acordeon.

Dentro del mundo del desarrollo web proporciona una lista de opciones para navegar por secciones de una misma web.

Las opciones se asemejan a las del componentemenu-itemya que el uso principal se situa dentro del componentemenu.

Acciones Subir Bajar Girar Rodar Saltar Configuraciones

Ejemplos

Variante custom

Usaremos el atributo variant para elegir la variante "custom", pudiendo así utilizar la opción para cambiar color al seleccionar y para poder elegir colores cuando pasas el cursor por encima del elemento (hover).

Usaremos el atributo color-hover para elegir nuestro color al pasar por encima con el cursor (hover), también determinará el color cuando el componente sea seleccionado. Usaremos el atributo color-text para determinar el color del texto cuando hagamos hover y cuando esté seleccionado el elemento.

Se podrá introducir colores en hex, rgb y rgba.

Usaremos el atributo link para introducir una url cuando sea necesario.

Para asegurarnos que el link se abre como queremos, haremos uso del atributo target, en este podremos elegir entre "_blank", "_self", "_parent", "_top" y "framename". En el caso de no hacer uso de este atributo, se utilizará por defecto "_self" (se abrirá la página en el mismo marco en el que se ha hecho el click).

Por otra parte usaremos el atributo active con las opciones "true" o "false" para elegir si queremos el menu desplegado o sin desplegar.

Acciones Subir Bajar Girar Rodar Saltar Configuraciones

Atributo static

Usaremos el atributo static para elegir entre "true" y "false". Si este atributo está activado, el componente estará desplegando a sus componentes hijo pero no tendrá opción de contraerse como en las otras opciones, estará fijo.

Acciones Subir Bajar Girar Rodar Saltar Configuraciones

Atributos

Nombre Descripción Posibilidades Por defecto
variant Distintas variantes del componente. 'simple' - 'custom' 'simple'
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 (hover). hex, rgb, rgba
active Determina si el componente está desplegado o no lo está. 'false' - 'true' 'false'
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'
static Estado fijo desplegado del componente. 'true' - 'false' 'false'