Tabs
The Tabs components display a tabbed interface, suitable for settings pages,
long forms, etc. It uses AlpineJS to hide and show the tabs. There are only two components:
<x-euikit::tabs>
| Wrapper around the tabs |
<x-euikit::tabs.tab>
| Wrapper around each individual tab |
The tabs component takes an optional "default" attribute that defines the
tab that should be shown by default.
The Tab component
The <x-euikit::tabs.tab> component surrounds the contents of the tab itself. It can take a few attributes:
| name | Yes | (none) | The name of the tab. This is shown as the tab's header, and the slug'ed version is used as the url's hash when this tab is visible. |
| lefticon | no | (none) |
Icon to show to the left of the tab name. The icon will be rendered with the
@svg() Blade directive, so any icon pack
in Blade Icons can be used.
EUIKit supports Heroicons by default.
|
| righticon | no | (none) |
Icon to show to the right of the tab name. The icon will be rendered with the
@svg() Blade directive, so any icon pack
in Blade Icons can be used.
EUIKit supports Heroicons by default.
|
| badge-type | no | "info" |
Type of badge to show to the right of the tab name. Can take any of the Colors and Types common
to other EUIKit components. Defaults to "info" if not specified. Note that the
"badge" attribute must be assigned for the
badge to appear.
|
| badge | no | (none) | Value to be shown as the badge to the right of the tab name. Rendered using the Tag component. |
URL Hash
The current tab's name (run through Str::slug()) is shown in the URL as the
hash for the current page. This allows deep-linking to a certain tab within the page,
and allows the ability for users to bookmark individual tabs.
Tabs Demo
Blade Source
<x-e::tabs default="tab-1">
<x-e::tabs.tab name="Tab 1">
This is the first tab.
</x-e::tabs.tab>
<x-e::tabs.tab name="Tab 2" lefticon="heroicon-o-arrow-trending-up">
This is the second tab. It has a left icon. Note that the URL hash changes when switching tabs.
</x-e::tabs.tab>
<x-e::tabs.tab name="Tab 3" badge_type="warning" badge="3">
Tab three, with a badge.
</x-e::tabs.tab>
<x-e::tabs.tab name="Tab Four" badge_type="green" badge="NEW">
Badges don't have to display a number.
</x-e::tabs.tab>
</x-e::tabs>