Mint UI 單元格-Cell

2021-09-06 15:20 更新
單元格,可用作展示列表信息、鏈接或者表單等。

引入

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="http://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>

自定義內(nèi)容

<mt-cell title="標題文字" is-link>
  <span style="color: green">這里是元素</span>
</mt-cell>

帶備注信息

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

API

參數(shù) 說明 類型 可選值 默認值
icon 圖標 String back, more
title 標題 String
to 跳轉(zhuǎn)鏈接 String
value 內(nèi)容 *
label 備注信息,顯示在標題下方 String
is-link 鏈接,會顯示箭頭圖標。搭配 to 屬性使用 Boolean

Slot

name 描述
- 自定義顯示內(nèi)容
title 自定義標題
icon 自定義圖標


實例演示

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號