4つのデフォルト値とクラスを使用して、その場で overflow プロパティを調整。これらのクラスはデフォルトではレスポンシブ対応はしていない。
はみ出しの種類 ※設定例と重なる部分は非表示になります
●.overflow-auto (overflow: auto;)
これは、幅と高さが設定された要素に対して
.overflow-auto を使用する例。設計上、このコンテンツは垂直方向にスクロールする。
●.overflow-hidden (overflow: hidden;)
これは、幅と高さが設定された要素に対して
.overflow-hidden を使用する例。
●.overflow-visible (overflow: visible;) v5.0.0-alpha3追加
これは、幅と高さが設定された要素に対して
.overflow-visible を使用する例。
●.overflow-scroll (overflow: scroll;) v5.0.0-alpha3追加
これは、幅と高さが設定された要素に対して
.overflow-scroll を使用する例。
設定例
HTML<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>
Sass変数を使用して、scss/_utilities.scss の $utilities 変数にある overflow の部分を変更することによってはみ出しユーティリティのカスタマイズが可能。
設定方法はユーティリティAPIのユーティリティの変更に記載。
【設定】
- 使用したい要素に
.overflow-{value}を入れる（上記の「はみ出しの種類」から選択）を入れる
【変更履歴】
- 【v5.0.0-alpha3】
.overflow-visible,.overflow-scrollが追加