mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
# uni-list
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名:uni-list
|
||||
|
||||
代码块: uList 、 uListItem 关联组件: uni-list-item 、 uni-badge 、 uni-icons 、 uni-list-chat
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-list />`(或 `<uni-list></uni-list>`,当需要包裹子节点时)。
|
||||
- 遇到平台差异时,建议使用条件编译(`#ifdef / #endif`)显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| border | Boolean | true | 是否显示边框 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击 uniListItem 触发事件,需开启点击反馈 | - |
|
||||
| switchChange | 点击切换 Switch 时触发,需显示 switch | e={value:checked} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-list.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" ></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" ></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-list>
|
||||
<uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
|
||||
<uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-list>
|
||||
<uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
|
||||
<uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-list.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=list)
|
||||
- [Local Example](examples/uni-ui/uni-list.vue)
|
||||
Reference in New Issue
Block a user