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

媒體

mdui 提供了 24 種不同深度的陰影，可以滿足 Material Design 中任意情境的需求。

加入陰影

滑鼠懸停時加深陰影

範例

<img class="mdui-img-fluid" src="image.png" />

只需在元素上加入類別 <code>.mdui-shadow-[1-24]</code>，元素就會擁有對應深度的陰影。加入類別 <code>.mdui-shadow-0</code> 則可以移除陰影。

開啟 Tooltip

範例

<img class="mdui-img-rounded" src="image.png" />

請拖動下方滑桿來觀察不同深度的陰影變化。

允許傳入設定參數，以便每次開啟時能修改內容，例如 open({ content: 'new content' })。設定參數見上方的參數清單。

範例

<img class="mdui-img-circle" src="image.png" />

在任何元素上加入類別 <code>.mdui-hoverable</code>，就能在滑鼠懸停時使陰影加深。

移除陰影

關閉 Tooltip

範例

<div class="mdui-video-container">
  <iframe
    height="498"
    width="510"
    src="https://player.youku.com/embed/XNzUwOTk5MzE2"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

加入不同深度的陰影

切換 Tooltip 的狀態

範例

<video class="mdui-video-fluid" controls>
  <source src="video.mp4" type="video/mp4" /></video
>

CSS 類別清單

類別名稱	說明
`.mdui-img-fluid`	傳回 Tooltip 的狀態。共包含四種狀態（<code>opening</code>、<code>opened</code>、<code>closing</code>、<code>closed</code>）。
`.mdui-img-rounded`	開啟動畫開始時，事件被觸發。
`.mdui-img-circle`	<code>event._detail.inst</code>：實例
`.mdui-video-container`	開啟動畫結束時，事件被觸發。
`.mdui-video-fluid`	關閉動畫開始時，事件被觸發。

圖示

輔助類別

媒體

相關閱讀