Skip to content
BlazorUI

Utilities

Separator

Bit.BlazorUIDivider

BitSeparator splits content into groups with a horizontal or vertical line. Content given to it - a label, an icon - sits between the two segments of the line, so it reads on any surface, and names the separator to screen readers. It is restyled through its parameters, its public CSS variables or a BitParams cascade.

Notes

A separator is announced by screen readers, so mark a purely visual one Decorative. Its content is presentational: keep links and buttons out of it. Between the items of a list or a menu, render it as one with Element='li', and mark it Decorative in a plain list, which owns nothing but items.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

A hairline across the full width of its container. Content - text, an icon, any markup - sits between the two segments of the line. Disabled dims it with the group it stands in.

Vertical

Vertical stands the line up between items side by side. In a flex row it stretches to the height of the row, between runs of text it is as tall as the text, and a container with a height sets its own.

Item 1 Item 2 Item 3
Sign in with a password Sign in with a passkey
Docs Blog GitHub

Content alignment

AlignContent puts the content at the start, the middle or the end of the line - the top or the bottom of a vertical one; start and end follow the reading direction. ContentOffset pushes start or end content off the edge by any CSS length, where a percentage is of the length of the line.

Length

Inset holds the line off both ends of its container by any CSS length, or off the start and the end given two. AutoSize drops the full width of a horizontal separator and the stretch of a vertical one, so it sizes to its content instead - the last one below is as tall as a line of text rather than as the row.

Item 1 Item 2 Item 3 Item 4

Line

LineStyle draws the line solid, dashed, dotted or double, and Thickness sets its weight as any CSS length. Dots and the gap of a double line need a few pixels of room.

Item 1 Item 2 Item 3 Item 4

Accessibility

A separator has the separator role, named by its content or by AriaLabel; a vertical one also says so through aria-orientation. Decorative takes a purely visual one out of the accessibility tree, its content then read as plain text. The content is presentational, so keep focusable elements out of it.

Read as plain text

Lists & menus

A ul may only hold lis, so Element li makes the separator one. A list owns nothing but items, so its separators are Decorative; in a menu or a toolbar, which own separators, leave them announced. A tag that cannot hold content, such as hr, falls back to div.

  • Annie Lindqvist
  • Aaron Reid
  • Alex Lundberg

Cascading parameters

BitParams with a BitSeparatorParams sets defaults for every separator under it; a separator's own value wins (the last one keeps its own LineStyle). The content is not cascaded.

Color

Color paints the line in a role of the theme. Border picks a neutral border tier instead, and Color wins where both are set. Background paints behind the content, which is transparent by default.



Size

Size steps the weight of the line up from the theme's divider hairline. Thickness wins over it.

Small Medium Large Item

Style & Class

Style and Class land on the root; Styles and Classes reach its parts: Root and Content. The line is the ::before and ::after of the root, which the class below turns into one gradient.

RTL

Dir set to BitDir.Rtl lays the separator out right to left, so start-aligned content sits on the right.

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component falls back to the theme token beside it.

BitSeparator CSS variables

Name Default value Description
--bit-Separator-color --bit-clr-brd-sec Color of the line. The Color and Border parameters win over it.
--bit-Separator-thickness --bit-siz-divider Weight of the line. The Size and Thickness parameters win over it.
--bit-Separator-line-style solid Style of the line, as any CSS border style. The LineStyle parameter wins over it.
--bit-Separator-spacing spacing(0.5) Room on either side of the line, across it: above and below a horizontal separator, beside a vertical one.
--bit-Separator-inset 0 Room held off both ends of the line, or off the start and the end given two lengths. The Inset parameter wins over it.
--bit-Separator-content-gap spacing(1.5) Room between the content and the line on either side of it.
--bit-Separator-content-offset 0 Length of the segment before a start- or end-aligned content. The ContentOffset parameter wins over it.
--bit-Separator-content-color --bit-clr-fg-pri Text color of the content.
--bit-Separator-content-background transparent Background of the content. The Background parameter wins over it.
--bit-Separator-content-font-size inherit Text size of the content.
--bit-Separator-content-font-weight inherit Text weight of the content.

API

Every parameter, public member, sub-class and enum this component exposes.

BitSeparator parameters

Name Type Default value Description
AlignContent BitPlacement? null Where the content should be aligned along the line of the separator. Only Start, Center and End are honoured; any other value, or none, centers the content.
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 behind the content of the separator. 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. Its content, if any, is then read as plain text.
Element string? null The custom html element used for the root node, such as "li" between the items of a list or a menu. A tag that cannot hold content falls back to the default "div".
Inset string? null Holds the separator off the ends of its container: one CSS length for both ends, or two for the start and the end.
LineStyle BitLineStyle? 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. It stretches to the height of the flex row it stands in and takes it from its container anywhere else, but is never shorter than a line of text.

BitComponentBase parameters

Name Type Default value Description
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.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
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. An attribute written on the component wins over an entry of the same name.
Id string? null Gets or sets the unique identifier for the component's root element.
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.

BitComponentBase 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.

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.

BitPlacement enum

Name Value Description
Top 0 The top edge.
Bottom 1 The bottom edge.
Start 2 The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top.
End 3 The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom.
Left 4 The left edge, in both reading directions.
Right 5 The right edge, in both reading directions.
Center 6 The middle of the axis, against neither edge.
TopAndBottom 7 Both edges of the block axis at once.
StartAndEnd 8 Both edges of the inline axis at once, following the reading direction the way Start and End do.

BitLineStyle enum

Name Value Description
Solid 0 A continuous line, which is what a line is drawn as unless something says otherwise.
Dashed 1 A line of short dashes, which usually marks the stretch it spans as pending or estimated.
Dotted 2 A line of dots, a lighter version of the dashed line.
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.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.