2.3.1 • Published 3 months ago
jb-searchbar v2.3.1
jb-searchbar
minimalistic customizable search bar web-component for adding filter options in minimum space sample:https://codepen.io/javadbat/pen/rNjrZpy
usage
npm i jb-searchbar
import 'jb-searchbar';
<jb-searchbar></jb-searchbar>
attributes
placeholder
<jb-searchbar placeholder="please choose column"></jb-searchbar>
set filter list
filter list is a list of your filter you want user choose filter from and set like this:
search on change
you can trigger search by clicking on search button, if you want to trigger it on every change set searchOnChange
like this:
document.querySelector('jb-searchbar').searchOnChange = true;
document.querySelector('jb-searchbar').columnList = [
{
key: 'title',
label: 'تیتر',
type: 'TEXT'
},
{
key: 'name',
label: 'نام',
type: 'TEXT',
maxUsageCount: 3
},
{
key: 'age',
label: 'سن',
type: 'TEXT'
},
{
key: 'fromDate',
label: 'از تاریخ',
type: 'DATE'
},
{
key: 'GENDER',
label: 'جنسیت',
type: 'SELECT',
config: {
optionList: [
{
title: 'آقا',
value: 'MALE'
},
{
title: 'خانم',
value: 'FEMALE'
}
],
getOptionTitle: (option) => {
return option.title;
},
getOptionValue: (option) => {
return option.value;
}
}
},
{
key: 'fromDate',
label: 'تا تاریخ',
type: 'DATE'
}
]
css variables
Name | Description | Default Value |
---|---|---|
--jb-searchbar-filter-item-bg-color | background color of completed filter item | #408cff |
--jb-searchbar-filter-item-color | text color of ompleted filter item | #fff |
2.3.0
3 months ago
2.2.0
3 months ago
2.3.1
3 months ago
2.1.0
3 months ago
2.0.2
6 months ago
2.0.1
6 months ago
2.0.0
6 months ago
1.1.0
2 years ago
1.0.10
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago