Appearance
Cell 单元格
用于展示列表项、设置项或信息摘要,支持图标、标题、描述、箭头、自定义右侧内容和自定义尺寸。
示例
基础用法
链接样式
自定义内容
点击事件
单元格组
自定义尺寸
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| icon | 左侧图片地址 | string | '' |
| title | 标题文本 | string | '' |
| description | 描述信息 | string | '' |
| link | 是否展示右侧箭头 | boolean | false |
| clickable | 是否显示可点击指针样式,并允许触发 click 事件 | boolean | true |
| width | 单元格宽度 | number | string | '100%' |
| height | 单元格高度 | number | string | 'auto' |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击单元格且 clickable 为 true 时触发 | - |
Slots
| 插槽名 | 说明 | 作用域参数 |
|---|---|---|
| icon | 自定义左侧图标区域 | - |
| title | 自定义标题内容 | - |
| description | 自定义描述内容 | - |
| right | 自定义右侧内容 | { isHover: boolean } |
注意事项
- 未提供
icon插槽时,icon属性会作为MtAvatarImage的图片地址渲染。 link为true且未提供right插槽时,右侧会显示默认箭头图标。right插槽会接收当前单元格悬浮状态,可用于实现悬浮时切换操作入口。clickable为false时不会触发组件声明的click事件。- 列表中标题应保持简短,描述用于补充次要信息。
- 可点击项建议配合
link或明确的交互样式。