first commit
This commit is contained in:
@@ -0,0 +1,196 @@
|
||||
# SbCard
|
||||
|
||||
A versatile container component for grouping related content with elevation, borders, and optional header/footer sections. Cards can be static, clickable, or linkable.
|
||||
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| Elevation | int | 1 | Shadow depth level (0-5) |
|
||||
| Outlined | bool | false | Shows border instead of shadow |
|
||||
| Href | string? | null | Makes card a link to this URL |
|
||||
| NoPadding | bool | false | Removes default padding |
|
||||
| Class | string? | null | Additional CSS classes |
|
||||
| Style | string? | null | Inline styles |
|
||||
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Type | Description |
|
||||
|-------|------|-------------|
|
||||
| OnClick | EventCallback<MouseEventArgs> | Fired when card is clicked (makes card a button) |
|
||||
|
||||
## Templates / Slots
|
||||
|
||||
| Slot | Type | Description |
|
||||
|------|------|-------------|
|
||||
| Header | RenderFragment? | Content for the card header section |
|
||||
| ChildContent | RenderFragment? | Main body content of the card |
|
||||
| Footer | RenderFragment? | Content for the card footer section |
|
||||
|
||||
### Template Usage
|
||||
|
||||
#### Basic
|
||||
|
||||
```razor
|
||||
<SbCard>
|
||||
<p>Card body content</p>
|
||||
</SbCard>
|
||||
```
|
||||
|
||||
#### With Header and Footer
|
||||
|
||||
```razor
|
||||
<SbCard>
|
||||
<Header>
|
||||
<SbHeading Level="3">Card Title</SbHeading>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<p>Main content goes here.</p>
|
||||
</ChildContent>
|
||||
<Footer>
|
||||
<SbButton>Action</SbButton>
|
||||
</Footer>
|
||||
</SbCard>
|
||||
```
|
||||
|
||||
## CSS Classes
|
||||
|
||||
- `sb-card` - Base class
|
||||
- `sb-card--elevation-0` through `sb-card--elevation-5` - Shadow levels
|
||||
- `sb-card--outlined` - Bordered variant
|
||||
- `sb-card--clickable` - Applied when card is interactive
|
||||
- `sb-card--no-padding` - Removes padding
|
||||
- `sb-card__header` - Header section
|
||||
- `sb-card__body` - Body section
|
||||
- `sb-card__footer` - Footer section
|
||||
|
||||
## Rendered Element
|
||||
|
||||
- `<div>` - Default static card
|
||||
- `<a>` - When `Href` is provided
|
||||
- `<button>` - When `OnClick` is provided
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Card
|
||||
|
||||
```razor
|
||||
<SbCard>
|
||||
<p>This is a simple card with default settings.</p>
|
||||
</SbCard>
|
||||
```
|
||||
|
||||
### With Header and Footer
|
||||
|
||||
```razor
|
||||
<SbCard>
|
||||
<Header>
|
||||
<SbHeading Level="4">User Profile</SbHeading>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<p>Name: John Doe</p>
|
||||
<p>Email: john@example.com</p>
|
||||
</ChildContent>
|
||||
<Footer>
|
||||
<SbButton Variant="SbButtonVariant.Ghost">Edit</SbButton>
|
||||
<SbButton>Save</SbButton>
|
||||
</Footer>
|
||||
</SbCard>
|
||||
```
|
||||
|
||||
### Elevation Levels
|
||||
|
||||
```razor
|
||||
<SbCard Elevation="0">No shadow</SbCard>
|
||||
<SbCard Elevation="1">Subtle shadow</SbCard>
|
||||
<SbCard Elevation="2">Light shadow</SbCard>
|
||||
<SbCard Elevation="3">Medium shadow</SbCard>
|
||||
<SbCard Elevation="4">Strong shadow</SbCard>
|
||||
<SbCard Elevation="5">Heavy shadow</SbCard>
|
||||
```
|
||||
|
||||
### Outlined Card
|
||||
|
||||
```razor
|
||||
<SbCard Outlined="true">
|
||||
<p>This card has a border instead of shadow.</p>
|
||||
</SbCard>
|
||||
```
|
||||
|
||||
### Clickable Card
|
||||
|
||||
```razor
|
||||
<SbCard OnClick="HandleCardClick">
|
||||
<Header>
|
||||
<SbHeading Level="4">Click Me</SbHeading>
|
||||
</Header>
|
||||
<p>This entire card is clickable.</p>
|
||||
</SbCard>
|
||||
|
||||
@code {
|
||||
private void HandleCardClick(MouseEventArgs args)
|
||||
{
|
||||
Console.WriteLine("Card clicked!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Link Card
|
||||
|
||||
```razor
|
||||
<SbCard Href="/products/123">
|
||||
<Header>
|
||||
<SbHeading Level="4">Product Name</SbHeading>
|
||||
</Header>
|
||||
<p>Click to view product details.</p>
|
||||
</SbCard>
|
||||
```
|
||||
|
||||
### No Padding
|
||||
|
||||
```razor
|
||||
<SbCard NoPadding="true">
|
||||
<img src="image.jpg" alt="Full bleed image" style="width: 100%;" />
|
||||
<div style="padding: 16px;">
|
||||
<SbHeading Level="4">Image Caption</SbHeading>
|
||||
<p>Description text with custom padding.</p>
|
||||
</div>
|
||||
</SbCard>
|
||||
```
|
||||
|
||||
### Product Card Example
|
||||
|
||||
```razor
|
||||
<SbCard Class="product-card">
|
||||
<Header>
|
||||
<img src="@product.Image" alt="@product.Name" />
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<SbHeading Level="4">@product.Name</SbHeading>
|
||||
<SbText Color="SbColor.Primary">$@product.Price</SbText>
|
||||
<SbText Variant="SbTextVariant.BodySmall">@product.Description</SbText>
|
||||
</ChildContent>
|
||||
<Footer>
|
||||
<SbButton FullWidth="true" OnClick="() => AddToCart(product)">
|
||||
Add to Cart
|
||||
</SbButton>
|
||||
</Footer>
|
||||
</SbCard>
|
||||
```
|
||||
|
||||
### Dashboard Stat Card
|
||||
|
||||
```razor
|
||||
<SbCard Elevation="2">
|
||||
<Header>
|
||||
<SbText Variant="SbTextVariant.Caption" Color="SbColor.Secondary">
|
||||
Total Revenue
|
||||
</SbText>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<SbHeading Level="2">$45,231</SbHeading>
|
||||
<SbChip Color="SbColor.Success" Size="SbSize.Sm">+12.5%</SbChip>
|
||||
</ChildContent>
|
||||
</SbCard>
|
||||
```
|
||||
@@ -0,0 +1,164 @@
|
||||
# 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>
|
||||
```
|
||||
@@ -0,0 +1,168 @@
|
||||
# SbSurface
|
||||
|
||||
A low-level container component for creating elevated or outlined surfaces with customizable styling. Useful as a building block for custom components or when you need more control than SbCard provides.
|
||||
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| Elevation | int | 1 | Shadow depth level (0-5) |
|
||||
| Outlined | bool | false | Adds a border instead of relying solely on elevation |
|
||||
| Background | string? | null | Custom background color (CSS value) |
|
||||
| BorderRadius | string? | null | Custom border radius (CSS value) |
|
||||
| Padding | string? | null | Custom padding (CSS value) |
|
||||
| Class | string? | null | Additional CSS classes |
|
||||
|
||||
## Templates / Slots
|
||||
|
||||
| Slot | Type | Description |
|
||||
|------|------|-------------|
|
||||
| ChildContent | RenderFragment? | Content to render inside the surface |
|
||||
|
||||
## CSS Classes
|
||||
|
||||
- `sb-surface` - Base class
|
||||
- `sb-surface--elevation-0` through `sb-surface--elevation-5` - Shadow levels
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Surface
|
||||
|
||||
```razor
|
||||
<SbSurface>
|
||||
<p>Content inside a surface</p>
|
||||
</SbSurface>
|
||||
```
|
||||
|
||||
### Elevation Levels
|
||||
|
||||
```razor
|
||||
<SbSurface Elevation="0">Flat (no shadow)</SbSurface>
|
||||
<SbSurface Elevation="1">Subtle shadow</SbSurface>
|
||||
<SbSurface Elevation="2">Light shadow</SbSurface>
|
||||
<SbSurface Elevation="3">Medium shadow</SbSurface>
|
||||
<SbSurface Elevation="4">Strong shadow</SbSurface>
|
||||
<SbSurface Elevation="5">Heavy shadow</SbSurface>
|
||||
```
|
||||
|
||||
### Outlined Surface
|
||||
|
||||
```razor
|
||||
<SbSurface Outlined="true" Elevation="0">
|
||||
<p>This surface has a border.</p>
|
||||
</SbSurface>
|
||||
```
|
||||
|
||||
### Custom Background
|
||||
|
||||
```razor
|
||||
<SbSurface Background="#f5f5f5" Padding="24px">
|
||||
<p>Gray background surface</p>
|
||||
</SbSurface>
|
||||
|
||||
<SbSurface Background="var(--sb-primary-light)" Padding="24px">
|
||||
<p>Using CSS variable for background</p>
|
||||
</SbSurface>
|
||||
```
|
||||
|
||||
### Custom Border Radius
|
||||
|
||||
```razor
|
||||
<SbSurface BorderRadius="16px" Padding="24px">
|
||||
<p>Rounded corners</p>
|
||||
</SbSurface>
|
||||
|
||||
<SbSurface BorderRadius="50%" Padding="48px">
|
||||
<p>Circle</p>
|
||||
</SbSurface>
|
||||
```
|
||||
|
||||
### Custom Padding
|
||||
|
||||
```razor
|
||||
<SbSurface Padding="8px">Compact padding</SbSurface>
|
||||
<SbSurface Padding="16px">Default-like padding</SbSurface>
|
||||
<SbSurface Padding="32px">Spacious padding</SbSurface>
|
||||
<SbSurface Padding="16px 32px">Horizontal emphasis</SbSurface>
|
||||
```
|
||||
|
||||
### Combined Styling
|
||||
|
||||
```razor
|
||||
<SbSurface
|
||||
Elevation="2"
|
||||
Background="#ffffff"
|
||||
BorderRadius="12px"
|
||||
Padding="24px">
|
||||
<SbHeading Level="4">Custom Surface</SbHeading>
|
||||
<p>A fully customized surface component.</p>
|
||||
</SbSurface>
|
||||
```
|
||||
|
||||
### Building Custom Components
|
||||
|
||||
```razor
|
||||
@* Custom tooltip-like element *@
|
||||
<SbSurface
|
||||
Elevation="3"
|
||||
Background="#333"
|
||||
BorderRadius="4px"
|
||||
Padding="8px 12px"
|
||||
Class="custom-tooltip">
|
||||
<SbText Color="SbColor.Light">Tooltip content</SbText>
|
||||
</SbSurface>
|
||||
|
||||
@* Custom floating action panel *@
|
||||
<SbSurface
|
||||
Elevation="4"
|
||||
BorderRadius="24px"
|
||||
Padding="16px"
|
||||
Class="floating-panel">
|
||||
<SbStack Direction="SbDirection.Row" Gap="SbSpacing.Sm">
|
||||
<SbIconButton Icon="edit" />
|
||||
<SbIconButton Icon="share" />
|
||||
<SbIconButton Icon="delete" />
|
||||
</SbStack>
|
||||
</SbSurface>
|
||||
```
|
||||
|
||||
### Nested Surfaces
|
||||
|
||||
```razor
|
||||
<SbSurface Elevation="1" Padding="24px">
|
||||
<SbHeading Level="4">Outer Surface</SbHeading>
|
||||
|
||||
<SbSurface Elevation="2" Padding="16px" Background="#f9f9f9">
|
||||
<p>Nested inner surface with different elevation</p>
|
||||
</SbSurface>
|
||||
</SbSurface>
|
||||
```
|
||||
|
||||
### Dashboard Widget
|
||||
|
||||
```razor
|
||||
<SbSurface
|
||||
Elevation="1"
|
||||
BorderRadius="8px"
|
||||
Padding="20px"
|
||||
Class="dashboard-widget">
|
||||
<div class="widget-header">
|
||||
<SbText Variant="SbTextVariant.Caption">Monthly Sales</SbText>
|
||||
<SbIconButton Icon="more-vertical" Size="SbSize.Sm" />
|
||||
</div>
|
||||
<SbHeading Level="2">$12,450</SbHeading>
|
||||
<SbProgress Value="75" ShowLabel="true" />
|
||||
</SbSurface>
|
||||
```
|
||||
|
||||
### Comparison with SbCard
|
||||
|
||||
Use `SbSurface` when you need:
|
||||
- More control over styling (background, radius, padding)
|
||||
- A simpler container without header/footer structure
|
||||
- Building blocks for custom components
|
||||
|
||||
Use `SbCard` when you need:
|
||||
- Structured header/body/footer sections
|
||||
- Clickable or linkable cards
|
||||
- Standard card patterns
|
||||
Reference in New Issue
Block a user