Materialise es un marco CSS receptivo moderno basado en Material Design de Google. Su objetivo es desarrollar un sistema de diseño que permita una experiencia de usuario integrada en todos sus servicios en cualquier plataforma. Materialise es un lenguaje de diseño que combina los principios clásicos del diseño exitoso junto con la innovación y la tecnología. Materialise viene con varios componentes útiles que ayudan a los desarrolladores a crear sitios web receptivos.
Dropdown es uno de los componentes integrados de materialise CSS. El menú desplegable en Materialise CSS se usa básicamente para permitir que el usuario seleccione uno de los valores en una lista. Materialise CSS tiene una elegante lista desplegable con varias opciones interactivas.
Materialise CSS proporciona varias clases de CSS para crear un buen menú desplegable de una manera fácil. Las siguientes son las clases disponibles y su uso.
- dropdown-content: se utiliza para identificar una lista desordenada (ul) como un componente desplegable de materialización. Es necesario para el elemento ul .
- data-activates : se utiliza para especificar el ID del elemento desplegable de la lista desordenada (ul).
El menú desplegable en Materialise CSS proporciona varias clases de CSS para agregar una lista desplegable a cualquier botón. Solo necesita asegurarse de que la identificación del atributo de activación de datos coincida con la identificación en la etiqueta del elemento de la lista desordenada, es decir, <ul> . Puede agregar un divisor para dividir dos elementos de la etiqueta ul , con la clase «divisor». También puede agregar iconos como se implementa en los siguientes ejemplos.
Ejemplo 1: El siguiente ejemplo muestra un cuadro desplegable simple.
HTML
<!DOCTYPE html> <html> <head> <!-- Imported Materialize Font Icon library --> <link rel="stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons" /> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script> </head> <body class="container"> <h2 class="green-text">GeeksforGeeks</h2> <h3 class="blue-grey-text"> Materialize CSS Dropdown </h3> <!-- Dropdown Initiated --> <ul id="dropdownId" class="dropdown-content"> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Java</a></li> <!-- Setting a divider --> <li class="divider"></li> <li><a href="#" class="black-text">End</a></li> </ul> <!-- DropdownId assigned to data-activates property --> <a class="btn dropdown-button" href="#" data-activates="dropdownId"> Tutorials <!-- Icons used here --> <i class="mdi-navigation-arrow-drop-down right material-icons"> </i> </a> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra un menú desplegable con el componente Materialise CSS Badges con algunas opciones configuradas en la inicialización del complemento desplegable.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Imported Materialize Font Icon library -->
<link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" />
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class="container">
<br />
<h2 class="green-text">GeeksforGeeks</h2>
<h3 class="blue-grey-text">
Materialize badge classes
</h3>
<!-- Dropdown Initiated -->
<ul id="dropdownId" class="dropdown-content">
<li>
<!-- use of Badge class -->
<a href="#">Checked<span
class="card badge">89+</span>
</a>
</li>
<li>
<a href="#!">Unchecked
<span class="card new badge blue">20</span>
</a>
</li>
<li><a href="#" class="card badge">Spam</a></li>
<li class="divider"></li>
<li><a href="#">Junk<span
class="badge">14</span></a>
</li>
</ul>
<!-- DropdownId of ul is assigned
to data-activates property -->
<a class="btn dropdown-button" href="#"
data-activates="dropdownId">
My mails
<!-- Using Icons -->
<i class="mdi-navigation-arrow-drop-down right"></i>
</a>
<script>
$('.dropdown-button').dropdown({
inDuration: 250,// Enter transition in ms
outDuration: 250,// Out transition in ms
constrainWidth: true,// Width takes size of activator
hover: true, // Activate on hover
belowOrigin: true, //Dropdown is below activator
alignment: 'right'
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por omkarbhusnale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA