mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-07 13:48:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(collapse):add default expanded demo (#881)

Browse Source
This commit is contained in:
Wankko Ree 2021-08-17 00:33:57 +08:00 committed by GitHub
parent 563f146c9b
commit e9f5971526
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/collapse/demos/enUS/default-expanded.demo.md Normal file
View File

@ -0,0 +1,24 @@
# Default Expanded
You can set which panels are expanded by default. For example, we can set `red light` and `amber light` to be expanded by default, and set `flashing` to be expanded when `green light` is expanded. It should be noted that even if only one panel you want to set to be expanded, `default-expanded-names` should also be passed in an array, unless `accordion` is set to `true`.
```html
<n-collapse :default-expanded-names="['2', '3']">
<n-collapse-item title="green light" name="1">
<n-collapse :default-expanded-names="['2']">
<n-collapse-item title="on" name="1">
<div>pass</div>
</n-collapse-item>
<n-collapse-item title="flashing" name="2">
<div>pass fastly</div>
</n-collapse-item>
</n-collapse>
</n-collapse-item>
<n-collapse-item title="red light" name="2">
<div>stop</div>
</n-collapse-item>
<n-collapse-item title="amber light" name="3">
<div>warn</div>
</n-collapse-item>
</n-collapse>
```

1
src/collapse/demos/enUS/index.demo-entry.md
View File

@ -12,6 +12,7 @@ nested
display-directive
item-header-click
customize-icon
default-expanded
```
## Props

24
src/collapse/demos/zhCN/default-expanded.demo.md Normal file
View File

@ -0,0 +1,24 @@
# 默认展开
可以设置哪些面板默认展开。如我们可以设置`红灯`和`黄灯`默认展开，当`绿灯`展开时`闪烁`展开。应当注意的是，即使只打算展开一个面板，`default-expanded-names`也应当传入数组，除非使用了`accordion`。
```html
<n-collapse :default-expanded-names="['2', '3']">
<n-collapse-item title="绿灯" name="1">
<n-collapse :default-expanded-names="['2']">
<n-collapse-item title="常亮" name="1">
<div>通过</div>
</n-collapse-item>
<n-collapse-item title="闪烁" name="2">
<div>快速通过</div>
</n-collapse-item>
</n-collapse>
</n-collapse-item>
<n-collapse-item title="红灯" name="2">
<div>停</div>
</n-collapse-item>
<n-collapse-item title="黄灯" name="3">
<div>注意</div>
</n-collapse-item>
</n-collapse>
```

1
src/collapse/demos/zhCN/index.demo-entry.md
View File

@ -12,6 +12,7 @@ nested
display-directive
item-header-click
customize-icon
default-expanded
```
## Props