menuMDUI文件
color_lens
基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

卡片

卡片是包含一組特定資料集的容器。可以包含各種相關資訊，例如：照片、文字、連結等。

呼叫方式

卡片元件使用純 CSS 編寫，只需編寫 HTML 程式碼即可生效。

相關閱讀

Material Design 設計規範：元件 - 卡片

樣式

完整 HTML 結構

下面是一個卡片的完整 HTML 結構，包含了所有卡片中預定義樣式的元素。

codeplay_arrow
範例
<div class="mdui-card">

  <!-- 卡片標頭，包含頭像、標題、副標題 -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="avatar.jpg"/>
    <div class="mdui-card-header-title">Title</div>
    <div class="mdui-card-header-subtitle">Subtitle</div>
  </div>

  <!-- 卡片的媒體內容，可以包含圖片、影片等媒體內容，以及標題、副標題 -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- 卡片中可以包含一個或多個選單按鈕 -->
    <div class="mdui-card-menu">
      <button class="mdui-btn mdui-btn-icon mdui-text-color-white">
        <i class="mdui-icon material-icons">share</i>
      </button>
    </div>
  </div>

  <!-- 卡片的標題和副標題 -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- 卡片的內容 -->
  <div class="mdui-card-content">Listen to your favorite artists and albums anytime, anywhere, online or offline.</div>

  <!-- 卡片的按鈕 -->
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
    <button class="mdui-btn mdui-btn-icon mdui-float-right">
      <i class="mdui-icon material-icons">expand_more</i>
    </button>
  </div>

</div>

覆蓋在媒體元素上

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

codeplay_arrow
範例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>
codeplay_arrow
範例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
      <div class="mdui-card-actions">
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 1</button>
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 2</button>
      </div>
    </div>
  </div>
</div>

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

codeplay_arrow
範例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-top">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

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

codeplay_arrow
範例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

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

codeplay_arrow
範例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-gradient">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

按鈕垂直排列

在 <div class="mdui-card-actions"></div> 上添加類別 .mdui-card-actions-stacked，就能將按鈕設定為垂直排列。

codeplay_arrow
範例
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions mdui-card-actions-stacked">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

CSS 類別清單

類別名稱說明
.mdui-card定義卡片元件。
.mdui-card-header定義卡片的標頭。
.mdui-card-header-avatar定義卡片標頭的頭像。
.mdui-card-header-title定義卡片標頭的標題。
.mdui-card-header-subtitle定義卡片標頭的副標題。
.mdui-card-media定義卡片中的媒體元素。
.mdui-card-media-covered定義覆蓋在媒體元素上的內容。
.mdui-card-media-covered-top使覆蓋層位於媒體元素頂部。
.mdui-card-media-covered-transparent使覆蓋層有透明背景。
.mdui-card-media-covered-gradient使覆蓋層有漸層背景。
.mdui-card-menu定義卡片中右上角的選單。
.mdui-card-primary定義卡片的標題和副標題區域。
.mdui-card-primary-title定義卡片的標題。
.mdui-card-primary-subtitle定義卡片的副標題。
.mdui-card-content定義卡片內容。
.mdui-card-actions定義卡片的動作列。
.mdui-card-actions-stacked使動作列垂直排列。
arrow_backPrevious
底部導覽列
arrow_forwardNext
標籤