# Separator
## Description
BitSeparator visually separates content into groups. The line runs across its container unless Vertical stands it up, and any content given to it - a label, an icon - sits between the two segments of the line, where AlignContent puts it. The line is drawn by the theme and restyled through LineStyle, Size, Thickness and Color, while Border keeps it on the neutral tiers and Inset holds it off the ends of its container. To assistive technologies it reports itself as a separator, named by its content, and a separator that is only visual sugar opts out of being announced through Decorative.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AlignContent | `BitSeparatorAlignContent?` | null | Where the content should be aligned in the separator. Defaults to the center of the line. |
| AutoSize | `bool` | false | Renders the separator with auto width or height, sizing it to its content instead of its container or the flex row it stands in. |
| Background | `BitColorKind?` | null | The color kind of the background of the patch the content of the separator sits on. Defaults to transparent. |
| Border | `BitColorKind?` | null | The color kind of the line of the separator, out of the neutral border tiers of the theme. |
| ChildContent | `RenderFragment?` | null | The content of the Separator, it can be any custom tag or text. It sits between the two segments of the line and also names the separator to assistive technologies, so nothing focusable belongs in it. |
| Classes | `BitSeparatorClassStyles?` | null | Custom CSS classes for different parts of the separator. |
| Color | `BitColor?` | null | The general color of the line of the separator, painting it in one of the roles of the theme. Wins over Border. |
| ContentOffset | `string?` | null | The offset of the content from the edge of the line it is aligned to, as any CSS length, where a percentage measures against the length of the separator. Only takes effect while AlignContent is Start or End. |
| Decorative | `bool` | false | Removes the separator from the accessibility tree, for a separator that is purely visual and should not be announced. |
| Inset | `string?` | null | Holds the separator off both ends of its container by this length, as any CSS length. |
| LineStyle | `BitSeparatorLineStyle?` | null | The style the line of the separator is drawn in: solid, dashed, dotted or double. |
| Size | `BitSize?` | null | The size of the line of the separator, out of the sizes of the theme. Thickness wins over it. |
| Styles | `BitSeparatorClassStyles?` | null | Custom CSS styles for different parts of the separator. |
| Thickness | `string?` | null | The thickness of the line of the separator, as any CSS length. Defaults to the weight of the current Size, which starts at the theme's divider hairline. |
| Vertical | `bool` | false | Whether the element is a vertical separator. A vertical separator stretches to the height of the flex row it stands in, and takes it from its container anywhere else. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitSeparatorAlignContent Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Start | 0 | The content sits at the start of the line - the top of a vertical separator. |
| Center | 1 | The content sits at the middle of the line, which is the default. |
| End | 2 | The content sits at the end of the line - the bottom of a vertical separator. |
### BitSeparatorLineStyle Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Solid | 0 | A continuous line, which is the default. |
| Dashed | 1 | A line of short dashes. |
| Dotted | 2 | A line of dots. |
| Double | 3 | Two parallel lines with a gap between them, which needs a line of at least three pixels to have room to be drawn. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitColorKind Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | The primary color kind. |
| Secondary | 1 | The secondary color kind. |
| Tertiary | 2 | The tertiary color kind. |
| Transparent | 3 | The transparent color kind. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitSeparatorClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the separator. |
| Content | `string?` | null | Custom CSS classes/styles for the element wrapping the ChildContent of the separator, which is only rendered while the separator has content. |
## Examples
\n**Basic**:
```razor
Text
Center
Start
End
Center
Start
End
```
\n**ContentOffset**:
```razor
Start, 2rem
End, 10%
Start
End
25%
```
\n**AutoSize**:
```razor
Default
AutoSize
```
\n**Inset**:
```razor
Default
2rem
25%
Default
3px
0.5rem
Solid
Dashed
Dotted
Double
Primary
Secondary
Tertiary
Info
Success
Warning
SevereWarning
Error
Primary
Secondary
Tertiary
Transparent
Primary
Secondary
Tertiary
Transparent
```
\n**Size**:
```razor
Small
Medium
Large
Styled
Classed
Styles
Classes
```
\n**RTL**:
```razor
جداکننده
ابتدا
انتها
```
Item 1
Item 1
```
\n**AlignContent**:
```razor
Item 1
```
\n**Thickness**:
```razor
Item 1
```
\n**LineStyle**:
```razor
Item 1
```
\n**Decorative**:
```razor
Small
```
\n**Style & Class**:
```razor