menu MDUI 文档
color_lens
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down

辅助类

边距

这一系列工具类可以为元素添加 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-leftmargin-rightpadding-leftpadding-right
  • y - 设置 margin-topmargin-bottompadding-toppadding-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 使元素向右浮动
Example
float left
float right
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

水平居中

为任意元素添加类 .mdui-center 即可使其水平居中。

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

垂直居中

为任意元素添加类 .mdui-valign,即可使该元素中的子元素垂直居中。

Example

This should be vertically aligned

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

水平对齐方式

  • .mdui-text-left 使文本左对齐。
  • .mdui-text-center 使文本居中对齐。
  • .mdui-text-right 使文本右对齐。
Example
This should be left aligned
This should be center aligned
This should be right aligned
<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 把文本转为单词的首字母大写。
Example

Lowercased text.

Uppercased text.

Capitalized text.

<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 可以在文本长度超出限制时,自动截断,并用省略号代替。

Example

这是一段非常非常非常非常非常非常非常非常非常非常非常非常长的文字。

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

清除浮动

为父元素添加 .mdui-clearfix 类可以清除浮动

Example
mdui-float-left
mdui-float-right
<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