P11 Blazor UI Library – Bootstrap 5.3 Components

P11Accordion Component

The P11Accordion is a collapsible content container built with Bootstrap 5 and optimized for 100% accessibility compliance.

Note: This component wraps Bootstrap's accordion while enforcing stricter accessibility rules.

Standard Accordion (initially closed)

This is the content of the first accordion item. It is closed by default.

You can place any HTML content here.

This is the content of the second accordion item.

List item 1
List item 2

Implementation

<div class="accordion" id="standardAccordion">
    <P11Accordion ParentId="standardAccordion">
        <Title>
            <span>First Item: Standard</span>
        </Title>
        <ChildContent>
            <p>This is the content of the first accordion item. It is closed by default.</p>
            <p>You can place any HTML content here.</p>
        </ChildContent>
    </P11Accordion>

    <P11Accordion ParentId="standardAccordion">
        <Title>
            <span class="text-success">Second Item: Also Standard</span>
        </Title>
        <ChildContent>
            <p>This is the content of the second accordion item.</p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
            </ul>
        </ChildContent>
    </P11Accordion>
</div>

// Example of how to use P11Accordion in C# code, e.g., in a dynamic component or code-behind.
// In most Blazor applications, you will use it directly in Razor markup as shown above.

// If you were to create it programmatically:
// var accordionItem = new P11Accordion
// {
//     ParentId = "myParentAccordion",
//     IsInitiallyOpen = true,
//     Title = @@Layout.RenderFragment(builder => { builder.OpenElement(0, "span"); builder.AddContent(1, "Programmatic Title"); builder.CloseElement(); }),
//     ChildContent = @@Layout.RenderFragment(builder => { builder.OpenElement(0, "p"); builder.AddContent(1, "This content was added programmatically."); builder.CloseElement(); }),
//     HeaderBackgroundClass = "bg-info",
//     HeaderTextVariant = LabelVariant.White, // Assuming LabelVariant is accessible
//     BodyBackgroundClass = "bg-light"
// };

// Note: Directly instantiating UI components like this is uncommon in Blazor.
// They are primarily designed for declarative use in .razor files.

Accordion with Initially Open Item

This item is initially closed.

This content is visible as soon as the page loads.

Note the IsInitiallyOpen="true" parameter.

Implementation

<div class="accordion" id="openAccordion">
    <P11Accordion ParentId="openAccordion">
        <Title>
            <span class="text-muted">Item 1 (Standard)</span>
        </Title>
        <ChildContent>
            <p>This item is initially closed.</p>
        </ChildContent>
    </P11Accordion>

    <P11Accordion ParentId="openAccordion" IsInitiallyOpen="true">
        <Title>
            <span class="text-danger">Item 2 (Initially Open!)</span>
        </Title>
        <ChildContent>
            <p>This content is visible as soon as the page loads.</p>
            <p>Note the <code>IsInitiallyOpen="true"</code> parameter.</p>
        </ChildContent>
    </P11Accordion>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Accordion with Custom Background and Text Colors (Header & Body)

This accordion header has a dark background and white text.

The body has a secondary (gray) background and white text.

An example with a yellow header and light blue body.

Implementation

<div class="accordion" id="customColorsAccordion">
    <P11Accordion ParentId="customColorsAccordion"
                  HeaderBackgroundClass="bg-dark"
                  HeaderTextVariant="LabelVariant.White"
                  BodyBackgroundClass="bg-secondary text-white"
                  IsInitiallyOpen="true">
        <Title>
            <span class="fw-bold">Dark Header, Light Text, Gray Body</span> 
        </Title>
        <ChildContent>
            <p>This accordion header has a dark background and white text.</p> 
            <p>The body has a secondary (gray) background and white text.</p> 
        </ChildContent>
    </P11Accordion>

    <P11Accordion ParentId="customColorsAccordion"
                  HeaderBackgroundClass="bg-warning"
                  HeaderTextVariant="LabelVariant.Dark"
                  BodyBackgroundClass="bg-info text-dark">
        <Title>
            <span class="fw-bold">Warning Header, Info Body</span>
        </Title>
        <ChildContent>
            <p>An example with a yellow header and light blue body.</p>
        </ChildContent>
    </P11Accordion>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Accordion without ParentId (Standalone Behavior)

These accordions operate independently of each other, as they do not share a common ParentId.

I am an independent accordion. I do not close any other when opened.

I am also an independent accordion.

Implementation

<div class="component-description mt-4">
    <h2 class="mb-3">Accordion without ParentId (Standalone Behavior)</h2> 
    <p>These accordions operate independently of each other, as they do not share a common <code>ParentId</code>.</p> 

    <P11Accordion CssClass="mb-3 border border-primary p-2" IsInitiallyOpen="true">
        <Title>
            <span>Standalone Accordion 1</span> 
        </Title>
        <ChildContent>
            <p>I am an independent accordion. I do not close any other when opened.</p>
        </ChildContent>
    </P11Accordion>

    <P11Accordion CssClass="mb-3 border border-secondary p-2">
        <Title>
            <span>Standalone Accordion 2</span>
        </Title>
        <ChildContent>
            <p>I am also an independent accordion.</p>
        </ChildContent>
    </P11Accordion>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Accordion with Additional Attributes

This accordion item has a custom data attribute and an inline style applied to its root element.

Implementation

<div class="accordion" id="additionalAttributesAccordion">
    <P11Accordion ParentId="additionalAttributesAccordion"
                  data-custom-attribute="my-value"
                  style="border: 2px dashed green;">
        <Title>
            <span>Accordion with Additional Attributes</span>
        </Title>
        <ChildContent>
            <p>This accordion item has a custom data attribute and an inline style applied to its root element.</p>
        </ChildContent>
    </P11Accordion>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Component API

Parameter	Type	Default	Description
`CssClass`	`string?`	`null`	Additional CSS class names to apply to the root `accordion-item` element.
`IsInitiallyOpen`	`bool`	`false`	Sets whether this accordion item should be expanded initially when rendered.
`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`.
`BodyBackgroundClass`	`string?`	`null`	A Bootstrap background utility class (e.g., 'bg-light', 'bg-white') for the accordion body.
`ParentId`	`string?`	`null`	The ID of the parent accordion container. Enables 'one-open-at-a-time' behavior.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Captures un-matched attributes passed to the component, applied to the root `accordion-item`.