p11 UI
true-perfect-code
Version: 1.1.69

P11AccordionPanel Component

The P11AccordionPanel is an advanced accordion component that transforms the header into a flexible panel. This allows for rich content, such as icons, status indicators, and additional text, alongside a dedicated toggle button. It's built with Bootstrap 5 and is fully accessibility compliant.

Accordion Panel

Accordion panel with the open button on the left

Dashboard Overview Settings

General metrics, charts, and summaries go here.

Accordion panel with the closed button on the right

Notifications 3 User Information Active

You have 3 new notifications.

Hide Accordion toggle button

Notifications 3 User Information Active

You have 3 new notifications.

Accordion panel with a header sub-area, event check and binding

Customer data: Hans Mustermann
This is sub-area
Active


Street: Musterstraße 123

Postal code/City: 12345 Musterstadt

E-Mail: hans.mustermann@example.com

Accordion State:

Is Expanded: True

Accordion panel with sub-area but no header

Customer data: Hans Mustermann
This is sub-area
Active


Street: Musterstraße 123

Postal code/City: 12345 Musterstadt

E-Mail: hans.mustermann@example.com

Implementation

<h2 class="mb-3">@AppState!.T("Accordion Panel")</h2>

<div class="card p-3 m-3">
    <p>Accordion panel with the open button on the left</p>
    <P11AccordionPanel CssClass="mb-2"
                       IsInitiallyOpen="true"
                       ToggleButtonPosition="IconPosition.Start"
                       HeaderBackgroundClass="bg-primary"
                       HeaderTextVariant="LabelVariant.White" >
        <HeaderContent>
            <span class="fw-bold">Dashboard Overview</span>

            <i class="bi bi-gear-fill me-2"></i>
            <span class="fw-bold">Settings</span>
            <button class="btn btn-sm">Save</button>
        </HeaderContent>
        <ChildContent>
            <p>General metrics, charts, and summaries go here.</p>
        </ChildContent>
    </P11AccordionPanel>
</div>

<div class="card p-3 m-3">
    <p>Accordion panel with the closed button on the right</p>

    <P11AccordionPanel CssClass="mb-2"
                       IsInitiallyOpen="false"
                       ToggleButtonPosition="IconPosition.End" >
        <HeaderContent>
            <span class="fw-bold">Notifications</span>
            <span class="badge bg-warning text-dark ms-2">3</span>

            <span class="fw-bold me-2">User Information</span>
            <span class="badge bg-primary">Active</span>
            <button class="btn btn-sm btn-outline-secondary ms-2">Edit</button>
        </HeaderContent>
        <ChildContent>
            <p>You have 3 new notifications.</p>
        </ChildContent>
    </P11AccordionPanel>
</div>

<div class="card p-3 m-3">
    <p>Hide Accordion toggle button</p>

    <P11AccordionPanel CssClass="mb-2"
                       ToggleButtonHide="true">
        <HeaderContent>
            <span class="fw-bold">Notifications</span>
            <span class="badge bg-warning text-dark ms-2">3</span>

            <span class="fw-bold me-2">User Information</span>
            <span class="badge bg-primary">Active</span>
            <button class="btn btn-sm btn-outline-secondary ms-2">Edit</button>
        </HeaderContent>
        <ChildContent>
            <p>You have 3 new notifications.</p>
        </ChildContent>
    </P11AccordionPanel>
</div>

<div class="card p-3 m-3">
    <p>Accordion panel with a header sub-area, event check and binding</p>

    <P11AccordionPanel LabelTypography="LabelTypography.H2" CssClassHeaderSubContent="fs-6 fw-normal"
                       OnAccordionOpened="AccordionOpened" @bind-IsExpanded="@_isExpanded"
                       OnAccordionToggled="(isExpanded) => AccordionToggled(isExpanded)">

        <HeaderContent>
            <span class="text-primary fw-bold">Customer data: </span> Hans Mustermann
        </HeaderContent>

        <HeaderSubContent >
            <div>This is sub-area</div>
            <div class="card">
                <div class="card-body">
                    <div class="d-flex gap-2">
                        <span class="badge bg-success">Active</span>
                        <P11Button Text="Primary Button" ButtonVariant="ButtonVariant.Primary" />
                        <P11Button Text="Secondary Button" ButtonVariant="ButtonVariant.Secondary" />
                    </div>
                </div>
            </div>
        </HeaderSubContent>

        <ChildContent>
            <br />
            <p>Street: Musterstraße 123</p>
            <p>Postal code/City: 12345 Musterstadt</p>
            <p>E-Mail: hans.mustermann@example.com</p>
        </ChildContent>

    </P11AccordionPanel>

    <hr />
    <div class="mt-3">
        <strong>Accordion State:</strong>
        <p>Is Expanded: @_isExpanded</p>
    </div>
</div>

<div class="card p-3 m-3">
    <p>Accordion panel with  sub-area but no header</p>

    <P11AccordionPanel LabelTypography="LabelTypography.H2" CssClassHeaderSubContent="fs-6 fw-normal"
                       OnAccordionOpened="AccordionOpened" @bind-IsExpanded="@_isExpanded2" HeaderHide="true"
                       OnAccordionToggled="(isExpanded) => AccordionToggled(isExpanded)">

        <HeaderContent>
            <span class="text-primary fw-bold">Customer data: </span> Hans Mustermann
        </HeaderContent>

        <HeaderSubContent>
            <P11Button Text="Open Child Content" OnClick="() => _isExpanded2 = !_isExpanded2" ButtonVariant="ButtonVariant.Primary" />
            <div>This is sub-area</div>
            <div class="card">
                <div class="card-body">
                    <div class="d-flex gap-2">
                        <span class="badge bg-success">Active</span>
                        <P11Button Text="Primary Button" ButtonVariant="ButtonVariant.Primary" />
                        <P11Button Text="Secondary Button" ButtonVariant="ButtonVariant.Secondary" />
                    </div>
                </div>
            </div>
        </HeaderSubContent>

        <ChildContent>
            <br />
            <p>Street: Musterstraße 123</p>
            <p>Postal code/City: 12345 Musterstadt</p>
            <p>E-Mail: hans.mustermann@example.com</p>
        </ChildContent>

    </P11AccordionPanel>
</div>
@code{

    bool _isExpanded = false;
    bool _isExpanded2 = false;

    void AccordionOpened()
    {
        _isExpanded = true;
    }

    void AccordionToggled(bool isExpanded)
    {
        _isExpanded = isExpanded;
    }
}

Component API

Parameter Type Default Description
CssClass string? null Additional CSS class names to apply to the root accordion-item element.
CssClassHeaderSubContent string? null Additional CSS class names to apply to the accordion sub-header area.
LabelTypography LabelTypography? H2 Gets or sets the typography style for the header label, applying Bootstrap's text utility classes. If not set (null), H2 specific typography class is applied.
AriaLabel string? null An ARIA label for accessibility, providing a descriptive name for toggle button.
IsInitiallyOpen bool false Sets whether this accordion item should be expanded initially when rendered.
HeaderHide bool false Hide the accordion header so that the header-area can no longer be made visible. The child content can be open only via binding bind-IsExpanded.
ToggleButtonHide bool false Hide the accordion switch button so that the subarea can no longer be made visible. Accordion is then only a panel component.
Title RenderFragment? null The content to display in the accordion header. This allows for rich content.
ChildContent RenderFragment? null The main content to be displayed within the collapsible accordion body.
HeaderBackgroundClass string? null A Bootstrap background utility class (e.g., 'bg-primary', 'bg-dark') for the accordion header.
HeaderTextVariant LabelVariant LabelVariant.Black Explicitly sets the text color variant for the header. If not set, it's derived from HeaderBackgroundClass.
ToggleButtonPosition IconPosition IconPosition.End Explicitly sets the toggle button position on header. Default position of button is on the end of header.
BodyBackgroundClass string? null A Bootstrap background utility class (e.g., 'bg-light', 'bg-white') for the accordion body.
AdditionalAttributes Dictionary<string, object>? null Captures un-matched attributes passed to the component, applied to the root accordion-item.
Events
OnAccordionOpened EventCallback - An EventCallback that is invoked when the accordion is opened clicking button.
OnAccordionTriggeredOpened EventCallback - An EventCallback that is invoked when the accordion is opened setting binding bind-IsExpanded.
OnAccordionToggled EventCallback<bool> - An EventCallback that is invoked when the accordion toggled is changed.
An unhandled error has occurred. Reload 🗙