first commit

2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
@@ -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>
+```