Dan Harrin
09aaea6d5d
* screenshots * fix cut off sidebar * Screenshots * Screenshots * retake * fix loading data issue * retake * screenshots * Update custom-toolbar.jpg * retake * ss * retake * ss * ss * ss * ss * ss * ss * ss * ss * Update dashboard.jpg * ss * Update openable.jpg * ss * ss * ss * Update database.sqlite * Update database.sqlite * ss * ss * ss * ss * ss * ss * clean up * cs
3.6 KiB
title
| title |
|---|
| Tabs Blade component |
import AutoScreenshot from "@components/AutoScreenshot.astro"
Introduction
The tabs component allows you to render a set of tabs, which can be used to toggle between multiple sections of content:
<x-filament::tabs label="Content tabs">
<x-filament::tabs.item>
Tab 1
</x-filament::tabs.item>
<x-filament::tabs.item>
Tab 2
</x-filament::tabs.item>
<x-filament::tabs.item>
Tab 3
</x-filament::tabs.item>
</x-filament::tabs>
Triggering the active state of the tab
By default, tabs do not appear "active". To make a tab appear active, you can use the active attribute:
<x-filament::tabs>
<x-filament::tabs.item active>
Tab 1
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>
You can also use the active attribute to make a tab appear active conditionally:
<x-filament::tabs>
<x-filament::tabs.item
:active="$activeTab === 'tab1'"
wire:click="$set('activeTab', 'tab1')"
>
Tab 1
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>
Or you can use the alpine-active attribute to make a tab appear active conditionally using Alpine.js:
<x-filament::tabs x-data="{ activeTab: 'tab1' }">
<x-filament::tabs.item
alpine-active="activeTab === 'tab1'"
x-on:click="activeTab = 'tab1'"
>
Tab 1
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>
Setting a tab icon
Tabs may have an icon, which you can set using the icon attribute:
<x-filament::tabs>
<x-filament::tabs.item icon="heroicon-m-bell">
Notifications
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>
Setting the tab icon position
The icon of the tab may be positioned before or after the label using the icon-position attribute:
<x-filament::tabs>
<x-filament::tabs.item
icon="heroicon-m-bell"
icon-position="after"
>
Notifications
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>
Setting a tab badge
Tabs may have a badge, which you can set using the badge slot:
<x-filament::tabs>
<x-filament::tabs.item>
Notifications
<x-slot name="badge">
5
</x-slot>
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>
Using a tab as an anchor link
By default, a tab's underlying HTML tag is <button>. You can change it to be an <a> tag by using the tag attribute:
<x-filament::tabs>
<x-filament::tabs.item
:href="route('notifications')"
tag="a"
>
Notifications
</x-filament::tabs.item>
{{-- Other tabs --}}
</x-filament::tabs>
Using vertical tabs
You can render the tabs vertically by using the vertical attribute:
<x-filament::tabs vertical>
<x-filament::tabs.item>
Tab 1
</x-filament::tabs.item>
<x-filament::tabs.item>
Tab 2
</x-filament::tabs.item>
<x-filament::tabs.item>
Tab 3
</x-filament::tabs.item>
</x-filament::tabs>