ヘルパークラス

余白

これらの一連のユーティリティクラスは、要素に margin と padding を追加できます。デフォルト値は 8px の倍数です。

クラス名の形式：.mdui-{属性}-{方向}-{サイズ}

属性：

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

方向：

• t - margin-top または padding-top を設定
• b - margin-bottom または padding-bottom を設定
• l - margin-left または padding-left を設定
• r - margin-right または padding-right を設定
• x - margin-left margin-right または padding-left padding-right を設定
• y - margin-top margin-bottom または padding-top padding-bottom を設定
• a - margin または padding を設定

サイズ：

• 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 要素を右にフロートさせます

水平方向の中央揃え

任意の要素にクラス .mdui-center を追加すると、水平方向の中央に配置されます。

垂直方向の中央揃え

任意の要素にクラス .mdui-valign を追加すると、その中の子要素が垂直方向の中央に配置されます。

水平方向の配置

• .mdui-text-left テキストを左揃えにします。
• .mdui-text-center テキストを中央揃えにします。
• .mdui-text-right テキストを右揃えにします。

テキストの大文字・小文字変換

• .mdui-text-lowercase テキストを小文字に変換します。
• .mdui-text-uppercase テキストを大文字に変換します。
• .mdui-text-capitalize テキストを単語の最初の文字のみ大文字に変換します。

テキストの自動省略

.mdui-text-truncate テキストの長さが制限を超えた場合に、自動的に省略記号（...）で切り捨てることができます。

フロートの解除

親要素に .mdui-clearfix クラスを追加すると、フロートを解除できます。

コンテンツの非表示

• .mdui-hidden クラスは要素を非表示にするために使用されます。display: none; を追加するのと同等で、非表示になった要素はページのスペースを占有しません。
• .mdui-invisible クラスは要素を不可視にします。ただし、ページのスペースは引き続き占有します。visibility: hidden; を追加するのと同等です。

レスポンシブユーティリティ

これらのユーティリティクラスは、メディアクエリを使用してデバイスごとにコンテンツを非表示にします。以下のクラスが含まれます：

• .mdui-hidden-*：指定された幅のデバイスで非表示にします。
• .mdui-hidden-*-up：指定された幅以上のデバイスで非表示にします。
• .mdui-hidden-*-down：指定された幅以下のデバイスで非表示にします。

ブラウザウィンドウを調整するか、別のデバイスで以下の例を確認してください。暗い部分は、現在のブラウザウィンドウで表示されていることを示します。