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

輔助類別

邊距

這一系列工具類別可以為元素添加 marginpadding,預設值都是 8px 的倍數。

類別名稱格式為:.mdui-{屬性}-{方向}-{大小}

屬性:

  • m - 設定 margin
  • p - 設定 padding

方向:

  • t - 設定 margin-toppadding-top
  • b - 設定 margin-bottompadding-bottom
  • l - 設定 margin-leftpadding-left
  • r - 設定 margin-rightpadding-right
  • x - 設定 margin-left margin-rightpadding-left padding-right
  • y - 設定 margin-top margin-bottompadding-top padding-bottom
  • a - 設定 marginpadding

大小:

  • 0 - 0px
  • 1 - 8px
  • 2 - 16px
  • 3 - 24px
  • 4 - 32px
  • 5 - 40px
.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

快速浮動

  • .mdui-float-left 使元素向左浮動
  • .mdui-float-right 使元素向右浮動
範例
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

水平置中

為任意元素添加類別 .mdui-center 即可使其水平置中。

範例
<div class="mdui-center" style="width: 200px">mdui-center</div>

垂直置中

為任意元素添加類別 .mdui-valign,即可使該元素中的子元素垂直置中。

範例
<div class="mdui-valign">
  <p class="mdui-center">This should be vertically aligned</p>
</div>

水平對齊方式

  • .mdui-text-left 使文字左對齊。
  • .mdui-text-center 使文字置中對齊。
  • .mdui-text-right 使文字右對齊。
範例
<div class="mdui-text-left">This should be left aligned</div>
<div class="mdui-text-center">This should be center aligned</div>
<div class="mdui-text-right">This should be right aligned</div>

文字大小寫轉換

  • .mdui-text-lowercase 把文字轉為小寫。
  • .mdui-text-uppercase 把文字轉為大寫。
  • .mdui-text-capitalize 把文字轉為單字的首字母大寫。
範例
<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

文字自動截斷

.mdui-text-truncate 可以在文字長度超出限制時,自動截斷,並用省略號代替。

範例
<p class="mdui-text-truncate" style="max-width: 200px;">這是一段非常非常非常非常非常非常非常非常非常非常非常非常長的文字。</p>

清除浮動

為父元素添加 .mdui-clearfix 類別可以清除浮動。

範例
<div class="mdui-clearfix">
  <div class="mdui-float-left">mdui-float-left</div>
  <div class="mdui-float-right">mdui-float-right</div>
</div>

隱藏內容

  • .mdui-hidden 類別用於隱藏元素,相當於添加樣式 display: none;,隱藏後的元素不佔據頁面空間。
  • .mdui-invisible 類別用於使元素不可見,但依然會佔據頁面上的空間,相當於添加樣式 visibility: hidden;

回應式工具

這些工具類別透過媒體查詢實作針對不同裝置隱藏內容。這些工具類別包括:

  • .mdui-hidden-*:在指定寬度的裝置上隱藏。
  • .mdui-hidden-*-up:在指定寬度及以上的裝置上隱藏。
  • .mdui-hidden-*-down:在指定寬度及以下的裝置上隱藏。
超小螢幕
<600px
小螢幕
>=600px - <1024px
中等螢幕
>=1024px - <1440px
大螢幕
>=1440px - <1920px
超大螢幕
>=1920px
.mdui-hidden-xs可見可見可見可見
.mdui-hidden-sm可見可見可見可見
.mdui-hidden-md可見可見可見可見
.mdui-hidden-lg可見可見可見可見
.mdui-hidden-xl可見可見可見可見
.mdui-hidden-xs-down可見可見可見可見
.mdui-hidden-sm-down可見可見可見
.mdui-hidden-md-down可見可見
.mdui-hidden-lg-down可見
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-up可見
.mdui-hidden-md-up可見可見
.mdui-hidden-lg-up可見可見可見
.mdui-hidden-xl-up可見可見可見可見

調整瀏覽器視窗,或在不同裝置上查看下面的實例。深色部分表示在目前瀏覽器視窗中是可見的。

✔ .mdui-hidden-xs
✔ .mdui-hidden-sm
✔ .mdui-hidden-md
✔ .mdui-hidden-lg
✔ .mdui-hidden-xl
✔ .mdui-hidden-xs-down
✔ .mdui-hidden-sm-down
✔ .mdui-hidden-md-down
✔ .mdui-hidden-lg-down
✔ .mdui-hidden-xl-down
✔ .mdui-hidden-xs-up
✔ .mdui-hidden-sm-up
✔ .mdui-hidden-md-up
✔ .mdui-hidden-lg-up
✔ .mdui-hidden-xl-up