mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
53 lines
1.7 KiB
Markdown
53 lines
1.7 KiB
Markdown
# 折叠面板 Collapse
|
||
|
||
我看到它总被用在界面边栏的控制面板上。
|
||
|
||
## 演示
|
||
|
||
```demo
|
||
basic
|
||
arrow-placement
|
||
accordion
|
||
nested
|
||
display-directive
|
||
item-header-click
|
||
```
|
||
|
||
## Props
|
||
|
||
### Collapse Props
|
||
|
||
| 名称 | 类型 | 默认值 | 说明 |
|
||
| --- | --- | --- | --- |
|
||
| accordion | `boolean` | `false` | |
|
||
| arrow-placement | `'left' \| 'right'` | `'left'` | |
|
||
| display-directive | `'if' \| 'show'` | `'if'` | 内部 `n-collapse-item` 在控制内容是否渲染时使用的指令，`'if'` 对应 `v-if`，`'show'` 对应 `v-show` |
|
||
| expanded-names | `Array<string \| number>` | `undefined` | |
|
||
| theme | `'light' \| 'dark' \| string` | `undefined` | |
|
||
| on-update-expanded-names | `(expandedNames: Array<string>) => any` | `undefined` | |
|
||
| on-item-header-click | `(data: { name: string, expanded: boolean, event: MouseEvent }) => any` | `undefined` | |
|
||
|
||
### Collapse Item Props
|
||
|
||
| 名称 | 类型 | 默认值 | 说明 |
|
||
| --- | --- | --- | --- |
|
||
| display-directive | `'if' \| 'show'` | `undefined` | 自身在控制内容是否渲染时使用的指令，`'if'` 对应 `v-if`，`'show'` 对应 `v-show`。在设定为 `undefined` 的时候跟随外层的 `n-collapse` |
|
||
| name | `string \| number` | required | |
|
||
| title | `string` | `undefined` | |
|
||
|
||
## Slots
|
||
|
||
### Collapse Slots
|
||
|
||
| 名称 | 参数 | 说明 |
|
||
| ------- | ---- | ---- |
|
||
| default | `()` | |
|
||
|
||
### Collapse Item Slots
|
||
|
||
| 名称 | 参数 | 说明 |
|
||
| ------- | ----------------------------------- | ---- |
|
||
| default | `()` | |
|
||
| header | `()` | |
|
||
| arrow | `(options: { collapsed: boolean })` | |
|