はみ出しユーティリティ(Overflow) v5.0.0-alpha3クラス追加
これらの短縮形ユーティリティを使用して、コンテンツを要素からはみ出させる方法を素早く構成。
※v5.2.0-beta1はプレリリースのため、"v5.2.0"での変更は再変更される可能性があります。
このページの項目
実例(Examples)
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
を使用する例。
設定例
はみ出す時はスクロールバーを表示<div class="overflow-auto">...</div>
はみ出し部分は非表示<div class="overflow-hidden">...</div>
はみ出し部分は表示(デフォルトの動作)<div class="overflow-visible">...</div>
常にスクロールバーを表示<div class="overflow-scroll">...</div>
【設定】
- 使用したい要素に
.overflow-{value}
を入れる(上記の「はみ出しの種類」から選択)を入れる
【変更履歴】
- 【v5.0.0-alpha3】
.overflow-visible
,.overflow-scroll
が追加
Sass v5.0.0-beta3追加
ユーティリティAPI(Utilities API)
はみ出しユーティリティは、scss/_utilities.scss
のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらを参照。
デフォルトの設定
scss/_utilities.scss 内 utils-overflow の設定"overflow": (
property: overflow,
values: auto hidden visible scroll,
),