Use the custom vertical rule helper to create vertical dividers like the Vr component.
Vertical rules are inspired by the Vr
component, allowing you to create vertical dividers in common layouts. They're styled just like Vr
component:
1px
wide min-height
of 1em
currentColor
and opacity
Customize them with additional styles as needed.
<template>
<Vr />
</template>
Vertical rules scale their height in flex layouts:
<template>
<b-div
flex
style="height: 200px"
>
<Vr />
</b-div>
</template>
They can also be used in stacks :
<template>
<b-div
hstack
:gap="3"
>
<b-div :padding="2">
First item
</b-div>
<b-div
:padding="2"
margin="s-auto"
>
Second item
</b-div>
<Vr />
<b-div :padding="2">
Third item
</b-div>
</b-div>
</template>