卡片

2018-05-26 01:39 更新

卡片是包含一組特定數(shù)據(jù)集的紙片。可以包含各種相關(guān)信息，例如：照片、文本、鏈接等。

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

樣式

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

www.mdui.org - 卡片 - 完整 HTML 結(jié)構(gòu)

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

www.mdui.org - 卡片 - 覆蓋在媒體元素上

www.mdui.org - 卡片 - 覆蓋在媒體元素上

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

www.mdui.org - 卡片 - 覆蓋層位于媒體元素頂部

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

www.mdui.org - 卡片 - 覆蓋層擁有透明背景

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

www.mdui.org - 卡片 - 覆蓋層擁有漸變背景

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

www.mdui.org - 卡片 - 按鈕豎直排列

類名	效果
.mdui-card	定義卡片組件。
.mdui-card-header	定義卡片的頭部。
.mdui-card-header-avatar	定義卡片頭部的頭像。
.mdui-card-header-title	定義卡片頭部的標題。
.mdui-card-header-subtitle	定義卡片頭部的副標題。
.mdui-card-media	定義卡片中的媒體元素。
.mdui-card-media-covered	定義覆蓋在媒體元素上的內(nèi)容。
.mdui-card-media-covered-top	使覆蓋層位于媒體元素頂部。
.mdui-card-media-covered-transparent	使覆蓋層有透明背景。
.mdui-card-media-covered-gradient	使覆蓋層有漸變背景。
.mdui-card-menu	定義卡片中右上角的菜單。
.mdui-card-primary	定義卡片的標題和副標題區(qū)域。
.mdui-card-primary-title	定義卡片的標題。
.mdui-card-primary-subtitle	定義卡片的副標題。
.mdui-card-content	定義卡片內(nèi)容。
.mdui-card-actions	定義卡片的操作欄。
.mdui-card-actions-stacked	使操作欄豎直排列。