Dropdown menu
<plz-dropdown-menu> | PlzDropdownMenu
El componente
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 componente
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.
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.
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' | |
Distintas formas de mostar el link del componente | '_self' - '_blank' - '_parent' - '_top' - 'framename' | '_self' | |
static | Estado fijo desplegado del componente. | 'true' - 'false' | 'false' |