CellItem 单元格
列表用于展现并列层级的信息内容,列表可承载功能入口、功能操作、信息展示等功能。
引入
import { CellItem } from 'mand-mobile-next'
Vue.createApp().component(CellItem.name, CellItem)
代码演示
基本
普通条目
动作条目
禁用条目
插槽
余额
可用8000.34
余额
可用8000.34
使用余额
使用余额
余额
可用8000.34
多行列表
交通银行(尾号3089)
展示摘要描述
招商银行(尾号2342)
展示摘要描述
交通银行(尾号3089)
展示摘要描述
附加文案
交通银行
展示摘要描述
附加文案
招商银行
展示摘要描述
禁用的项目
Mand Mobile
A mobile UI toolkit
面向金融场景的Vue移动端UI组件库,丰富、灵活、实用,快速搭建优质的金融类产品,让复杂的金融场景变简单。基于「合理、好用」设计价值观,从交互操作、视觉抽象、图形可视等角度共同解决问题。
基础
CellItem
列表单元
基本
普通条目
动作条目
禁用条目
插槽
余额
可用8000.34
余额
可用8000.34
使用余额
使用余额
余额
可用8000.34
多行列表
交通银行(尾号3089)
展示摘要描述
招商银行(尾号2342)
展示摘要描述
交通银行(尾号3089)
展示摘要描述
附加文案
交通银行
展示摘要描述
附加文案
招商银行
展示摘要描述
禁用的项目
Mand Mobile
A mobile UI toolkit
面向金融场景的Vue移动端UI组件库,丰富、灵活、实用,快速搭建优质的金融类产品,让复杂的金融场景变简单。基于「合理、好用」设计价值观,从交互操作、视觉抽象、图形可视等角度共同解决问题。
API
CellItem Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
title | 标题 | String/Number | ||
brief | 描述文案 | String/Number | ||
addon | 附加文案 | String | ||
disabled | 是否禁用项目 | Boolean | false | |
arrow | 动作箭头标识 | Boolean | false | |
no-border | 去除边框 | Boolean | false |
CellItem Events
@click(event)
非禁用状态下的点击事件
CellItem Slots
default
内容默认插槽
left
起始区域插槽
right
末尾附加内容插槽
children
额外内容插槽