Los filtros de espectro son útiles si queremos crear cualquier base de datos y buscar datos en particular. En spectre, tenemos una clase de filtro para crear un efecto visual. Podemos crear dos tipos de filtración, una es de tipo radio y otra es de tipo checkbox.
Clases de filtros de espectro:
- filtro: esta clase se utiliza para crear una plantilla para la filtración.
- etiqueta de filtro: esta clase se utiliza para crear el efecto de etiqueta en los elementos de filtro.
- filter-nav: esta clase se usa para hacer que la filtración responda.
Sintaxis:
<div class="filter">
<input type="radio" id="tag-0"
class="filter-tag" name="filter-radio">
<div class="filter-nav">...</div>
</div>
Ejemplo 1: En este ejemplo, usaremos un filtro que puede seleccionar solo una opción, lo que significa que solo se filtrará una categoría.
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"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Spectre Filters</strong> <br><br> <div class="filter"> <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked> <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden> <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden> <div class="filter-nav"> <label class="chip" for="tag-0"> Front-End </label> <label class="chip" for="tag-1"> Back-End </label> <label class="chip" for="tag-2"> Full Stack </label> </div> </div> </center> </body> </html>
Producción:
Filtros de espectro
Ejemplo 2: En este ejemplo, usaremos un filtro que puede seleccionar solo varias opciones, lo que significa que se filtrarán varias categorías.
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"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Spectre Filters</strong> <br><br> <div class="filter"> <input type="checkbox" id="tag-0" class="filter-tag" name="filter-checkbox" hidden checked> <input type="checkbox" id="tag-1" class="filter-tag" name="filter-checkbox" hidden> <input type="checkbox" id="tag-2" class="filter-tag" name="filter-checkbox" hidden> <div class="filter-nav"> <label class="chip" for="tag-0"> Front-End </label> <label class="chip" for="tag-1"> Back-End </label> <label class="chip" for="tag-2"> Full Stack </label> </div> </div> </center> </body> </html>
Producción:
Filtros de espectro
Enlace de referencia: https://picturepan2.github.io/spectre/experimentals/filters.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA