# CascaderView

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/cascader-view
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

CascaderView is the content area of [Cascader](/components/cascader).

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

CascaderView is the content area of [Cascader](/components/cascader).

## Demos

## CascaderView

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| activeIcon | The icon displayed when selected | `ReactNode` | - |
| defaultValue | Default selected options | `CascaderValue[]` | `[]` |
| fieldNames | Custom field name for label and value and disabled and children | `{ label: string, value: string, disabled: string, children: string }` | `{ label: 'label', value: 'value',disabled:'disabled', children: 'children' }` |
| onChange | Triggered when the selected options are changed | `(value: CascaderValue[], extend: CascaderValueExtend) => void` | - |
| onTabsChange | Callback when switching panel | `(index: number) => void` | - |
| options | Data of the cascade options | `CascaderOption[]` | - |
| placeholder | Hint text | `string` \| `(index: number) => string` | `'请选择'` |
| value | Selected options | `CascaderValue[]` | - |
| loading | Open the skeleton screen | `boolean` | `false` |
| optionRender | Custom render function for options | `(option: CascaderOption, info: { depth: number, active: boolean }) => ReactNode` | - |

For the type definition of `CascaderValue` `CascaderOption` `CascaderValueExtend`, please refer to the document of [Cascader](/components/cascader#api).

### Loading <Experimental></Experimental>

You can pass `CascaderView.optionSkeleton` as `CascaderOption[]` to the `options` property of CascaderView or the `children` of `CascaderOption`. CascaderView will recognize it and display the skeleton screen effect.

### CSS Variables

| Name     | Description                | Default |
| -------- | -------------------------- | ------- |
| --height | height of the CascaderView | `auto`  |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt