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

網格清單

格狀清單由一系列的單元格構成，它通常用於展示相簿。它可以和網格版面配置系統配合使用進行版面配置。

呼叫方式

格狀清單元件使用純 CSS 編寫，只需編寫 HTML 程式碼即可生效。

樣式

基本樣式

範例

<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
</div>

動作列文字

範例

<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

動作列可以包含兩列文字。

範例

<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
      <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>Ellie Goulding</div>
    </div>
  </div>
</div>

動作列按鈕

範例

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
      <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>Ellie Goulding</div>
    </div>
    <div class="mdui-grid-tile-buttons">
      <button class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">star_border</i></button>
    </div>
  </div>
</div>

動作列樣式

在 .mdui-grid-tile-actions 上添加類別 .mdui-grid-tile-actions-top 可以使動作列位於單元格頂部。

範例

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-top">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

在 .mdui-grid-tile-actions 上添加類別 .mdui-grid-tile-actions-transparent 可以使動作列擁有透明背景。

範例

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-transparent">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

在 .mdui-grid-tile-actions 上添加類別 .mdui-grid-tile-actions-gradient 可以使動作列擁有漸層背景。

範例

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-gradient">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

利用網格系統進行版面配置

在等分列的 .mdui-row-* 上添加類別 .mdui-grid-list，能將單元格之間的間距調整為 4px。

範例

<div class="mdui-row-xs-3 mdui-row-sm-4 mdui-row-md-5 mdui-row-lg-6 mdui-row-xl-7 mdui-grid-list">
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
</div>

CSS 類別清單

類別名稱	說明
`.mdui-grid-tile`	定義一個格狀清單的瓦片。
`.mdui-grid-tile-actions`	定義瓦片中的動作列。
`.mdui-grid-tile-actions-top`	使動作列位於瓦片頂部。
`.mdui-grid-tile-actions-transparent`	使動作列擁有透明背景。
`.mdui-grid-tile-actions-gradient`	使動作列擁有漸層背景。
`.mdui-grid-tile-text`	定義瓦片動作列中的文字。
`.mdui-grid-tile-title`	定義瓦片動作列文字中的標題。
`.mdui-grid-tile-subtitle`	定義瓦片動作列文字中的副標題。
`.mdui-grid-tile-buttons`	定義瓦片動作列中的按鈕區域。
`.mdui-grid-list`	定義格狀清單。配合網格版面配置系統使用。

清單控制項

分頁