first commit
This commit is contained in:
@@ -0,0 +1,195 @@
|
||||
# SbAccordionItem
|
||||
|
||||
A single collapsible item used within SbAccordion.
|
||||
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| Title | string | "" | Item title displayed in the header |
|
||||
| Disabled | bool | false | Whether the item is disabled |
|
||||
| DefaultExpanded | bool | false | Whether the item is initially expanded |
|
||||
|
||||
## Templates / Slots
|
||||
|
||||
| Slot | Type | Description |
|
||||
|------|------|-------------|
|
||||
| Icon | RenderFragment | Icon displayed before the title |
|
||||
| Subtitle | RenderFragment | Subtitle displayed below the title (stacked vertically in the header) |
|
||||
| ChildContent | RenderFragment | Collapsible content |
|
||||
|
||||
## Cascading Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| Parent | SbAccordion | Parent accordion container |
|
||||
|
||||
## CSS Classes
|
||||
|
||||
- `sb-accordion-item` - Base class
|
||||
- `sb-accordion-item--expanded` - When item is expanded
|
||||
- `sb-accordion-item--disabled` - When item is disabled
|
||||
- `sb-accordion-item__header` - Header button
|
||||
- `sb-accordion-item__header-start` - Header start section
|
||||
- `sb-accordion-item__icon` - Icon container
|
||||
- `sb-accordion-item__title` - Title text
|
||||
- `sb-accordion-item__subtitle` - Subtitle text
|
||||
- `sb-accordion-item__chevron` - Expand/collapse indicator
|
||||
- `sb-accordion-item__content` - Content wrapper
|
||||
- `sb-accordion-item__content--expanded` - Expanded content
|
||||
- `sb-accordion-item__body` - Inner content container
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Uses `aria-expanded` to indicate expansion state
|
||||
- Uses `aria-controls` to link button to content
|
||||
- Content uses `hidden` attribute when collapsed
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```razor
|
||||
<SbAccordion>
|
||||
<SbAccordionItem Title="Click to expand">
|
||||
<p>This content is revealed when expanded.</p>
|
||||
</SbAccordionItem>
|
||||
</SbAccordion>
|
||||
```
|
||||
|
||||
### Initially Expanded
|
||||
|
||||
```razor
|
||||
<SbAccordion>
|
||||
<SbAccordionItem Title="Important Information" DefaultExpanded="true">
|
||||
<p>This content is visible by default.</p>
|
||||
</SbAccordionItem>
|
||||
<SbAccordionItem Title="Additional Details">
|
||||
<p>This is collapsed by default.</p>
|
||||
</SbAccordionItem>
|
||||
</SbAccordion>
|
||||
```
|
||||
|
||||
### With Icon
|
||||
|
||||
```razor
|
||||
<SbAccordionItem Title="Account Settings">
|
||||
<Icon>
|
||||
<SbIcon Name="user" Size="SbSize.Sm" />
|
||||
</Icon>
|
||||
<ChildContent>
|
||||
<SbTextField Label="Display Name" />
|
||||
<SbTextField Label="Email" />
|
||||
</ChildContent>
|
||||
</SbAccordionItem>
|
||||
```
|
||||
|
||||
### With Subtitle
|
||||
|
||||
```razor
|
||||
<SbAccordionItem Title="Payment Method">
|
||||
<Subtitle>
|
||||
<SbText Size="sm" Color="muted">Visa ending in 4242</SbText>
|
||||
</Subtitle>
|
||||
<ChildContent>
|
||||
<SbButton>Update Payment Method</SbButton>
|
||||
</ChildContent>
|
||||
</SbAccordionItem>
|
||||
```
|
||||
|
||||
### Disabled Item
|
||||
|
||||
```razor
|
||||
<SbAccordion>
|
||||
<SbAccordionItem Title="Free Plan">
|
||||
<p>Basic features included.</p>
|
||||
</SbAccordionItem>
|
||||
<SbAccordionItem Title="Premium Features" Disabled="@(!isPremium)">
|
||||
<Subtitle>
|
||||
<SbText Size="sm" Color="muted">Requires premium subscription</SbText>
|
||||
</Subtitle>
|
||||
<ChildContent>
|
||||
<p>Advanced features content...</p>
|
||||
</ChildContent>
|
||||
</SbAccordionItem>
|
||||
</SbAccordion>
|
||||
|
||||
@code {
|
||||
private bool isPremium = false;
|
||||
}
|
||||
```
|
||||
|
||||
### Complex Content
|
||||
|
||||
```razor
|
||||
<SbAccordionItem Title="Order Details">
|
||||
<Icon><SbIcon Name="shopping-cart" /></Icon>
|
||||
<Subtitle>
|
||||
<SbStack Direction="SbStackDirection.Row" Gap="2">
|
||||
<SbBadge>3 items</SbBadge>
|
||||
<SbText Size="sm">$129.99</SbText>
|
||||
</SbStack>
|
||||
</Subtitle>
|
||||
<ChildContent>
|
||||
<SbTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Qty</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var item in orderItems)
|
||||
{
|
||||
<tr>
|
||||
<td>@item.Name</td>
|
||||
<td>@item.Quantity</td>
|
||||
<td>@item.Price.ToString("C")</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</SbTable>
|
||||
</ChildContent>
|
||||
</SbAccordionItem>
|
||||
```
|
||||
|
||||
### Settings Panel
|
||||
|
||||
```razor
|
||||
<SbAccordion Multiple="true">
|
||||
<SbAccordionItem Title="General" DefaultExpanded="true">
|
||||
<Icon><SbIcon Name="settings" /></Icon>
|
||||
<ChildContent>
|
||||
<SbStack Gap="3">
|
||||
<SbTextField Label="Site Name" @bind-Value="siteName" />
|
||||
<SbTextField Label="Site URL" @bind-Value="siteUrl" />
|
||||
<SbSelect Label="Language" @bind-Value="language">
|
||||
<SbSelectOption Value="en">English</SbSelectOption>
|
||||
<SbSelectOption Value="es">Spanish</SbSelectOption>
|
||||
</SbSelect>
|
||||
</SbStack>
|
||||
</ChildContent>
|
||||
</SbAccordionItem>
|
||||
|
||||
<SbAccordionItem Title="Appearance">
|
||||
<Icon><SbIcon Name="palette" /></Icon>
|
||||
<ChildContent>
|
||||
<SbStack Gap="3">
|
||||
<SbColorPicker Label="Primary Color" @bind-Value="primaryColor" />
|
||||
<SbSwitch Label="Dark Mode" @bind-Value="darkMode" />
|
||||
</SbStack>
|
||||
</ChildContent>
|
||||
</SbAccordionItem>
|
||||
|
||||
<SbAccordionItem Title="Advanced">
|
||||
<Icon><SbIcon Name="code" /></Icon>
|
||||
<Subtitle>
|
||||
<SbText Size="xs" Color="warning">For developers only</SbText>
|
||||
</Subtitle>
|
||||
<ChildContent>
|
||||
<SbTextArea Label="Custom CSS" @bind-Value="customCss" Rows="10" />
|
||||
</ChildContent>
|
||||
</SbAccordionItem>
|
||||
</SbAccordion>
|
||||
```
|
||||
Reference in New Issue
Block a user