Skip to content

Separator ​

We are still updating this page

Some data may be missing here — we will complete it shortly.

Divides content in a horizontal or vertical manner.

Usage ​

Use the Separator component as-is to separate content.

Details
vue
<template>
  <B24Separator />
</template>

Orientation ​

Use the orientation prop to change the orientation of the Separator. Defaults to horizontal.

Details
vue
<script setup lang="ts">
export interface ExampleProps {
  orientation?: any
}

withDefaults(defineProps<ExampleProps>(), {
  orientation: 'horizontal'
})
</script>

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

Label ​

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

Details
vue
<script setup lang="ts">
export interface ExampleProps {
  label?: string
}

withDefaults(defineProps<ExampleProps>(), {
  label: 'Bitrix24 UI'
})
</script>

<template>
  <B24Separator
    :label="label"
  />
</template>

Icon ​

Use the icon prop to display an icon in the middle of the Separator.

Details
vue
<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
</script>

<template>
  <B24Separator
    :icon="Bitrix24Icon"
  />
</template>

Avatar ​

Use the avatar prop to display an avatar in the middle of the Separator.

Details
vue
<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
</script>

<template>
  <B24Separator
    :avatar="{ src: '/b24ui/avatar/assistant.png' }"
  />
  <B24Separator
    :avatar="{ icon: Bitrix24Icon }"
  />
</template>

Type ​

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

Details
vue
<script setup lang="ts">
export interface ExampleProps {
  type?: any
}

withDefaults(defineProps<ExampleProps>(), {
  type: 'dotted'
})
</script>

<template>
  <B24Separator
    color="primary"
    :type="type"
  />
</template>

Color ​

@remove

Size ​

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

Details
vue
<script setup lang="ts">
export interface ExampleProps {
  type?: any
  size?: any
}

withDefaults(defineProps<ExampleProps>(), {
  type: 'dotted',
  size: 'thick'
})
</script>

<template>
  <B24Separator
    :type="type"
    :size="size"
  />
</template>

API ​

Props ​

Prop Default Type
as'div'any
The element or component this component should render as.
labelstring
Display a label in the middle.
icon(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any
Display an icon in the middle
avatarAvatarProps
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.
decorativeboolean
Whether or not the component is purely decorative. <br>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{}

Released under the MIT License.