169 lines
4.1 KiB
Markdown
169 lines
4.1 KiB
Markdown
# 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
|