Separator

Divides content in a horizontal or vertical manner.

Separator

Nuxt UI

Git

Usage

Use the Separator component as-is to separate content.

Details

<template>
  <B24Separator />
</template>

Orientation

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

Details

<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

<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

<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

<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

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

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

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

Color

Use the color prop to change the color of the Separator. Defaults to default.

Details

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

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

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

Size

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

Details

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

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

<template>
  <B24Separator
    :color="color"
    :type="type"
    :size="size"
  />
</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		(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
avatar		AvatarProps Display an avatar in the middle
color	'default'	"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
size	'xs'	"sm" | "xs" | "md" | "lg" | "xl"
type	'solid'	"solid" | "dashed" | "dotted"
orientation	"horizontal"	"horizontal" | "vertical" The orientation of the separator.
b24ui		{ root?: ClassNameValue; border?: ClassNameValue; container?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; label?: ClassNameValue; }
decorative		boolean 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.

Slots

Slot	Type
default	{}