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
hrefproperty to specify any valid URL as per thehrefproperty 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>API Reference
<dui-tab-list>
The <dui-tab-list> tag helper renders a <div> element wrapping an inner
tab list <div>. In addition to the attributes below, it forwards any global
HTML
attributes
to the rendered element.
Prop
Type
<dui-tab-link>
The <dui-tab-link> tag helper renders an <a> element. In addition to the
attributes below, it forwards any standard <a>
attributes
(such as href or target) to the rendered 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