Spectre Filters
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 = "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" >w3wiki</ 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:
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 = "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" >w3wiki</ 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:
Reference Link: https://picturepan2.github.io/spectre/experimentals/filters.html
Contact Us