Separator API
This page provides an overview of the Separator component API, detailing its props, slots, and exposed methods/states.
Props
The Separator component accepts the following props:
| Prop | Default | Type | Description |
|---|---|---|---|
vertical | false | boolean or undefined | Determines whether the separator is vertical. |
contentPosition | "center" | "right" or "left" or "center" or "full" or undefined | Specifies the alignment of the content within the separator. |
gradient | false | Gradient or [Gradient, GradientLength] or boolean or undefined | Applies a gradient to the separator lines. |
depth | 1 | 0 to 7 or undefined | Specifies the thickness of the separator. |
class | "" | StyleClass or undefined | Custom CSS class for the separator container. |
classBodyLine | "" | StyleClass or undefined | Custom CSS class for the body of the separator line. |
classLine | "" | StyleClass or undefined | Custom CSS class for the main separator line. |
classContent | "" | StyleClass or undefined | Custom CSS class for the separator content. |
classBodyLineLeft | "" | StyleClass or undefined | Custom CSS class for the left body line. |
classLineLeft | "" | StyleClass or undefined | Custom CSS class for the left separator line. |
classBodyLineRight | "" | StyleClass or undefined | Custom CSS class for the right body line. |
classLineRight | "" | StyleClass or undefined | Custom CSS class for the right separator line. |
Gradient Values
Gradient: Values between0and100(e.g.,0,10,50, etc.).GradientLength: Values between0and100to define gradient length.
Slots
The Separator component provides the following slots:
| Slot | Payload | Description |
|---|---|---|
default | VNode[] | Default slot for custom content inside the separator. |
Expose
The Separator component exposes the following methods and states via ref:
| Expose | Value | Description |
|---|---|---|
vertical | SeparatorProps["vertical"] | Indicates whether the separator is vertical. |
content | SeparatorProps["contentPosition"] | The current alignment of the separator content. |
gradient | number | The applied gradient value for the separator. |
gradientLength | number | The length of the gradient applied to the separator. |
depth | SeparatorProps["depth"] | The thickness of the separator. |
classBase | SeparatorProps["class"] | The CSS class for the separator container. |
classBodyLineLeft | StyleClass | The CSS class for the left body line. |
classLineLeft | StyleClass | The CSS class for the left separator line. |
classContent | StyleClass | The CSS class for the separator content. |
classBodyLineRight | StyleClass | The CSS class for the right body line. |
classLineRight | StyleClass | The CSS class for the right separator line. |