Spectre filters are useful if we want to create any database and search for particular data. In spectre, we have filter class to create a visual effect. We can create two types of filtration, one is a radio type, and another one is a checkbox type.
Spectre Filters Classes:
- filter: This class is used to create a template for filtration.
- filter-tag: This class is used to create the tag effect on filter elements.
- filter-nav: This class is used to make the filtration responsive.
Syntax:
<div class="filter">
<input type="radio" id="tag-0"
class="filter-tag" name="filter-radio">
<div class="filter-nav">...</div>
</div> Example 1: In this example, we will a filter that can select only one option, which means only one category will be filtered.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</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>
|
Output:
Spectre Filters
Example 2: In this example, we will a filter that can select only multiple options, which means multiple categories will be filtered.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</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>
|
Output:
Spectre Filters
Reference Link: https://picturepan2.github.io/spectre/experimentals/filters.html