Introduction
Some schemas can be long and complex. You may want to use tabs to reduce the number of components that are visible at once:
Setting the default active tab
The first tab will be open by default. You can change the default open tab using the activeTab() method:
Setting a tab icon
Tabs may have an icon, which you can set using the icon() method:
Setting the tab icon position
The icon of the tab may be positioned before or after the label using the iconPosition() method:
Setting a tab badge
Tabs may have a badge, which you can set using the badge() method:
If you’d like to change the color for a badge, you can use the badgeColor() method:
Deferring the loading of tab badges
If you have expensive queries powering your tab badges, the initial page load may be slow. You can defer the loading of tab badges using the deferBadge() method, which will load the badge values asynchronously after the page has rendered:
The badge() value must be returned from a function when using deferBadge(). If you pass a raw value like badge(Notification::query()->count()), the query runs immediately when the tab is built, defeating the purpose of deferral.The Tabs component must have a key() set when using deferBadge(). Without a key, the deferred badge request cannot identify the correct component on the server.
Using grid columns within a tab
You may use the columns() method to customize the grid within the tab:
Tabs are rendered horizontally by default, and are scrollable when they exceed the available width.
You may disable scrolling using the scrollable(false) method:
When tabs are not scrollable, the component automatically detects the available width. If not all tabs can fit, a dropdown button will appear. Any tabs that exceed the available width will be grouped inside this dropdown automatically.
Using vertical tabs
You can render the tabs vertically by using the vertical() method:
Optionally, you can pass a boolean value to the vertical() method to control if the tabs should be rendered vertically or not:
Removing the styled container
By default, tabs and their content are wrapped in a container styled as a card. You may remove the styled container using contained():
Persisting the current tab in the user’s session
By default, the current tab is not persisted in the browser’s local storage. You can change this behavior using the persistTab() method. You must also pass in a unique id() for the tabs component, to distinguish it from all other sets of tabs in the app. This ID will be used as the key in the local storage to store the current tab:
Optionally, the persistTab() method accepts a boolean value to control if the active tab should persist or not:
Persisting the current tab in the URL’s query string
By default, the current tab is not persisted in the URL’s query string. You can change this behavior using the persistTabInQueryString() method:
When enabled, the current tab is persisted in the URL’s query string using the tab key. You can change this key by passing it to the persistTabInQueryString() method:
