返回介绍

cell

发布于 2021-06-25 16:28:59 字数 3347 浏览 939 评论 0 收藏 0

单元格,可用作展示列表信息、链接或者表单等。


引入

import { Cell } from 'mint-ui';

Vue.component(Cell.name, Cell);

例子

基础用法

<mt-cell title="标题文字"></mt-cell>
<mt-cell title="标题文字" value="说明文字"></mt-cell>

可点击的链接

<mt-cell
  title="标题文字"
  to="//github.com"
  is-link
  value="带链接">
</mt-cell>

带图标

<mt-cell title="标题文字" icon="more" value="带 icon"></mt-cell>

带自定义图标

<mt-cell title="标题文字">
  <span>icon 是图片</span>
  <img slot="icon" src="../assets/100x100.png" width="24" height="24">
</mt-cell>

自定义内容

<mt-cell title="标题文字" is-link>
  <span style="color: green">这里是元素</span>
</mt-cell>

带备注信息

<mt-cell title="标题" label="描述信息" is-link></mt-cell>

API

参数说明类型可选值默认值
icon图标Stringback, more
title标题String
to跳转链接String
value内容*
label备注信息,显示在标题下方String
is-link链接,会显示箭头图标。搭配 to 属性使用Boolean

Slot

name描述
-自定义显示内容
title自定义标题
icon自定义图标

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文