OsirionTabs

OsirionTabs shows one of several panels at a time, with a row of tabs to switch between them. Use it for alternative versions of the same content, such as one install command per package manager. The tabs switch without script, so they work under static server-side rendering.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub. Available from 4.0.

dotnet add package Osirion.Blazor

<PackageReference Include="Osirion.Blazor" />

@using Osirion.Blazor.Components

<OsirionTabs AriaLabel="Install command">
    <OsirionTab Title=".NET CLI">
        <pre><code>dotnet add package Osirion.Blazor</code></pre>
    </OsirionTab>
    <OsirionTab Title="PackageReference">
        <pre><code>&lt;PackageReference Include="Osirion.Blazor" /&gt;</code></pre>
    </OsirionTab>
</OsirionTabs>

Usage

@using Osirion.Blazor.Components

<OsirionTabs AriaLabel="Install command">
    <OsirionTab Title=".NET CLI">
        <pre><code>dotnet add package Osirion.Blazor</code></pre>
    </OsirionTab>
    <OsirionTab Title="Package Manager">
        <pre><code>Install-Package Osirion.Blazor</code></pre>
    </OsirionTab>
</OsirionTabs>

The first tab is selected when the page renders. To start on another one and give the ids a stable prefix:

<OsirionTabs AriaLabel="Install command" Id="install" SelectedIndex="2">
    <OsirionTab Title=".NET CLI">
        <pre><code>dotnet add package Osirion.Blazor</code></pre>
    </OsirionTab>
    <OsirionTab Title="Package Manager">
        <pre><code>Install-Package Osirion.Blazor</code></pre>
    </OsirionTab>
    <OsirionTab Title="PackageReference">
        <pre><code>&lt;PackageReference Include="Osirion.Blazor" Version="4.0.0" /&gt;</code></pre>
    </OsirionTab>
</OsirionTabs>

With Id="install", the third tab's radio button is install-2, its label install-2-label and its panel install-2-panel.

Parameters

OsirionTabs

Unmatched attributes go on the container <div>. Class is added to the container. Style is accepted but the component does not write it.

OsirionTab

Unmatched attributes and Class go on the panel <div>. Style is accepted but the component does not write it.

Behavior

• Each OsirionTab renders a radio button, its <label> and its panel. The radio buttons share one group name, and CSS shows the panel that follows the checked one. No script runs, in static SSR or in an interactive render mode.
• Keyboard: Tab moves focus into the group and the arrow keys move between tabs, which is the native radio button behavior. The radio button itself is visually hidden; its label shows a focus ring.
• Screen readers announce each tab as a radio button with its position ("2 of 3"). Each panel has role="region" and is labelled by its tab's label. The container has role="group" with AriaLabel as its name, so set AriaLabel to describe the choice.
• Tabs take their index in the order they first render. Ids stay the same when the parent renders again.
• Two OsirionTabs on one page get different generated group names. If you set Id yourself, use a different value for each instance.
• Printed pages show every panel under the tab row, because paper cannot switch tabs.
• An OsirionTab placed outside an OsirionTabs throws InvalidOperationException.
• The browser holds the visitor's choice. The component keeps no state of its own and never reports which tab is selected: SelectedIndex is only the starting choice.

Styling

The selected tab's label is underlined in --osirion-action-primary. Labels use --osirion-text-secondary, and --osirion-text-primary when selected or hovered; the line under the tab row is --osirion-border-color, and the focus ring uses --osirion-focus-ring-width and --osirion-focus-ring-color. Every token has a fallback value, and a CSS framework adapter that sets them restyles the tabs with the rest of the site. Color transitions are turned off under prefers-reduced-motion: reduce.

Related

• Accordion and FAQ
• Callouts
• Content components