sufi-chain/sufi-blazor
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Pooria Shariatzadeh
2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/layout/SbGridItem.md
+123
View File
@@ -0,0 +1,123 @@
# SbGridItem
A child component of SbGrid that spans a specified number of columns with responsive breakpoint support.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Span | int | 1 | Number of columns this item spans (1-12) |
| SpanSm | int? | null | Column span at small breakpoint (640px+) |
| SpanMd | int? | null | Column span at medium breakpoint (768px+) |
| SpanLg | int? | null | Column span at large breakpoint (1024px+) |
| SpanXl | int? | null | Column span at extra large breakpoint (1280px+) |
| 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 | Content to render inside the grid item |
## CSS Classes
- `sb-grid-item` - Base class
- `sb-grid-item--sm-{n}` - Small breakpoint span
- `sb-grid-item--md-{n}` - Medium breakpoint span
- `sb-grid-item--lg-{n}` - Large breakpoint span
- `sb-grid-item--xl-{n}` - Extra large breakpoint span
## CSS Variables
- `--sb-grid-span` - Number of columns to span
## Examples
### Basic Usage
```razor
<SbGrid Columns="12">
<SbGridItem Span="6">Half width</SbGridItem>
<SbGridItem Span="6">Half width</SbGridItem>
</SbGrid>
```
### Responsive Span
```razor
<SbGrid Columns="12">
<SbGridItem Span="12" SpanMd="6" SpanLg="4">
<SbCard>Responsive Card</SbCard>
</SbGridItem>
</SbGrid>
```
### Full Width Header
```razor
<SbGrid Columns="12" Gap="4">
<SbGridItem Span="12">
<h1>Page Title</h1>
</SbGridItem>
<SbGridItem Span="8">
<SbCard>Main Content</SbCard>
</SbGridItem>
<SbGridItem Span="4">
<SbCard>Sidebar</SbCard>
</SbGridItem>
</SbGrid>
```
### Mixed Column Widths
```razor
<SbGrid Columns="12" Gap="4">
<SbGridItem Span="4">
<SbCard>1/3 width</SbCard>
</SbGridItem>
<SbGridItem Span="8">
<SbCard>2/3 width</SbCard>
</SbGridItem>
<SbGridItem Span="3">
<SbCard>1/4 width</SbCard>
</SbGridItem>
<SbGridItem Span="3">
<SbCard>1/4 width</SbCard>
</SbGridItem>
<SbGridItem Span="6">
<SbCard>1/2 width</SbCard>
</SbGridItem>
</SbGrid>
```
### Responsive Dashboard
```razor
<SbGrid Columns="12" Gap="4">
@* Stats row - 4 columns on large, 2 on medium, 1 on small *@
<SbGridItem Span="12" SpanMd="6" SpanLg="3">
<SbStatCard Value="1,234" Label="Users" />
</SbGridItem>
<SbGridItem Span="12" SpanMd="6" SpanLg="3">
<SbStatCard Value="$56K" Label="Revenue" />
</SbGridItem>
<SbGridItem Span="12" SpanMd="6" SpanLg="3">
<SbStatCard Value="89%" Label="Uptime" />
</SbGridItem>
<SbGridItem Span="12" SpanMd="6" SpanLg="3">
<SbStatCard Value="42" Label="Orders" />
</SbGridItem>
@* Chart - full width on small, 2/3 on large *@
<SbGridItem Span="12" SpanLg="8">
<SbCard>Chart Area</SbCard>
</SbGridItem>
@* Activity feed - full width on small, 1/3 on large *@
<SbGridItem Span="12" SpanLg="4">
<SbCard>Activity Feed</SbCard>
</SbGridItem>
</SbGrid>
```