Filters
Filters component
setup
Import the Filters component in a script tag.
Svelte Copy
import { Filters } from "@mgisolutions/design-system/svelte";
Basic usage
Basic usage Badge
Demonstrate
Filters title
Svelte Copy
const items: any[] = [
{ val: "a", text: "text1", variant: "12" },
{ val: "b", text: "text2", variant: 0 },
{ val: 3, text: "text3", variant: "0" },
{ val: 4, text: "text4", variant: "546" },
{ val: 5, text: "text5", variant: "0" },
{ val: 6, text: "text6", variant: "2" },
{ val: 7, text: "text7", variant: "62" },
{ val: 8, text: "text8", variant: "52" },
{ val: 9, text: "text9", variant: "12" },
{ val: 10, text: "text10", variant: "2" },
{ val: 11, text: "text11", variant: "42" },
{ val: 12, text: "text12", variant: "121" },
{ val: 13, text: "text13", variant: "122" },
{ val: 14, text: "text14", variant: "123" },
];
<Filters
{items}
title="Filters title"
listChecked={[]}
itemTitle="text"
itemValue="val"
itemVariant="variant"
/>
custom
Demonstrate
Filters title
Svelte Copy
const items: any[] = [
{ val: "a", text: "text1", variant: "12" },
{ val: "b", text: "text2", variant: 0 },
{ val: 3, text: "text3", variant: "0" },
{ val: 4, text: "text4", variant: "546" },
{ val: 5, text: "text5", variant: "0" },
{ val: 6, text: "text6", variant: "2" },
{ val: 7, text: "text7", variant: "62" },
{ val: 8, text: "text8", variant: "52" },
{ val: 9, text: "text9", variant: "12" },
{ val: 10, text: "text10", variant: "2" },
{ val: 11, text: "text11", variant: "42" },
{ val: 12, text: "text12", variant: "121" },
{ val: 13, text: "text13", variant: "122" },
{ val: 14, text: "text14", variant: "123" },
];
<Filters
{items}
title="Filters title"
listChecked={[]}
itemTitle="text"
itemValue="val"
itemVariant="variant"
/>
Component Data
- props
- slots
- events
| Name | Description | Type | Default |
|---|---|---|---|
| title | Set title form filter form | string | Filters |
| items | Pass value and label name to checkbox list | { value: string | number; name: string }[] | [] |
| listChecked | Pass array value checked to checkbox list | string[] | number[] | [] |
| countItem | Maximum number of checkboxes to display | number | 10 |
| isClearAll | Pass props when want clear all data listChecked (not click button clear) | boolean | false |
| smallCheckbox | Set size checkbox(16x16) | boolean | false |
| itemTitle | Set value of key in Array object items | string | title |
| itemValue | Set value of value in Array object items | string | value |
| checkboxClassName | Customer style of checkbox | string | empty |
| labelClassName | Customer style of label | string | empty |
| lineCheckbox | Set type checkbox(default check) | boolean | false |