Panel

The Panel component family helps you build compact control panels with headings, tabs, blocks, and icon slots using Bulma markup.

API Documentation

How it works #

The Panel component family mirrors Bulma's compact control panel structure so you can compose headings, filter tabs, interactive blocks, and icons without manually stitching together the CSS classes.

How to use:
  1. Wrap the overall layout in <Panel>.
  2. Add a <PanelHeading> as the title row.
  3. Use <PanelTabs> with one or more <PanelTab> elements when you need compact filters.
  4. Fill the body with <PanelBlock> entries and use <PanelIcon> when a block needs an icon slot.
This first example follows Bulma's reference layout with a search control, filter tabs, active list items, a checkbox label block, and a footer action. 
<Panel style="max-width: 24rem;">
    <PanelHeading>Repositories</PanelHeading>

    <PanelBlock>
        <p class="control has-icons-left">
            <input class="input" type="text" placeholder="Search" />
            <span class="icon is-left">
                <i class="bi bi-search" aria-hidden="true"></i>
            </span>
        </p>
    </PanelBlock>

    <PanelTabs>
        <PanelTab IsActive="true">All</PanelTab>
        <PanelTab>Public</PanelTab>
        <PanelTab>Private</PanelTab>
        <PanelTab>Forks</PanelTab>
    </PanelTabs>

    <PanelBlock Href="https://github.com/BlazorExpress/BlazorExpress.Bulma" IsActive="true">
        <PanelIcon>
            <i class="bi bi-book" aria-hidden="true"></i>
        </PanelIcon>
        BlazorExpress.Bulma
    </PanelBlock>

    <PanelBlock Href="https://bulma.blazorexpress.com/docs/">
        <PanelIcon>
            <i class="bi bi-journal-text" aria-hidden="true"></i>
        </PanelIcon>
        Documentation site
    </PanelBlock>

    <PanelBlock Href="https://bulma.blazorexpress.com/demos/">
        <PanelIcon>
            <i class="bi bi-window" aria-hidden="true"></i>
        </PanelIcon>
        Component demos
    </PanelBlock>

    <PanelBlock IsLabel="true">
        <input type="checkbox" />
        <span class="ml-2">remember me</span>
    </PanelBlock>

    <PanelBlock>
        <button class="button is-link is-outlined is-fullwidth">Reset all filters</button>
    </PanelBlock>
</Panel>

Active state #

PanelTab and PanelBlock expose an IsActive parameter so you can highlight the current selection inside the panel.

How to use:
  1. Set IsActive="true" on the current PanelTab to highlight the selected filter.
  2. Set IsActive="true" on the current PanelBlock to highlight the active item in the body of the panel.
  3. Keep the rest of the tabs and blocks inactive so the current selection stays visually clear.
This example shows one active tab and one active block inside a neutral panel. 
<Panel style="max-width: 24rem;">
    <PanelHeading>Source Type</PanelHeading>

    <PanelTabs>
        <PanelTab IsActive="true">All</PanelTab>
        <PanelTab>Public</PanelTab>
        <PanelTab>Private</PanelTab>
        <PanelTab>Archived</PanelTab>
    </PanelTabs>

    <PanelBlock Href="https://github.com/BlazorExpress/BlazorExpress.Bulma/issues/43" IsActive="true">
        <PanelIcon>
            <i class="bi bi-pin-angle" aria-hidden="true"></i>
        </PanelIcon>
        Panel component issue
    </PanelBlock>

    <PanelBlock Href="https://bulma.io/documentation/components/panel/">
        <PanelIcon>
            <i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>
        </PanelIcon>
        Bulma specification
    </PanelBlock>

    <PanelBlock Href="@DemoRouteConstants.Docs_Panel_Documentation">
        <PanelIcon>
            <i class="bi bi-code-square" aria-hidden="true"></i>
        </PanelIcon>
        API documentation
    </PanelBlock>
</Panel>

Colors #

The Panel component supports the same main Bulma color modifiers shown in the panel documentation, which makes it easy to align the panel's emphasis with the rest of your UI.

How to use:
  1. Set the Color parameter on Panel to one of the supported values such as PanelColor.Link, PanelColor.Primary, PanelColor.Info, PanelColor.Success, PanelColor.Warning, or PanelColor.Danger.
  2. Keep the internal structure the same with PanelHeading, optional PanelTabs, and one or more PanelBlock entries.
  3. Use active tabs or blocks as needed to reinforce the currently selected item inside each color variant.
The following demos show the main Bulma panel color variants side by side as individually linkable examples. 
<Panel Color="PanelColor.Link" style="max-width: 24rem;">
    <PanelHeading>Link</PanelHeading>
    <PanelTabs>
        <PanelTab IsActive="true">All</PanelTab>
        <PanelTab>Open</PanelTab>
        <PanelTab>Closed</PanelTab>
    </PanelTabs>
    <PanelBlock Href="https://bulma.io/documentation/components/panel/" IsActive="true">
        <PanelIcon><i class="bi bi-book" aria-hidden="true"></i></PanelIcon>
        Bulma panel docs
    </PanelBlock>
    <PanelBlock Href="@DemoRouteConstants.Docs_Panel_Documentation">
        <PanelIcon><i class="bi bi-code-square" aria-hidden="true"></i></PanelIcon>
        View API docs
    </PanelBlock>
</Panel>
This example uses the Primary color to create a strong, branded panel treatment. 
<Panel Color="PanelColor.Primary" style="max-width: 24rem;">
    <PanelHeading>Primary</PanelHeading>
    <PanelTabs>
        <PanelTab IsActive="true">Overview</PanelTab>
        <PanelTab>Recent</PanelTab>
        <PanelTab>Saved</PanelTab>
    </PanelTabs>
    <PanelBlock Href="https://github.com/BlazorExpress/BlazorExpress.Bulma/issues/43" IsActive="true">
        <PanelIcon><i class="bi bi-pin-angle" aria-hidden="true"></i></PanelIcon>
        Panel issue
    </PanelBlock>
    <PanelBlock Href="@DemoRouteConstants.Demos_Panel_Documentation">
        <PanelIcon><i class="bi bi-window" aria-hidden="true"></i></PanelIcon>
        View demos
    </PanelBlock>
</Panel>
This example uses the Info color for status-oriented or informational panels. 
<Panel Color="PanelColor.Info" style="max-width: 24rem;">
    <PanelHeading>Info</PanelHeading>
    <PanelTabs>
        <PanelTab IsActive="true">Status</PanelTab>
        <PanelTab>Builds</PanelTab>
        <PanelTab>Logs</PanelTab>
    </PanelTabs>
    <PanelBlock IsActive="true">
        <PanelIcon><i class="bi bi-info-circle" aria-hidden="true"></i></PanelIcon>
        Informational panel styling
    </PanelBlock>
    <PanelBlock>
        <PanelIcon><i class="bi bi-list-check" aria-hidden="true"></i></PanelIcon>
        Great for operational summaries
    </PanelBlock>
</Panel>
This example uses the Success color for completed, healthy, or approved states. 
<Panel Color="PanelColor.Success" style="max-width: 24rem;">
    <PanelHeading>Success</PanelHeading>
    <PanelTabs>
        <PanelTab IsActive="true">Passed</PanelTab>
        <PanelTab>Queued</PanelTab>
        <PanelTab>Skipped</PanelTab>
    </PanelTabs>
    <PanelBlock IsActive="true">
        <PanelIcon><i class="bi bi-check-circle" aria-hidden="true"></i></PanelIcon>
        Validation checks passed
    </PanelBlock>
    <PanelBlock>
        <PanelIcon><i class="bi bi-box-seam" aria-hidden="true"></i></PanelIcon>
        Package is ready to publish
    </PanelBlock>
</Panel>
This example uses the Warning color for cautionary or pending states. 
<Panel Color="PanelColor.Warning" style="max-width: 24rem;">
    <PanelHeading>Warning</PanelHeading>
    <PanelTabs>
        <PanelTab IsActive="true">Attention</PanelTab>
        <PanelTab>Pending</PanelTab>
        <PanelTab>Later</PanelTab>
    </PanelTabs>
    <PanelBlock IsActive="true">
        <PanelIcon><i class="bi bi-exclamation-triangle" aria-hidden="true"></i></PanelIcon>
        Check incomplete configuration
    </PanelBlock>
    <PanelBlock>
        <PanelIcon><i class="bi bi-hourglass-split" aria-hidden="true"></i></PanelIcon>
        Review before continuing
    </PanelBlock>
</Panel>
This example uses the Danger color for errors, blockers, or critical states. 
<Panel Color="PanelColor.Danger" style="max-width: 24rem;">
    <PanelHeading>Danger</PanelHeading>
    <PanelTabs>
        <PanelTab IsActive="true">Errors</PanelTab>
        <PanelTab>Alerts</PanelTab>
        <PanelTab>Blocked</PanelTab>
    </PanelTabs>
    <PanelBlock IsActive="true">
        <PanelIcon><i class="bi bi-x-octagon" aria-hidden="true"></i></PanelIcon>
        Critical issue detected
    </PanelBlock>
    <PanelBlock>
        <PanelIcon><i class="bi bi-bug" aria-hidden="true"></i></PanelIcon>
        Resolve blockers before release
    </PanelBlock>
</Panel>

Block rendering #

PanelBlock can render in three useful ways without requiring separate components for each case.

What to expect:
  1. Without extra parameters, PanelBlock renders a div.
  2. When Href is set, it renders an anchor block for navigable items.
  3. When IsLabel="true" is set and Href is not provided, it renders a label block that works well for checkboxes and toggles.
This demo shows all three rendering modes in one compact panel. 
<Panel style="max-width: 24rem;">
    <PanelHeading>Mixed block rendering</PanelHeading>

    <PanelBlock>
        <div>
            <p class="has-text-weight-semibold mb-2">Search block</p>
            <input class="input" type="text" placeholder="Filter components" />
        </div>
    </PanelBlock>

    <PanelBlock IsLabel="true">
        <input type="checkbox" checked />
        <span class="ml-2">Include prerelease packages</span>
    </PanelBlock>

    <PanelBlock Href="https://www.nuget.org/packages/BlazorExpress.Bulma">
        <PanelIcon>
            <i class="bi bi-box-seam" aria-hidden="true"></i>
        </PanelIcon>
        View package on NuGet
    </PanelBlock>
</Panel>
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!