first commit

2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
@@ -0,0 +1,118 @@
+# SbContainer
+
+A centered content container with responsive max-width presets and optional gutters.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| MaxWidth | SbContainerMaxWidth | Lg | Maximum width preset for the container |
+| DisableGutters | bool | false | When true, removes horizontal padding |
+| 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 container |
+
+## SbContainerMaxWidth Enum
+
+```csharp
+public enum SbContainerMaxWidth
+{
+    Sm,    // 640px
+    Md,    // 768px
+    Lg,    // 1024px
+    Xl,    // 1280px
+    Xxl,   // 1536px
+    Fluid  // No max-width (full width)
+}
+```
+
+## CSS Classes
+
+- `sb-container` - Base class
+- `sb-container--sm` - Small max-width (640px)
+- `sb-container--md` - Medium max-width (768px)
+- `sb-container--lg` - Large max-width (1024px)
+- `sb-container--xl` - Extra large max-width (1280px)
+- `sb-container--xxl` - 2X large max-width (1536px)
+- `sb-container--fluid` - Full width container
+- `sb-container--no-gutters` - Removes horizontal padding
+
+## Examples
+
+### Basic Usage
+
+```razor
+<SbContainer>
+    <h1>Page Title</h1>
+    <p>Content is centered with a default max-width of 1024px.</p>
+</SbContainer>
+```
+
+### Small Container
+
+```razor
+<SbContainer MaxWidth="SbContainerMaxWidth.Sm">
+    <SbCard>
+        <p>Narrow content area, great for forms.</p>
+    </SbCard>
+</SbContainer>
+```
+
+### Full Width
+
+```razor
+<SbContainer MaxWidth="SbContainerMaxWidth.Fluid">
+    <SbDataGrid Items="@items" />
+</SbContainer>
+```
+
+### Without Gutters
+
+```razor
+<SbContainer DisableGutters="true">
+    <div class="full-bleed-banner">
+        Edge-to-edge content
+    </div>
+</SbContainer>
+```
+
+### Page Layout
+
+Use `SbContainer` inside your layout (e.g. Wish theme layouts use it for main content):
+
+```razor
+<SbContainer MaxWidth="SbContainerMaxWidth.Xl">
+    <SbStack Gap="6">
+        <SbHeading Level="1">Dashboard</SbHeading>
+        <SbGrid Columns="3" Gap="4">
+            <SbStatCard Value="1,234" Label="Users" />
+            <SbStatCard Value="$56K" Label="Revenue" />
+            <SbStatCard Value="89%" Label="Uptime" />
+        </SbGrid>
+        <SbCard>
+            <SbDataGrid Items="@recentOrders" />
+        </SbCard>
+    </SbStack>
+</SbContainer>
+```
+
+### Form Container
+
+```razor
+<SbContainer MaxWidth="SbContainerMaxWidth.Sm">
+    <SbCard>
+        <SbStack Gap="4">
+            <SbHeading Level="2">Sign In</SbHeading>
+            <SbTextField Label="Email" @bind-Value="email" />
+            <SbTextField Label="Password" Type="password" @bind-Value="password" />
+            <SbButton FullWidth="true">Sign In</SbButton>
+        </SbStack>
+    </SbCard>
+</SbContainer>
+```