StellarAdmin

Theme

<sa-tab-list>
    <sa-tab-link href="#">Flights</sa-tab-link>
    <sa-tab-link href="#">Accommodation</sa-tab-link>
    <sa-tab-link href="#">Car Rental</sa-tab-link>
</sa-tab-list>

Usage

Put <sa-tab-link>s inside an <sa-tab-list>. Each tab is a link to a page.

<sa-tab-list>
    <sa-tab-link>...</sa-tab-link>
</sa-tab-list>

Examples

Variant

Create underline tabs by setting the variant attribute.

Theme

<sa-tab-list variant="TabListVariant.Line">
    <sa-tab-link href="#">Flights</sa-tab-link>
    <sa-tab-link  href="#">Accommodation</sa-tab-link>
    <sa-tab-link href="#">Car Rental</sa-tab-link>
</sa-tab-list>

Orientation

Create vertical tabs by setting the orientation attribute.

Theme

<sa-tab-list orientation="TabListOrientation.Vertical" class="w-fit">
    <sa-tab-link href="#">Flights</sa-tab-link>
    <sa-tab-link href="#">Accommodation</sa-tab-link>
    <sa-tab-link href="#">Car Rental</sa-tab-link>
</sa-tab-list>

Icons

Use icons along with the text.

Theme

<sa-tab-list>
    <sa-tab-link href="#">
        <sa-icon name="plane"/>
        Flights
    </sa-tab-link>
    <sa-tab-link href="#">
        <sa-icon name="bed-double"/>
        Accommodation
    </sa-tab-link>
    <sa-tab-link href="#">
        <sa-icon name="car-front"/>
        Car Rental
    </sa-tab-link>
</sa-tab-list>

Icons only

Tabs can contain only an icon. Give each one an accessible name.

Theme

<sa-tab-list>
    <sa-tab-link href="#">
        <sa-icon name="plane"/>
    </sa-tab-link>
    <sa-tab-link  href="#">
        <sa-icon name="bed-double"/>
    </sa-tab-link>
    <sa-tab-link href="#">
        <sa-icon name="car-front"/>
    </sa-tab-link>
</sa-tab-list>

Active item

Set the currently active item using the is-active attribute.

Theme

<sa-tab-list>
    <sa-tab-link href="#">Flights</sa-tab-link>
    <sa-tab-link is-active="true" href="#">Accommodation</sa-tab-link>
    <sa-tab-link href="#">Car Rental</sa-tab-link>
</sa-tab-list>

URL

The URL of <sa-tab-link> can be specified a couple of ways:

You can use the href property to specify any valid URL as per the href property of the anchor element.
You can use any of the attributes that are valid for specifying the URL for the ASP.NET Core Anchor Tag Helper, such as asp-controller, asp-action, asp-page, etc. Please refer to the Anchor Tag Helper documentation for more examples.

Theme

<sa-tab-list>
    <sa-tab-link asp-controller="Search" asp-route-category="flights">
        Flights
    </sa-tab-link>
    <sa-tab-link asp-controller="Search" asp-route-category="accommodation">
        Accommodation
    </sa-tab-link>
    <sa-tab-link asp-controller="Search" asp-route-category="carrental">
        Car Rental
    </sa-tab-link>
</sa-tab-list>

When specifying the URL, StellarAdmin will automatically set the is-active attribute for the tab link representing the currently active route, so you should not need to specify the is-active attribute explicitly. However, StellarAdmin can not always determine this correctly - especially if the URL contains query string parameters. In such cases, you can explicitly set the is-active attribute to either true or false.

Disabled

Disable a tab using the disabled attribute.

Theme

<sa-tab-list>
    <sa-tab-link href="#">Flights</sa-tab-link>
    <sa-tab-link  href="#">Accommodation</sa-tab-link>
    <sa-tab-link href="#" disabled="true">Car Rental</sa-tab-link>
</sa-tab-list>

Accessibility

Tabs are links. Each <sa-tab-link> renders an <a role="tab"> with aria-selected reflecting the active state, and following it navigates to its URL. Because they are links, each tab is a separate Tab stop and the arrow keys are not used to move between them.

A disabled tab renders aria-disabled="true" and has its href removed so it cannot be followed. Give every tab visible text.

API Reference

`<sa-tab-list>`

Renders a <div> element wrapping an inner tab list <div>.

Prop

Type

`<sa-tab-link>`

Renders an <a> element.

Prop

Type

Routing attributes

The tab link also accepts the same routing attributes as the ASP.NET Core Anchor Tag Helper for generating the href. Supply either an href or these attributes — not both.

Prop

Type

Tabs

On this page