縦仕切り線

カスタム垂直ルールヘルパーを使用して、Hrコンポーネントのような垂直の仕切りを作成します。

How it works

垂直罫線は、Hrコンポーネントにインスパイアされたもので、一般的なレイアウトで垂直の仕切りを作ることができます。Hrコンポーネントと同じスタイルです。

  • 幅は1px
  • min-heightは1em
  • 色はcurrentColorとopacityで設定されます。

必要に応じてスタイルを追加してカスタマイズしてください。

Example

vue
<template>
 <Vr />
</template>

縦罫線はフレックスレイアウトで高さをスケーリングします。

vue
<template>
 <b-div
  flex
  style="height: 200px"
 >
  <Vr />
 </b-div>
</template>

With stacks

stacks での利用も可能です。

First item
Second item
Third item
vue
<template>
 <b-div
  hstack
  :gap="3"
 >
  <b-div :padding="3">
   First item
  </b-div>
  <b-div
   :padding="3"
   margin="s-auto"
  >
   Second item
  </b-div>
  <Vr />
  <b-div :padding="3">
   Third item
  </b-div>
 </b-div>
</template>

See Also