Tabs
Allow users to switch between different views.
<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
Examples
Orientation
Create vertical tabs by setting the orientation attribute.
<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.
<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>Active item
Set the currently active item using the is-active attribute.
<sa-tab-list>
<sa-tab-link is-active="true" 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>Url
The URL of <sa-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.
<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.