Separator ​
We are still updating this page
Some data may be missing here — we will complete it shortly.
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. |
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 | |
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. <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 | {} |