Vue Separator Component

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.

orientation

<template>
  <B24Separator orientation="vertical" class="h-48" />
</template>

Label

Use the label prop to display a label in the middle of the Separator.

label

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'
    }"
  />
</template>

Accent

Use the accent prop to change the variant of the Separator. Defaults to default.

accent

type

<template>
  <B24Separator accent="accent" type="solid" />
</template>

Type

Use the type prop to change the type of the Separator. Defaults to solid.

type

accent

size

<template>
  <B24Separator type="dashed" accent="accent" size="thick" />
</template>

Size

Use the size prop to change the size of the Separator. Defaults to thin.

size

<template>
  <B24Separator size="thick" />
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`label`		`string` Display a label in the middle.
`icon`		`IconComponent` Display an icon in the middle
`avatar`		`AvatarProps` Display an avatar in the middle
`accent`	`'default'`	`"default" \| "accent" \| "less"`
`size`	`'thin'`	`"thin" \| "thick"`
`type`	`'solid'`	`"solid" \| "double" \| "dashed" \| "dotted"`
`orientation`	`'horizontal'`	`"horizontal" \| "vertical"` The orientation of the separator.
`decorative`		`boolean` Whether or not the component is purely decorative. When `true`, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.
`b24ui`		`{ root?: ClassNameValue; border?: ClassNameValue; container?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; label?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{ b24ui: object; }`

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'
          }
        }
      }
    })
  ]
})

Progress

A progress bar displaying task completion status.

Skeleton

A toggle control for switching between two states.