Separator

Basic

The Separator component allows you to visually separate sections of a page with customizable styles, gradients, orientation, and depth.

<Separator></Separator>
<Separator contentPosition="center" :gradient="50" :depth="3">
  Centered Content
</Separator>

The basic usage of the Separator component involves specifying the desired contentPosition, gradient, depth, and orientation (vertical) props for customization.

Orientation

The vertical prop determines the orientation of the separator.

<Separator :vertical="vertical" :depth="3"></Separator>

Content Alignment

The contentPosition prop specifies the alignment of the separator’s content. It can be one of the following values:

• "center" (default): Content is centered.
• "left": Content is aligned to the left.
• "right": Content is aligned to the right.
• "full": Full-width separator with no content.

<Separator contentPosition="center" :gradient="[20, 30]" :depth="3">
  Centered Content
</Separator>
<Separator contentPosition="left" :gradient="[10, 20]" :depth="3">
  Left Content
</Separator>
<Separator contentPosition="right" :gradient="[10, 20]" :depth="3">
  Right Content
</Separator>
<Separator contentPosition="full" :gradient="false" :depth="1"></Separator>

Gradient

The gradient prop applies a gradient to the separator. It accepts the following values:

• A single Gradient value (e.g., 20).
• A tuple [Gradient, GradientLength] (e.g., [20, 30]).
• true (default): Enables gradient with default values.
• false: Disables the gradient.

The Gradient and GradientLength values can range from 0 to 100.

<Separator :gradient="[20, 30]" :depth="3">Gradient Separator</Separator>
<Separator :gradient="false" :depth="3">No Gradient</Separator>
<Separator :gradient="10" :depth="3">Simple Gradient</Separator>

Depth

The depth prop specifies the thickness of the separator. It can range from 0 to 7.

• Default: 1.

<Separator depth="1" :gradient="[20, 30]">Depth 1</Separator>
<Separator depth="3" :gradient="[20, 30]">Depth 3</Separator>
<Separator depth="7" :gradient="[20, 30]">Depth 7</Separator>

Custom CSS Classes

The class prop allows you to set a custom CSS class on the separator container.

<Separator
  class="custom-separator"
  classBodyLine="custom-body-line"
  classLine="custom-line">
</Separator>
<Separator
  classBodyLineLeft="custom-left-body-line"
  classLineLeft="custom-left-line"
  classBodyLineRight="custom-right-body-line"
  classLineRight="custom-right-line">
</Separator>

• classBodyLine: Sets a custom class on the separator’s body line.
• classLine: Sets a custom class on the individual line elements.
• classBodyLineLeft: Sets a custom class on the left body line.
• classLineLeft: Sets a custom class on the left line.
• classBodyLineRight: Sets a custom class on the right body line.
• classLineRight: Sets a custom class on the right line.

Slots

Default Slot

The default slot can be used to provide custom content inside the separator.

<template>
  <Separator>
    <Icons
        type="user"
        class="text-neutral-600 dark:text-neutral-500">
    </Icons>
  </Separator>
</template>