Tabs

Allow users to switch between different views.

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

Usage

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

Examples

Variant

Create underline tabs by setting the variant attribute.

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

Orientation

Create vertical tabs by setting the orientation attribute.

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

Icons

Use icons along with the text.

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

Icons Only

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

Active item

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

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

Url

The URL of dui-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.

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

When specifying the URL, DuneUI 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, DuneUI 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.

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

Tabs

On this page