sufi-blazor/docs/components/surfaces/SbDivider.md

SbDivider

A visual separator for content sections. Supports horizontal and vertical orientations, and can include an optional label with customizable alignment.

Parameters

Parameter	Type	Default	Description
Orientation	SbOrientation	Horizontal	Divider direction (Horizontal, Vertical)
LabelAlign	SbAlign	Center	Label position when content is provided (Start, Center, End)
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes

Templates / Slots

Slot	Type	Description
ChildContent	RenderFragment?	Optional label content displayed within the divider

Template Usage

Simple Divider

<SbDivider />

With Label

<SbDivider>OR</SbDivider>

CSS Classes

• sb-divider - Base class
• sb-divider--horizontal - Horizontal orientation
• sb-divider--vertical - Vertical orientation
• sb-divider--with-label - Has label content
• sb-divider--label-start - Label aligned to start
• sb-divider--label-center - Label aligned to center
• sb-divider--label-end - Label aligned to end
• sb-divider__content - Label container

Rendered Element

• <hr> - When no content is provided
• <div> - When label content is provided

Accessibility

• Uses role="separator" for semantic separation

Examples

Basic Horizontal Divider

<p>Section 1 content</p>
<SbDivider />
<p>Section 2 content</p>

Vertical Divider

<div style="display: flex; height: 100px; align-items: center;">
    <span>Left</span>
    <SbDivider Orientation="SbOrientation.Vertical" />
    <span>Right</span>
</div>

With Label

<p>First part</p>
<SbDivider>OR</SbDivider>
<p>Second part</p>

Label Alignment

<SbDivider LabelAlign="SbAlign.Start">START</SbDivider>
<SbDivider LabelAlign="SbAlign.Center">CENTER</SbDivider>
<SbDivider LabelAlign="SbAlign.End">END</SbDivider>

Login Form Example

<SbForm>
    <SbTextField Label="Email" @bind-Value="email" />
    <SbTextField Label="Password" Type="password" @bind-Value="password" />
    <SbButton FullWidth="true" Type="submit">Sign In</SbButton>
</SbForm>

<SbDivider>OR</SbDivider>

<SbButton FullWidth="true" Variant="SbButtonVariant.Outlined">
    <SbIcon Name="github" /> Continue with GitHub
</SbButton>

Section Separator

<section>
    <SbHeading Level="2">About Us</SbHeading>
    <p>Company description...</p>
</section>

<SbDivider />

<section>
    <SbHeading Level="2">Our Services</SbHeading>
    <p>Services description...</p>
</section>

In a Card

<SbCard>
    <Header>
        <SbHeading Level="4">Order Summary</SbHeading>
    </Header>
    <ChildContent>
        <div class="order-items">
            <p>Item 1 - $10.00</p>
            <p>Item 2 - $15.00</p>
        </div>
        
        <SbDivider />
        
        <div class="order-total">
            <strong>Total: $25.00</strong>
        </div>
    </ChildContent>
</SbCard>

Toolbar with Vertical Dividers

<div class="toolbar" style="display: flex; gap: 8px; align-items: center;">
    <SbIconButton Icon="bold" />
    <SbIconButton Icon="italic" />
    <SbIconButton Icon="underline" />
    
    <SbDivider Orientation="SbOrientation.Vertical" />
    
    <SbIconButton Icon="align-left" />
    <SbIconButton Icon="align-center" />
    <SbIconButton Icon="align-right" />
    
    <SbDivider Orientation="SbOrientation.Vertical" />
    
    <SbIconButton Icon="list" />
    <SbIconButton Icon="list-ordered" />
</div>