紙片

2018-05-26 01:57 更新

紙片可以包含一張圖片、一個(gè)短字符串等簡(jiǎn)潔的信息。

調(diào)用方式

紙片組件使用純 CSS 編寫(xiě)，只需編寫(xiě) HTML 代碼即可生效。


相關(guān)資料

Material Design 紙片設(shè)計(jì)規(guī)范


樣式

純文本

www.mdui.org - 紙片 - 純文本

在線運(yùn)行


含頭像

www.mdui.org - 紙片 - 含頭像

在線運(yùn)行


含文字圖標(biāo)

www.mdui.org - 紙片 - 含文字圖標(biāo)

在線運(yùn)行


含圖標(biāo)

www.mdui.org - 紙片 - 含圖標(biāo)

在線運(yùn)行


含關(guān)閉按鈕

www.mdui.org - 紙片 - 含關(guān)閉按鈕

在線運(yùn)行


圖標(biāo)顏色

www.mdui.org - 紙片 - 圖標(biāo)顏色

在線運(yùn)行


CSS 類名列表

 類名 效果
 .mdui-chip 定義一個(gè)紙片組件。
 .mdui-chip-title 定義紙片的文本。
 .mdui-chip-icon 定義紙片的頭像或圖標(biāo)。
 .mdui-chip-delete 定義紙片的刪除按鈕。


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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)