Desplegable Materializar CSS

Materialise CSS proporciona una función desplegable que permite al usuario elegir un valor de un conjunto de valores dados en una lista. Para agregar una lista desplegable a cualquier botón, debe asegurarse de que el atributo de destino de datos coincida con la identificación en la etiqueta <ul>. 

La clase principal y el atributo utilizado en un menú desplegable son: 

  1. La clase de contenido desplegable se utiliza para identificar qué etiqueta <ul> debe convertirse en un componente desplegable de Materialise.
  2. El atributo data-activates se usa para especificar la identificación del elemento desplegable <ul> .

Sintaxis:

HTML

<!-- Dropdown Trigger -->
<h5>
  <a class='dropdown-button btn green' 
     href='#'
     data-activates='dropdown1'>
    Drop Me!
    <i class="large material-icons">
      arrow_drop_down
    </i>
  </a>
</h5>

En la lista desplegable se pueden agregar los siguientes elementos:

  • Un divisor se agrega usando la clase divisor . Se puede agregar a una etiqueta <li> vacía para mostrar un divisor.
  • Los íconos se agregan usando la clase material-icons usando la etiqueta <i>. El icono que se utilizará se puede especificar y se mostrará junto al texto del elemento de la lista.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  
    <script type="text/javascript" src=
        "https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
  
    <!-- Let the browser know that the
  website is optimized for mobile -->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <h4>Dropdown in Materialize:</h4>
    <!-- Dropdown Trigger -->
    <h5><a class='dropdown-button btn green'
            href='#' data-activates='dropdown1'>
            Drop Me!
            <i class="large material-icons">
                arrow_drop_down
            </i>
        </a>
    </h5>
  
    <!-- Dropdown Structure -->
    <ul id='dropdown1' class='dropdown-content'>
  
        <!-- Define the links in the dropdown -->
        <li>
            <a href=
"https://www.geeksforgeeks.org/materialize-css-collections/?ref=rp">
                Collections
            </a>
        </li>
        <li>
            <a href=
"https://www.geeksforgeeks.org/materialize-css-icons/?ref=rp">
                Icons
            </a>
        </li>
  
        <!-- Define a divider -->
        <li class="divider"></li>
        <li><a href="#!">Table</a></li>
  
        <!-- Define a list item with an icon -->
        <li>
            <a href="#!">
                <i class="material-icons">
                    view_module
                </i>
                Home
            </a>
        </li>
    </ul>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
    </script>
</body>
  
</html>

Producción:


Publicación traducida automáticamente

Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *