TabGroup

Organism

Erişilebilir tab navigasyonu. ARIA rollerini, klavye gezintisini ve içerik panellerini içerir.

Default

Preview

Overview panel content.

Code

<%- 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.' },
  ]
}) %>

With icons

Preview

Home content.

Code

<%- 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.' },
  ]
}) %>

With disabled tab

Preview

Active tab content.

Code

<%- 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.' },
  ]
}) %>

Source modules/ui/TabGroup.ejs

<%
  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 || '' %>
  
  <% }); %>