卡片

卡片是包含一組特定數(shù)據(jù)集的紙片?？梢园鞣N相關(guān)信息，例如：照片、文本、鏈接等。

調(diào)用方式

卡片組件使用純 CSS 編寫，只需編寫 HTML 代碼即可生效。

相關(guān)資料

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

樣式

完整 HTML 結(jié)構(gòu)

下面是一個(gè)卡片的完整 HTML 結(jié)構(gòu)，包含了所有卡片中預(yù)定義樣式的元素。

在線運(yùn)行

覆蓋在媒體元素上

在 <div class="mdui-card-media"></div> 中添加 <div class="mdui-card-media-covered"></div>，并把需要覆蓋在媒體元素上的內(nèi)容放到該元素中。

在線運(yùn)行

在線運(yùn)行

在 .mdui-card-media-covered 上添加類 .mdui-card-media-covered-top 使覆蓋層位于媒體元素頂部。

在線運(yùn)行

在 .mdui-card-media-covered 上添加類 .mdui-card-media-covered-transparent 使覆蓋層擁有透明背景。

在線運(yùn)行

在 .mdui-card-media-covered 上添加類 .mdui-card-media-covered-gradient 使覆蓋層擁有漸變背景。

在線運(yùn)行

按鈕豎直排列

在 <div class="mdui-card-actions"></div> 上添加類 .mdui-card-actions-stacked，就能將按鈕設(shè)置為豎直排列。

在線運(yùn)行

CSS 類名列表