116 lines
3.0 KiB
Markdown
116 lines
3.0 KiB
Markdown
# SbGrid
|
|
|
|
A responsive CSS Grid layout component with configurable columns and breakpoints.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Columns | int | 12 | Number of columns (base/mobile-first value) |
|
|
| ColumnsSm | int? | null | Number of columns at sm breakpoint (640px+) |
|
|
| ColumnsMd | int? | null | Number of columns at md breakpoint (768px+) |
|
|
| ColumnsLg | int? | null | Number of columns at lg breakpoint (1024px+) |
|
|
| ColumnsXl | int? | null | Number of columns at xl breakpoint (1280px+) |
|
|
| Gap | int | 4 | Gap between grid items (uses spacing scale 0-16) |
|
|
| RowGap | int? | null | Row gap if different from Gap |
|
|
| ColumnGap | int? | null | Column gap if different from Gap |
|
|
| 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 | Grid items (typically SbGridItem components) |
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-grid` - Base class
|
|
- `sb-grid--sm-{n}` - Small breakpoint columns
|
|
- `sb-grid--md-{n}` - Medium breakpoint columns
|
|
- `sb-grid--lg-{n}` - Large breakpoint columns
|
|
- `sb-grid--xl-{n}` - Extra large breakpoint columns
|
|
|
|
## CSS Variables
|
|
|
|
- `--sb-grid-columns` - Number of grid columns
|
|
|
|
## Examples
|
|
|
|
### Basic 3-Column Grid
|
|
|
|
```razor
|
|
<SbGrid Columns="3" Gap="4">
|
|
<SbCard>Card 1</SbCard>
|
|
<SbCard>Card 2</SbCard>
|
|
<SbCard>Card 3</SbCard>
|
|
</SbGrid>
|
|
```
|
|
|
|
### Responsive Grid
|
|
|
|
```razor
|
|
<SbGrid Columns="1" ColumnsSm="2" ColumnsMd="3" ColumnsLg="4" Gap="4">
|
|
@foreach (var item in items)
|
|
{
|
|
<SbCard>@item.Name</SbCard>
|
|
}
|
|
</SbGrid>
|
|
```
|
|
|
|
### Dashboard Layout
|
|
|
|
```razor
|
|
<SbGrid Columns="12" Gap="4">
|
|
<SbGridItem Span="12">
|
|
<SbCard>Header Section</SbCard>
|
|
</SbGridItem>
|
|
<SbGridItem Span="8">
|
|
<SbCard>Main Content</SbCard>
|
|
</SbGridItem>
|
|
<SbGridItem Span="4">
|
|
<SbCard>Sidebar</SbCard>
|
|
</SbGridItem>
|
|
</SbGrid>
|
|
```
|
|
|
|
### Stats Grid
|
|
|
|
```razor
|
|
<SbGrid Columns="4" Gap="4">
|
|
<SbStatCard Value="1,234" Label="Users" Icon="users" />
|
|
<SbStatCard Value="$56K" Label="Revenue" Icon="dollar-sign" />
|
|
<SbStatCard Value="89%" Label="Uptime" Icon="activity" />
|
|
<SbStatCard Value="42" Label="Orders" Icon="shopping-cart" />
|
|
</SbGrid>
|
|
```
|
|
|
|
### Different Row and Column Gaps
|
|
|
|
```razor
|
|
<SbGrid Columns="3" RowGap="6" ColumnGap="4">
|
|
<div>Item 1</div>
|
|
<div>Item 2</div>
|
|
<div>Item 3</div>
|
|
<div>Item 4</div>
|
|
<div>Item 5</div>
|
|
<div>Item 6</div>
|
|
</SbGrid>
|
|
```
|
|
|
|
### Form Grid
|
|
|
|
```razor
|
|
<SbGrid Columns="2" Gap="4">
|
|
<SbTextField Label="First Name" @bind-Value="firstName" />
|
|
<SbTextField Label="Last Name" @bind-Value="lastName" />
|
|
<SbGridItem Span="2">
|
|
<SbTextField Label="Email" @bind-Value="email" />
|
|
</SbGridItem>
|
|
<SbGridItem Span="2">
|
|
<SbTextArea Label="Address" @bind-Value="address" />
|
|
</SbGridItem>
|
|
</SbGrid>
|
|
```
|