Tabs

Tabbed panels for organising content into switchable sections. Supports default, pills, and underline styles. Fully keyboard-navigable with ARIA roles.

Default Style

General settings content goes here.

With Badge Counts

Pending tasks.

Pills Style

Your inbox messages.

Underline Style

Overview panel.

// Default tabs with icons and content
<?= $m->tabs('myTabs')
    ->tab('general', 'General')
        ->icon('fa-cog')
        ->content('<p>General settings here.</p>')
        ->active()
    ->tab('advanced', 'Advanced')
        ->icon('fa-sliders-h')
        ->content('<p>Advanced options.</p>')
    ->tab('disabled', 'Disabled')
        ->disabled() ?>

// Pills style
<?= $m->tabs('pillTabs')->tabStyle('pills')
    ->tab('inbox', 'Inbox')->active()
    ->tab('sent', 'Sent') ?>

// Underline style
<?= $m->tabs('lineTabs')->tabStyle('underline')
    ->tab('overview', 'Overview')->active()
    ->tab('details', 'Details') ?>

// Badge counts
<?= $m->tabs('t')
    ->tab('pending', 'Pending')->active()
    ->tab('overdue', 'Overdue')
    ->badge('pending', 6)
    ->badge('overdue', 2) ?>

// Listen for tab changes
document.getElementById('myTabs')
    .addEventListener('m-tab-change', function(e) {
        console.log('Tab changed to:', e.detail.key);
    });

// Programmatic tab selection
var tabs = m.tabs('myTabs');
tabs.selectTab('advanced');

// Update tab content
tabs.setContent('general', '<p>Updated content</p>');

// Load content via AJAX
tabs.refreshContent('advanced', '/api/settings');

// Get active tab key
var key = tabs.getActiveTab();

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->tabs($id)`	`string`	Create a tabs component.
`->tabStyle($style)`	`string`	Set tab style: `default`, `pills`, or `underline`.
`->tab($key, $label)`	`string, string`	Add a new tab panel. Returns self for chaining panel methods.
`->icon($icon)`	`string`	Set icon on the current tab (chain after `->tab()`).
`->content($html)`	`string`	Set HTML content for the current tab panel.
`->active()`		Mark the current tab as the active/default tab.
`->disabled()`		Disable the current tab.
`->remoteUrl($url)`	`string`	Load tab content via AJAX on first activation.
`->badge($key, $count)`	`string, int`	Add a badge count to a specific tab by key.

JS JS Methods

Method / Property	Parameters	Description
`m.tabs(id)`	`string`	Get the tabs API for the given element ID.
`selectTab(key)`	`string`	Activate a tab by its key.
`setContent(key, html)`	`string, string`	Replace a tab panel's HTML content.
`refreshContent(key, url, opts)`	`string, string, ?object`	Fetch content from a URL and inject into the tab panel.
`getActiveTab()`		Returns the key of the currently active tab.

EVENT Events

Event Name	Detail	Description
`m-tab-change`	`{key, tab, panel}`	Fired when the active tab changes.
`m-tab-content-loaded`	`{key, panel}`	Fired when remote content finishes loading for the first time.
`m-tab-content-refresh`	`{key, panel}`	Fired when content is refreshed via `refreshContent()`.