Materializar insignias CSS

Posted on by Rudeus Greyrat

Materialise badge es un componente que se utiliza para notificar, si hay mensajes nuevos o no leídos o se muestran notificaciones. Agregar una nueva clase a un componente de insignia le da un fondo.

Hay diferentes formas de usar el componente de insignia:

  • Insignias en colecciones: 
     

<div class=”colección”> 
<a href=”#!” class=”artículo-de-coleccion”><span class=”insignia”>1</span>Mensaje</a> 
<a href=”#!” class=”artículo-de-coleccion”><span class=”nueva insignia”>5</span>Mensaje</a> 
<a href=”#!” class=”elemento-de-coleccion”>Mensaje</a> 
<a href=”#!” class=”artículo-de-coleccion”><span class=”insignia”>10</span>Mensaje</a> 
</div>

  • Insignias en el menú desplegable: 
     

<ul id=”dropdown2″ class=”dropdown-content”> 
<li><a href=”#!”>one<span class=”badge”>1</span></a></li> 
< li><a href=”#!”>dos<span class=”nueva insignia”>4</span></a></li> 
<li><a href=”#!”>tres</a ></li> 
</ul> 
<a class=”btn dropdown-trigger” href=”#!” 
data-target=”dropdown2″> 
Desplegable 
<i class=”material-icons right”>arrow_drop_down</i></a> 
 

  • Insignias en la barra de navegación: 
     

<nav> 
<div class=”nav-wrapper”> 
<a href=”” class=”brand-logo”>Navbar</a> 
<ul id=”nav-mobile” class=”right hide-on-med -y-abajo”> 
<li><a href=””>menú1</a></li> 
<li><a href=””>menú2 <span 
class=”nueva insignia”>4</span> </a></li> 
<li><a href=””>menú3</a></li> 
</ul> 
</div> 
</nav>

html

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons" 
              rel="stylesheet" />
  
        <!-- 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 browser know website is optimized for mobile-->
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0" />
    </head>
  
    <body>
        <h3>Badges in collections</h3>
        <div class="collection">
            <a href="#!" 
               class="collection-item green-text">
              <span class="badge green-text">1</span>Message</a>
            
            <a href="#!" 
               class="collection-item green-text">
              <span class="new badge green">4</span>Message</a>
            
            <a href="#!" 
               class="collection-item green-text">Message</a>
            
            <a href="#!" 
               class="collection-item green-text">
              <span class="badge green-text">10</span>Message</a>
        </div>
        <h3>Badges in dropdowns</h3>
        <ul id="dropdown" class="dropdown-content">
            <li>
                <a href="#" 
                   class="green-text">Inbox
                  <span class="badge green-text">22</span></a>
            </li>
            <li>
                <a href="#!" 
                   class="green-text">Unread
                  <span class="new badge green">14</span></a>
            </li>
            <li><a href="#" class="green-text">Sent</a></li>
            <li>
                <a href="#" 
                   class="green-text">Outbox
                  <span class="badge green-text">10</span></a>
            </li>
        </ul>
        <a class="btn dropdown-button green"
           href="#" 
           data-activates="dropdown"> Dropdown
          <i class="mdi-navigation-arrow-drop-down right"></i></a>
        <div>
            <h3>Badges in Navbar</h3>
            <nav>
                <div class="nav-wrapper green">
                    <a href="" class="brand-logo">Navbar</a>
                    <ul id="nav-mobile" 
                        class="right hide-on-med-and-down">
                        <li><a href="">menu1</a></li>
                        <li>
                            <a href="">menu2 
                              <span class="new badge">4</span></a>
                        </li>
                        <li><a href="">menu3</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <div>
            <h3>Badges in Collapsible</h3>
            <ul class="collapsible">
                <li>
                    <div class="collapsible-header">
                        <i class="material-icons">add</i>
                        First
                        <span class="new badge green">4</span>
                    </div>
                    <div class="collapsible-body">
                        
  
<p>Lorem ipsum dolor sit amet.</p>
  
</div>
                </li>
                <li>
                    <div class="collapsible-header">
                        <i class="material-icons">arrow_forward</i>
                        Second
                        <span class="badge green-text">1</span>
                    </div>
                    <div class="collapsible-body">
                        
  
<p>Lorem ipsum dolor sit amet.</p>
  
</div>
                </li>
            </ul>
        </div>
  
        <!-- 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: 
 

Insignias en plegable

También podemos añadir insignias en un Plegable. A continuación se muestra la sintaxis para agregar insignias a plegable:

 <h2>Badges in Collapsibles</h2>
    <ul class="collapsible">
        <li>
            <div class="collapsible-header">
                <i class="material-icons">filter_drama</i>
                First
                <span class="new badge">4</span>
            </div>
            <div class="collapsible-body">
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header">
                <i class="material-icons">place</i>
                Second
                <span class="badge">1</span>
            </div>
            <div class="collapsible-body">
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
    </ul>

Código completo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  
    <title>Document</title>
</head>
  
<body>
    <h2>Badges in Collapsibles</h2>
    <ul class="collapsible">
        <li>
            <div class="collapsible-header">
                <i class="material-icons">filter_drama</i>
                First
                <span class="new badge">4</span>
            </div>
            <div class="collapsible-body">
                  
<p>Lorem ipsum dolor sit amet.</p>
  
            </div>
        </li>
        <li>
            <div class="collapsible-header">
                <i class="material-icons">place</i>
                Second
                <span class="badge">1</span>
            </div>
            <div class="collapsible-body">
                  
<p>Lorem ipsum dolor sit amet.</p>
  
            </div>
        </li>
    </ul>
  
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
  
</html>

Producción:

Subtítulos personalizados

Podemos agregar subtítulos personalizados a nuestra insignia en lugar de solo un número o nuevo usando el atributo «data-badge-caption». 

Sintaxis:

 <span class="new badge" data-badge-caption="...">4</span>

Dentro del atributo “data-badge-caption”, podemos agregar nuestros propios subtítulos como mensajes, me gusta, etc.

Ejemplo de código completo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  
    <title>Document</title>
</head>
  
<body>
    <h2>Badges Custom Captions</h2>
    <div class="collection">
        <a href="#!" class="collection-item"><span class=" new badge" data-badge-caption="Messages">1</span>Facebook</a>
        <a href="#!" class="collection-item"><span class="  new badge" data-badge-caption="Messages">4</span>Instagram</a>
  
    </div>
  
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
  
</html>

Producción:

Colores 

Podemos hacer insignias de diferentes colores mencionándolas en la clase junto con la clase “tarjeta”.

Sintaxis:

 <span class="new badge red">...</span>

Ejemplo de código completo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  
    <title>Document</title>
</head>
  
<body>
    <h2>Badges of Different Colors</h2>
    <div class="collection">
        <a href="#!" class="collection-item"><span class=" new badge red" >1</span>Facebook</a>
        <a href="#!" class="collection-item"><span class="  new badge blue" >4</span>Instagram</a>
  
    </div>
  
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
  
</html>

Producción:

Navegadores compatibles

  • Google Chrome
  • Borde de Microsoft
  • navegador valiente
  • Mozilla Firefox
  • Safari
  • Ópera

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 *