メインコンテンツへスキップ

縦仕切り線(Vertical rule) v5.1.0新設

カスタム縦仕切り線ヘルパーを使用して、<hr> 要素のような垂直仕切りを作成。

使い方(how it works)

縦仕切り線は <hr> 要素に着想を得ており、一般的なレイアウトで垂直方向の仕切りが作成できる。<hr> 要素と同じようなスタイルが設定されている。

  • 線の幅は 1px
  • min-height1em
  • 色は currentColoropacity を経由して設定される

必要に応じて、スタイルを追加してカスタマイズする。

 

実例(Example)

1.基本の設定

見本
設定例
<div class="vr"></div>

2.高さの調整

縦仕切り線の高さは、flexレイアウトで調整(.vr のデフォルトは display: inline-block)。

見本
設定例
<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>

3.太さの調整

px-*ユーティリティクラスを使用すれば、横仕切り線と同様、より太めの仕切り線を作成することもできる。

見本

.vr.py-1(左右のpadding0.25remずつ)

.vr.py-2(左右のpadding0.5remずつ)

.vr.py-3(左右のpadding1remずつ)

.vr.py-4(左右のpadding1.5remずつ)

.vr.py-5(左右のpadding3remずつ)

width を設定

※デフォルト(参考)

設定例
.px-*を使用<div class="vr px-1"></div>
widthを設定<div class="vr" style="width: 200px;"></div>
【設定】
  • 仕切りを入れたい部分に div.vr を入れる
  • 高さを調整したい場合は、height を設定(場合によっては .d-flex で囲む)
  • 太さを調整したい場合は、.vr.px-{size} を追加するか、width を設定
  • 横仕切り線については、文字の体裁の横仕切り線に記載

 

積み重ねヘルパーで使用(With stacks)

積み重ねヘルパーで使用することもできる。

見本
1番目のアイテム
2番目のアイテム
3番目のアイテム
設定例
<div class="hstack gap-3">
  <div class="bg-light border">1番目のアイテム</div>
  <div class="bg-light border ms-auto">2番目のアイテム</div>
  <div class="vr"></div>
  <div class="bg-light border">3番目のアイテム</div>
</div>

 

Sass

デフォルトの設定
scss/_variables.scss 内 type-variables の設定内$hr-opacity:                  .25;
scss/helpers/_vr.scss の設定.vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: currentColor;
  opacity: $hr-opacity;
}