165 lines
3.7 KiB
Markdown
165 lines
3.7 KiB
Markdown
# 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
|
|
|
|
```razor
|
|
<SbDivider />
|
|
```
|
|
|
|
#### With Label
|
|
|
|
```razor
|
|
<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
|
|
|
|
```razor
|
|
<p>Section 1 content</p>
|
|
<SbDivider />
|
|
<p>Section 2 content</p>
|
|
```
|
|
|
|
### Vertical Divider
|
|
|
|
```razor
|
|
<div style="display: flex; height: 100px; align-items: center;">
|
|
<span>Left</span>
|
|
<SbDivider Orientation="SbOrientation.Vertical" />
|
|
<span>Right</span>
|
|
</div>
|
|
```
|
|
|
|
### With Label
|
|
|
|
```razor
|
|
<p>First part</p>
|
|
<SbDivider>OR</SbDivider>
|
|
<p>Second part</p>
|
|
```
|
|
|
|
### Label Alignment
|
|
|
|
```razor
|
|
<SbDivider LabelAlign="SbAlign.Start">START</SbDivider>
|
|
<SbDivider LabelAlign="SbAlign.Center">CENTER</SbDivider>
|
|
<SbDivider LabelAlign="SbAlign.End">END</SbDivider>
|
|
```
|
|
|
|
### Login Form Example
|
|
|
|
```razor
|
|
<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
|
|
|
|
```razor
|
|
<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
|
|
|
|
```razor
|
|
<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
|
|
|
|
```razor
|
|
<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>
|
|
```
|