Tabs

Segmented view switcher for organizing content within a page.

Demo

Install the component
Shell
php artisan flexi:add tabs
Install dependencies

By default we're using our own Interactive Component Library Flexilla . Install this only if you did not accept dependency installation when adding the component.
Shell
npm i @flexilla/tabs

Add plugin in flexilla.js

flexilla.js

import { TabsPlugin } from "./plugins/tabs";

Alpine.plugin(TabsPlugin)

Initialize tabs in flexilla.js

flexilla.js

import { Tabs } from "@flexilla/tabs"

// init Tabs for all Element with data-app-tabs attribute
Tabs.autoInit('[data-app-tabs]')

The tabs component creates a tabbed interface for organizing content into separate views.

Prop	Type	Default	Description
`class`	string	''	Additional CSS classes for the tabs container.

Component	Description
`x-ui.tabs.list-wrapper`	Optional wrapper component for the tabs list.
`x-ui.tabs.list`	The container for tab triggers. Should contain one or more `x-ui.tabs.trigger` components.
`x-ui.tabs.trigger`	The clickable tab trigger. Must have an 'id' attribute that matches a corresponding panel's 'id'. Accepts a 'class' prop for custom styling.
`x-ui.tabs.panel-wrapper`	Optional wrapper for tab panels. Can be used to add a common container around all panels.
`x-ui.tabs.panel`	The content panel for a tab. Must have an 'id' attribute that matches a trigger's 'id'. Accepts 'show-as-grid' prop to use CSS Grid for layout. Use the 'active' prop to set the initially visible panel.

Event	Description
`tab:changed`	Dispatched when the active tab changes. The event detail contains the ID of the newly active tab.

To know more about the JavaScript API, check the Flexilla documentation.

Controls for navigat...