Spectre Filters
Last Updated :
26 Jul, 2022
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
Share your thoughts in the comments
Please Login to comment...