Las insignias son uno de los componentes muy útiles de Materialise CSS. Es como un ícono y nos ayuda a mostrar cosas como mensajes no leídos, notificaciones, correos electrónicos y todo lo demás. En este artículo, discutiremos cómo usar la insignia en Materialise CSS. Una insignia se puede definir agregando la clase de insignia dentro de un elemento de intervalo. Podemos agregar un fondo a la insignia usando la nueva clase.
Sintaxis:
<span class="badge">Badge Text</span> <span class="badge new">New Badge Text</span>
Los siguientes ejemplos muestran las múltiples formas en que se puede agregar una insignia en Materialise CSS.
Ejemplo 1: uso de una insignia en las colecciones.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" > </head> <body class="container"> <h1>Using Badges with Collection</h1> <div class="collection"> <a href="#!" class="collection-item"> <span class="badge">1</span>Item One </a> <a href="#!" class="collection-item"> <span class="new badge">4</span>Item Two </a> <a href="#!" class="collection-item"> Item Three </a> <a href="#!" class="collection-item"> <span class="new badge">14</span>Item Four </a> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> </body> </html>
Producción:
Ejemplo 2: uso de una insignia en un plegable.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
rel="stylesheet">
</head>
<body class="container">
<h1>Using Badges with collapsible</h1>
<ul class="collapsible">
<li>
<div class="collapsible-header">
First Header
<span class="new badge">4</span>
</div>
<div class="collapsible-body">
<p>Body of First Item</p>
</div>
</li>
<li>
<div class="collapsible-header">
Second Header
<span class="badge">1</span>
</div>
<div class="collapsible-body">
<p>Body of Second Item</p>
</div>
</li>
</ul>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, {
accordion: false
});
});
</script>
</body>
</html>
Producción:
Ejemplo 3: uso de una insignia en los menús desplegables
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
>
</head>
<body class="container">
<h1>Using Badges with Dropdown</h1>
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn'
href='#'
data-target='dropdown2'>
Dropdown
<i class="material-icons right">
arrow_drop_down
</i>
</a>
<!-- Dropdown Structure -->
<ul id='dropdown2' class='dropdown-content'>
<li>
<a href="#!">one
<span class="badge">1</span>
</a>
</li>
<li>
<a href="#!">two
<span class="new badge">1</span>
</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
</script>
<script>
document.addEventListener(
'DOMContentLoaded', function () {
var elems =
document.querySelectorAll('.dropdown-trigger');
var instances =
M.Dropdown.init(elems, { coverTrigger: false });
});
</script>
</body>
</html>
Producción:
Ejemplo 4: uso de una insignia en la barra de navegación
HTML
<!DOCTYPE html> <html> <head> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"> </head> <body> <h1>Using Badges with navbar</h1> <nav> <div class="nav-wrapper"> <a href="" class="brand-logo">Logo</a> <ul id="nav-mobile" class="right"> <li><a href="">Item One</a></li> <li> <a href="">Item Two <span class="new badge">4</span> </a> </li> <li><a href="">Item Three</a></li> </ul> </div> </nav> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> </body> </html>
Producción:
Ejemplo 5: Cambiar el color de fondo de las insignias
HTML
<!DOCTYPE html> <html> <head> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" > </head> <body class="container"> <h1>Using Badges with Collection</h1> <div class="collection"> <a href="#!" class="collection-item"> <span class="badge ">1</span>Item One </a> <a href="#!" class="collection-item"> <span class="new badge red ">4</span>Item Two </a> <a href="#!" class="collection-item"> Item Three </a> <a href="#!" class="collection-item"> <span class=" new badge blue ">14</span>Item Four </a> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA