Spectre Chips ofrece creación de etiquetas. Los chips son entidades complejas en los bloques diminutos, los chips se pueden usar para mostrar etiquetas. Para crear un chip, debe agregar un elemento contenedor con la clase de chip . Agregue elementos de texto secundarios, botones o avatares con la clase de avatar .
Clase de chip de espectro:
- chip: Esta clase se utiliza para crear los chips.
Sintaxis:
<span class="chip">...</span>
Ejemplo: El siguiente ejemplo ilustra los Spectre Chips.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
#chip {
margin: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE chip class</strong>
</center>
<div id="chip">
<span class="chip">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"
class="avatar avatar-sm">
GeeksforGeeks
</span>
<span class="chip">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220124000939/Screenshot20220124000911-300x238.png"
class="avatar avatar-sm">
Web Development
<a href="#" class="btn btn-clear"
aria-label="Close"></a>
</span>
<div class="chip">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220124000940/Screenshot20220124000926-300x269.png"
class="avatar avatar-sm">
CSS-Frameworks
<a href="#" class="btn btn-clear"
aria-label="Close"></a>
</div>
<div class="chip">
Spectre
<a href="#" class="btn btn-clear"
aria-label="Close"></a>
</div>
</div>
</body>
</html>
Producción:
Fichas de espectro
Referencia: https://picturepan2.github.io/spectre/components/chips.html#chips
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA