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

標籤

標籤可以包含一張圖片、一個短字串等簡潔的資訊。

呼叫方式

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

相關閱讀

Material Design 設計規範：元件 - 標籤

樣式

純文字

範例

<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
</div>

含頭像

範例

<div class="mdui-chip">
  <img class="mdui-chip-icon" src="avatar1.jpg"/>
  <span class="mdui-chip-title">Example Chip</span>
</div>

含文字圖示

範例

<div class="mdui-chip">
  <span class="mdui-chip-icon">A</span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

含圖示

範例

<div class="mdui-chip">
  <span class="mdui-chip-icon">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

含關閉按鈕

範例

<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
  <span class="mdui-chip-delete">
    <i class="mdui-icon material-icons">cancel</i>
  </span>
</div>

圖示顏色

範例

<div class="mdui-chip">
  <span class="mdui-chip-icon mdui-color-blue">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

CSS 類別清單

類別名稱	說明
`.mdui-chip`	定義一個標籤元件。
`.mdui-chip-title`	定義標籤的文字。
`.mdui-chip-icon`	定義標籤的頭像或圖示。
`.mdui-chip-delete`	定義標籤的刪除按鈕。