MultiSelect Module Name: MultiSelectModule
Module Name: MultiSelectModule
MultiSelect is a component where exists a list of itens to search and select like tags.
Showcase
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
color | string | basic | Changes the default color of multiselect tags. | basic | primary | success | information | warning | danger | light | dark |
data | Array<Object> | null | Array of data to shown on list. | any text |
defaultColorTag | string | #66CC99 | The background color default for all tags. | Hexadecimal |
defaultIconTag | string | null | The icon default for all tags. | FontAwesome Class | IonIcons class |
detail | string | null | Key that will shown on detail section of list item. | Object Key |
detailOnTag | boolean | false | Controls if the tag will be shown with the detail. | true | false |
icon | string | null | Key that will shown on icon section of list item. | FontAwesome Class | IonIcons class |
itemAmount | number | 5 | Number of itens that going to be shown on list. | any number |
itemHeight | string | 7px | Height of item list. | px | % | em |
keyColor | string | null | Key that going to be used to change the color tag. | any text |
keyValue | string | null | Key that going to be used as value of component. | any text |
label | string | null | Key that will shown on label list. | any text |
labelSize | string | 120px | Width of label text | px | % | em |
labelTag | string | query | Defines what text will be shown on text tag. | Object Key |
minLengthSearch | number | 2 | Number of itens that going to be shown on list. | any number |
onlyKeyValue | boolean | false | Controls if the component will work only with key value | true | false |
openFocus | boolean | null | Controls if the list will be show on input focus. | any text |
placeholder | string | null | Placeholder of the input. | any text |
query | string | null | Key that going to be used to search. | any text |
sortAlphabetically | boolean | false | Controls if the list will be show sorted alphabetically. | true | false |
Events
Name | Parameters | Description |
---|---|---|
getSelecteds | selected : Button Selected | Dispacthed when a tag is selected or removed. |
tagClick | object : Tag Clicked | Dispacthed when a tag is clicked. |
tagRemove | object : Tag Removed | Dispacthed when a tag is removed. |