Usage
Use the Separator component as-is to separate content.
{
"wait": "Loading client-side content..."
}Orientation
Use the orientation prop to change the orientation of the Separator. Defaults to horizontal.
{
"wait": "Loading client-side content..."
}Label
Use the label prop to display a label in the middle of the Separator.
Bitrix24 UI
{
"wait": "Loading client-side content..."
}Icon
Use the icon prop to display an Icon in the middle of the Separator.
{
"wait": "Loading client-side content..."
}Avatar
Use the avatar prop to display an Avatar in the middle of the Separator.
{
"wait": "Loading client-side content..."
}Accent
Use the accent prop to change the variant of the Separator. Defaults to default.
{
"wait": "Loading client-side content..."
}Type
Use the type prop to change the type of the Separator. Defaults to solid.
{
"wait": "Loading client-side content..."
}Size
Use the size prop to change the size of the Separator. Defaults to thin.
{
"wait": "Loading client-side content..."
}API
Props
Slots
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
separator: {
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'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
separator: {
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'
}
}
}
})
]
})