TabGroup
OrganismErişilebilir tab navigasyonu. ARIA rollerini, klavye gezintisini ve içerik panellerini içerir.
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 _id = locals.id || 'tabgroup-' + Math.random().toString(36).substr(2, 9);
%>
<% _tabs.forEach(function (tab) { %>
<% }); %>
<% _tabs.forEach(function (tab) { %>
class="py-4 focus-visible:outline-none"
>
<%- tab.content || '' %>
<% }); %>