Cascader

Basic Usage

The simplest usage of Cascader.

Value: None

<prism-cascader [(value)]="basicValue" [options]="options" />

Default Value

Setting a pre-selected value.

<prism-cascader [(value)]="defaultValue" [options]="options" />

Hover Trigger

Expand sub-menus when mouse hovers over an option.

<prism-cascader 
  [(value)]="hoverValue" 
  [options]="options" 
  expandTrigger="hover" />

Disabled

Disabled state of the component. 'Jiangsu' node is also disabled in data.

<prism-cascader [options]="options" [disabled]="true" />

PrismCascader APINameTypeDefaultDescription
optionsinput<CascaderOption[]>[]The data options.
valuemodel<string[]>[]Selected value array.
placeholderinput<string>'Please select'Trigger placeholder.
disabledinput<boolean>falseWhether the component is disabled.
expandTrigger'click' | 'hover''click'How sub-menus expand.
changeOnSelectinput<boolean>falseWhether to select parent nodes.
selectionChangeoutput<CascaderOption[]>-Emitted when selection changes.

Name	Type	Default	Description
`options`	`input<CascaderOption[]>`	`[]`	The data options.
`value`	`model<string[]>`	`[]`	Selected value array.
`placeholder`	`input<string>`	`'Please select'`	Trigger placeholder.
`disabled`	`input<boolean>`	`false`	Whether the component is disabled.
`expandTrigger`	`'click' \| 'hover'`	`'click'`	How sub-menus expand.
`changeOnSelect`	`input<boolean>`	`false`	Whether to select parent nodes.
`selectionChange`	`output<CascaderOption[]>`	`-`	Emitted when selection changes.