sufi-blazor/docs/components/navigation/SbAccordionItem.md

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

<SbAccordion>
    <SbAccordionItem Title="Click to expand">
        <p>This content is revealed when expanded.</p>
    </SbAccordionItem>
</SbAccordion>

Initially Expanded

<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

<SbAccordionItem Title="Account Settings">
    <Icon>
        <SbIcon Name="user" Size="SbSize.Sm" />
    </Icon>
    <ChildContent>
        <SbTextField Label="Display Name" />
        <SbTextField Label="Email" />
    </ChildContent>
</SbAccordionItem>

With Subtitle

<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

<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

<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

<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>