Even though we have Divider, but sometimes we need more than one to split the elements apart, so we stack each elements upon Divider, but doing so not only makes our code ugly but also makes it difficult to maintain. Space is this kind of component provides us both productivity and elegance.
Sometimes built-in sizes could not meet the business needs, we can use custom size (number type) to control the space between items.
Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4
<template><b-sliderv-model="size":step="4"class="mb-4"/><b-spacewrap:gutter="size * 0.25"><b-cardv-for="i in 2":key="i"borderedclass="w-240px"><template#header><divclass="flex justify-between items-center"><h4>Card name</h4><b-buttonghostsmalltext>Operation</b-button></div></template><divv-for="o in 4":key="o":class="{ 'mt-4': o > 0 }">
{{ 'List item ' + o }}
</div></b-card></b-space></template><scriptlang="ts"setup>import{ ref }from'vue'const size =ref(16)</script>
TIP
Do not use Space with components that depend on ancestor width (height), e.g. Slider, in this case when you drag the trigger button the bar will grow which causes misplacement between cursor and trigger button.
<template><b-space:spacer="spacer":gutter="1"><divv-for="i in 2":key="i"><b-buttonsmall> Button {{ i }} </b-button></div></b-space></template><scriptlang="ts"setup>import{ h }from'vue'import{ BDivider }from'bigin-ui'const spacer =h(BDivider,{vertical:true,class:'h-5'})</script>
Through the fill(Boolean type) parameter, you can control whether the child node automatically fills the container.
In the following example, when set to fill, the width of the child node will automatically adapt to the width of the container.
Use fill to automatically fill the container with child nodes
You can also use the fillRatio parameter to customize the filling ratio. The default value is 100, which represents filling based on the width of the parent container at 100%.
It should be noted that the expression of horizontal layout and vertical layout is slightly different, the specific effect can be viewed in the following example.
Use fillRatio to customize the fill ratio
Fill
Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4
<template><divclass="flex items-center mb-4"><pclass="mr-2">Fill</p><b-switchv-model="fill"/></div><b-spacewrap:fill="fill":fill-ratio="50"class="w-full"><b-cardv-for="i in 2":key="i"borderedclass="min-w-280px"><template#header><divclass="flex justify-between items-center"><h4>Card name</h4><b-buttonghostsmalltext>Operation</b-button></div></template><divv-for="o in 4":key="o":class="{ 'mt-4': o > 0 }">
{{ 'List item ' + o }}
</div></b-card></b-space></template><scriptlang="ts"setup>import{ ref }from'vue'const fill =ref(true)</script>