Usage
Use the Separator component as-is to separate content.
<template>
<B24Separator />
</template>
Orientation
Use the orientation prop to change the orientation of the Separator. Defaults to horizontal.
<template>
<B24Separator orientation="vertical" class="h-48" />
</template>
Label
Use the label prop to display a label in the middle of the Separator.
Bitrix24 UI
<template>
<B24Separator label="Bitrix24 UI" />
</template>
Icon
Use the icon prop to display an Icon in the middle of the Separator.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24Separator :icon="RocketIcon" />
</template>
Avatar
Use the avatar prop to display an Avatar in the middle of the Separator.
<template>
<B24Separator
:avatar="{
src: '/b24ui/avatar/employee.png',
loading: 'lazy'
}"
/>
</template>
Accent
Use the accent prop to change the variant of the Separator. Defaults to default.
<template>
<B24Separator accent="accent" type="solid" />
</template>
Type
Use the type prop to change the type of the Separator. Defaults to solid.
<template>
<B24Separator type="dashed" accent="accent" size="thick" />
</template>
Size
Use the size prop to change the size of the Separator. Defaults to thin.
<template>
<B24Separator size="thick" />
</template>
API
Props
Slots
Theme
https://github.com/bitrix24/b24ui/tree/main/src/theme/separator.ts
export default {
slots: {
root: 'flex items-center align-center text-center',
border: '',
container: 'font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-normal) flex',
icon: 'shrink-0 size-7',
avatar: 'shrink-0',
avatarSize: 'sm',
label: ''
},
variants: {
accent: {
default: {
container: 'text-(--ui-color-design-plain-na-content-secondary) text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)',
border: 'border-(--ui-color-divider-vibrant-default)'
},
accent: {
container: 'text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)',
border: 'border-(--ui-color-divider-vibrant-accent-more)'
},
less: {
container: 'text-(--ui-color-base-6) text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)',
border: 'border-(--ui-color-divider-vibrant-less)'
}
},
orientation: {
horizontal: {
root: 'w-full flex-row',
border: 'w-full',
container: 'mx-3 whitespace-nowrap'
},
vertical: {
root: 'h-full flex-col',
border: 'h-full',
container: 'my-2'
}
},
size: {
thin: '',
thick: ''
},
type: {
solid: {
border: 'border-solid'
},
dashed: {
border: 'border-dashed'
},
dotted: {
border: 'border-dotted'
},
double: {
border: 'border-double'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
size: 'thin',
class: {
border: 'border-t-(length:--ui-border-width-thin)'
}
},
{
orientation: 'horizontal',
size: 'thick',
class: {
border: 'border-t-(length:--ui-border-width-thick)'
}
},
{
orientation: 'vertical',
size: 'thin',
class: {
border: 'border-s-(length:--ui-border-width-thin)'
}
},
{
orientation: 'vertical',
size: 'thick',
class: {
border: 'border-s-(length:--ui-border-width-thick)'
}
},
{
type: 'double',
size: 'thick',
orientation: 'horizontal',
class: {
border: 'border-t-[length:calc(var(--ui-border-width-thick)_+_1px)]'
}
},
{
type: 'double',
size: 'thick',
orientation: 'vertical',
class: {
border: 'border-s-[length:calc(var(--ui-border-width-thick)_+_1px)]'
}
}
],
defaultVariants: {
accent: 'default',
size: 'thin',
type: 'solid'
}
}