Dropdown
Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements
setup
Import the Dropdown component in a script tag.
Svelte Copy
import { Dropdown } from "@mgisolutions/design-system/svelte";
let DDLItems = [
{ value: 1, name: "name1" },
{ value: 2, name: "name2" },
{ value: 3, name: "name3" },
{ value: 4, name: "name4" },
{ value: 5, name: "name5" },
{ value: 6, name: "name6" },
{ value: 7, name: "name7" },
{ value: 8, name: "name8" },
{ value: 9, name: "name9" },
];
let DDLValues: any[] = [{ value: 1, name: "name1" }];
basic usage
The most basic dropdown menu.
Demonstrate
name1
Svelte Copy
<Dropdown items={DDLItems} bind:values={DDLValues} itemTitle="name" itemValue="value"/>
multiSelect
Demonstrate
Options...
Svelte Copy
<Dropdown items={DDLItems} bind:values={DDLValuesMultiSelect} itemTitle="name" itemValue="value" multiSelect />
type
Demonstrate
Options... Is name1
Svelte Copy
<Dropdown
items={DDLItems}
bind:values={DDLValues}
itemTitle="name"
itemValue="value"
basicType={false}
type={undefined}
/>
prefer
Demonstrate
name1
Svelte Copy
<Dropdown
items={DDLItems}
bind:values={DDLValues}
itemTitle="name"
itemValue="value"
prefer={preferList}
/>
searchable
Demonstrate
name1
Svelte Copy
<Dropdown items={DDLItems} bind:values={DDLValues} itemTitle="name" itemValue="value" searchable/>
custom
Custom dropdown for mobile view or many type
Demonstrate
name1
searchable
isShowHeader
isMobileFullScreen
Svelte Copy
<Dropdown
items={DDLItems}
bind:values={DDLValues}
itemTitle="name"
itemValue="value"
searchable={true}
showHeader={false}
prefer={[4,2]}
titleOfOptions="Selected Value"
mobileFullScreen={false}
mobileScreenBreakPoint="768"
/>
Component Data
- props
- events
- slots
| Name | Description | Type | Default |
|---|---|---|---|
| size | Set size for dropdown | enum: "default" | "large" | "small"" | default |
| type | Set type for dropdown | enum: "date" | "number" | "text" | "default"" | default |
| label | Set label name for select | string | "" |
| multiSelect | If you check, you will be able to select many values in the dropdown | boolean | false |
| showHeader | Show header of dropdown option | boolean | false |
| mobileFullScreen | If true, dropdown has width and height fulll when screen < 768 | boolean | false |
| basicType | If true, set dropdown type is basic | boolean | true |
| disable | Disable dropdown | boolean | false |
| noneRightRadius | Set to border radius top-right and bottom-right is none | boolean | false |
| searchable | Show input search | boolean | false |
| active | State of dropdown | boolean | false |
| error | Pass props when dropdown required but it not has value select | boolean | false |
| errorText | Description when an error occurred | string | The field is required. |
| titleOfOptions | title of dropdown option | string | empty |
| mobileScreenBreakPoint | break point of screen to show full width and height of phone dropdown option | number | 768 |
| values | Two way binding array values selected between two components | Array | [] |
| items | Array data pass to dropdown | Array object | [] |
| itemTitle | Set title of items object | string | title |
| itemValue | Set value of items object | string | value |
| classOptions | class for options | string | |
| autocomplete | name for autocomplete | string |