TabGroup
OrganismAccessible tab navigation following the role="tablist" / role="tab" / role="tabpanel" ARIA pattern. Arrow-key navigation; tabIndex=-1 on inactive tabs.
Overview panel content.
Details panel content.
History panel content.
<%- include('modules/ui/TabGroup', {
tabs: [
{ id: 'overview', label: 'Overview', content: 'Overview panel content.
' },
{ id: 'details', label: 'Details', content: 'Details panel content.
' },
{ id: 'history', label: 'History', content: 'History panel content.
' },
]
}) %>Home content.
Users content.
Settings content.
<%- include('modules/ui/TabGroup', {
tabs: [
{ id: 'home', label: 'Home', icon: 'fa-house', content: 'Home content.
' },
{ id: 'users', label: 'Users', icon: 'fa-users', content: 'Users content.
' },
{ id: 'settings', label: 'Settings', icon: 'fa-gear', content: 'Settings content.
' },
]
}) %>Active tab content.
Another tab content.
<%- include('modules/ui/TabGroup', {
tabs: [
{ id: 'active', label: 'Active', content: 'Active tab content.
' },
{ id: 'disabled', label: 'Disabled', content: '', disabled: true },
{ id: 'another', label: 'Another', content: 'Another tab content.
' },
]
}) %><%
var _tabs = locals.tabs || [];
var _activeTab = locals.activeTab || (_tabs.length > 0 ? _tabs[0].id : '');
var _label = locals.label || 'Tabs';
var _lazy = !!locals.lazy;
var _id = locals.id || 'tabgroup-' + Math.random().toString(36).substr(2, 9);
var _inactiveCls = 'border-transparent text-text-secondary hover:text-text-primary hover:border-border';
var _activeCls = 'border-primary text-primary';
%>
<% _tabs.forEach(function (tab, ti) { %>
<% }); %>
<% _tabs.forEach(function (tab) {
var _isActive = tab.id === _activeTab;
var _shouldRender = !_lazy || _isActive;
%>
class="py-4 focus-visible:outline-none"
>
<% if (_shouldRender) { %>
<%- tab.content || '' %>
<% } %>
<% }); %>
<%
/* Inline-script-safe JSON for TAB_CONTENTS: escape sequences that would
otherwise terminate