<dy-cascader-picker>
A cascading selector that allows users to select from a tree-like set of options. It supports both single and multiple selection modes, and can be configured to display the full path of selected items.
<dy-cascader-picker> Example
Loading...
<dy-cascader-picker
.placeholder=${"Please choose"}
.multiple=${true}
.value=${[["Option 2"]]}
.options=${ [ { "label": "Option 1", "children": [{"label":"Option 1.1"}] }, {"label":"Option 2"}, {"label":"Option 3"} ] }
@change=${(evt) => evt.target.value = evt.detail}></dy-cascader-picker>
<dy-cascader-picker> API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
placeholder(placeholder) |
Yes | string |
fit(fit) |
Yes | boolean |
disabled(disabled) |
Yes | boolean |
multiple(multiple) |
Yes | boolean |
options |
Yes | Option[] |
value |
Yes | OptionValue[][] | OptionValue[] |
change |
Emitter<OptionValue[][] | OptionValue[]> |
|
expand |
Emitter<Option> |
Instance Methods
| Method | Type |
|---|---|
showPicker |
() => void |
Other
| Type | Value |
|---|---|
| Event | change, expand |
| CSS State | active |
<dy-cascader> Example
Loading...
<dy-cascader
style=${"width: 100%"}
.placeholder=${"Please choose"}
.value=${["Option 2"]}
.options=${ [ { "label": "Option 1", "children": [{"label":"Option 1.1"}] }, {"label":"Option 2"}, {"label":"Option 3"} ] }></dy-cascader>
<dy-cascader> API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
options |
Yes | Option[] |
fit(fit) |
Yes | boolean |
multiple(multiple) |
Yes | boolean |
change |
Emitter<OptionValue[][] | OptionValue[]> |
|
expand |
Emitter<Option> |
|
value |
Yes | OptionValue[][] | OptionValue[] |
Other
| Type | Value |
|---|---|
| Event | change, expand |
| Part | column |