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是否禁用项目Booleanfalse
arrow动作箭头标识Booleanfalse
no-border去除边框Booleanfalse

CellItem Events

@click(event)

非禁用状态下的点击事件

CellItem Slots

default

内容默认插槽

left

起始区域插槽

末尾附加内容插槽

children

额外内容插槽