Tabs Component

CSS-only Tailwind CSS tabs with border, lifted, boxed, and pill style variants. Active state and sizes, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Składniki kart organizują treść w osobne sekcje, między którymi użytkownicy mogą przełączać się bez opuszczania strony. Zbudowane w oparciu o semantyczny kod HTML i wzorce wprowadzania danych radiowych, karty zapewniają intuicyjną nawigację w celu grupowania powiązanych informacji. System zakładek Frutjam obsługuje wiele rozmiarów, stylów i kierunków układu – tylko CSS lub sterowany JavaScriptem – dzięki czemu idealnie nadaje się do pulpitów nawigacyjnych, dokumentacji i interfejsów z zakładkami.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa	Typ	Opis
tabs	Opierać	Kontener dla grupy wejść zakładek i paneli treści
tab	Modyfikator	Indywidualne wejście radiowe z zakładką
tab-content	Modyfikator	Panel treści powiązany z zakładką
tab-active	Modyfikator	Wymusza stan aktywny/wybrany na karcie (w przypadku kart kontrolowanych przez JS)
tab-disabled	Modyfikator	Wyłączony wygląd karty
tabs-underline	Styl	Podkreśl styl wskaźnika
tabs-lifted	Styl	Styl karty z podniesioną zakładką
tabs-box	Styl	Pudełkowane zakładki w kształcie pigułek
tabs-vertical	Modyfikator	Pionowy układ zakładek z zakładkami w kolumnie po lewej stronie
tabs-end	Modyfikator	Wyrównuje wiersz tabulacji do końca (w prawo w LTR)
tabs-bottom	Modyfikator	Umieszcza karty poniżej panelu treści
tabs-xs	Rozmiar	Bardzo mała wyściółka zakładek
tabs-sm	Rozmiar	Mała wyściółka zakładek
tabs-md	Rozmiar	Średnie wypełnienie zakładek (domyślne)
tabs-lg	Rozmiar	Duża wyściółka zakładek
tabs-xl	Rozmiar	Bardzo duża wyściółka zakładek

Podstawowe użycie

Domyślne karty wykorzystują prosty styl podkreślenia przy aktywności z wejściami radiowymi. Każde wejście tab jest sparowane z panelem tab-content bezpośrednio po nim.

Overview content: a high-level summary of features, metrics, or status. This panel is visible by default.

Details content: in-depth information such as configuration options, data breakdown, or extended documentation.

Activity content: a timeline, event log, or recent changes relevant to this section.

<div class="tabs">
  <input type="radio" name="tabs-basic" class="tab" aria-label="Overview" checked>
  <div class="tab-content pt-4">
    <p>Overview content: a high-level summary of features, metrics, or status. This panel is visible by default.</p>
  </div>

  <input type="radio" name="tabs-basic" class="tab" aria-label="Details">
  <div class="tab-content pt-4">
    <p>Details content: in-depth information such as configuration options, data breakdown, or extended documentation.</p>
  </div>

  <input type="radio" name="tabs-basic" class="tab" aria-label="Activity">
  <div class="tab-content pt-4">
    <p>Activity content: a timeline, event log, or recent changes relevant to this section.</p>
  </div>
</div>

Zobacz kod

Style zakładek

Użyj tabs-underline, tabs-box lub tabs-lifted, aby zmienić styl wizualny paska kart.

Underline style — a colored bottom border marks the active tab against a full-width separator line.

Details panel.

Activity panel.

Box style — the active tab gets a raised background inside a tinted pill container.

Details panel.

Activity panel.

Lifted style — the active tab appears as a card tab with borders that merge into the content panel below.

Details panel.

Activity panel.

<div class="tabs tabs-underline">
  <input type="radio" name="style-underline" class="tab" aria-label="Overview" checked>
  <div class="tab-content pt-4">Underline style — a colored bottom border marks the active tab against a full-width separator line.</div>
  <input type="radio" name="style-underline" class="tab" aria-label="Details">
  <div class="tab-content pt-4">Details panel.</div>
  <input type="radio" name="style-underline" class="tab" aria-label="Activity">
  <div class="tab-content pt-4">Activity panel.</div>
</div>

<div class="tabs tabs-box">
  <input type="radio" name="style-box" class="tab" aria-label="Overview" checked>
  <div class="tab-content pt-4">Box style — the active tab gets a raised background inside a tinted pill container.</div>
  <input type="radio" name="style-box" class="tab" aria-label="Details">
  <div class="tab-content pt-4">Details panel.</div>
  <input type="radio" name="style-box" class="tab" aria-label="Activity">
  <div class="tab-content pt-4">Activity panel.</div>
</div>

<div class="tabs tabs-lifted">
  <input type="radio" name="style-lifted" class="tab" aria-label="Overview" checked>
  <div class="tab-content p-4">Lifted style — the active tab appears as a card tab with borders that merge into the content panel below.</div>
  <input type="radio" name="style-lifted" class="tab" aria-label="Details">
  <div class="tab-content p-4">Details panel.</div>
  <input type="radio" name="style-lifted" class="tab" aria-label="Activity">
  <div class="tab-content p-4">Activity panel.</div>
</div>

Zobacz kod

Rozmiary zakładek

Skaluj dopełnienie tabulatorów od tabs-xs do tabs-xl, aby dopasować je do gęstości układu.

<div class="tabs tabs-underline tabs-xs">
  <input type="radio" name="size-xs" class="tab" aria-label="Extra Small" checked>
  <div class="tab-content pt-3">Extra small tabs</div>
  <input type="radio" name="size-xs" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-sm">
  <input type="radio" name="size-sm" class="tab" aria-label="Small" checked>
  <div class="tab-content pt-3">Small tabs</div>
  <input type="radio" name="size-sm" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-md">
  <input type="radio" name="size-md" class="tab" aria-label="Medium" checked>
  <div class="tab-content pt-3">Medium tabs (default)</div>
  <input type="radio" name="size-md" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-lg">
  <input type="radio" name="size-lg" class="tab" aria-label="Large" checked>
  <div class="tab-content pt-3">Large tabs</div>
  <input type="radio" name="size-lg" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-xl">
  <input type="radio" name="size-xl" class="tab" aria-label="Extra Large" checked>
  <div class="tab-content pt-3">Extra large tabs</div>
  <input type="radio" name="size-xl" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

Zobacz kod

Zakładki z przyciskami

Połącz tab z btn, aby renderować karty jako przyciski ze stylami. Klasa btn przejmuje kolory i promień obramowania, zachowując logikę wyboru tabulatorów.

Home — your primary landing panel with quick access to key actions and a summary view.

Profile — manage personal information, preferences, and account details.

Settings — configure notifications, privacy options, and connected integrations.

<div class="tabs gap-2">
  <input type="radio" name="btn-tabs" class="tab btn btn-sm" aria-label="Home" checked>
  <div class="tab-content pt-4">
    <p>Home — your primary landing panel with quick access to key actions and a summary view.</p>
  </div>

  <input type="radio" name="btn-tabs" class="tab btn btn-sm" aria-label="Profile">
  <div class="tab-content pt-4">
    <p>Profile — manage personal information, preferences, and account details.</p>
  </div>

  <input type="radio" name="btn-tabs" class="tab btn btn-sm" aria-label="Settings">
  <div class="tab-content pt-4">
    <p>Settings — configure notifications, privacy options, and connected integrations.</p>
  </div>
</div>

Zobacz kod

Wyłączone karty

Dodaj atrybut tab-disabled i disabled, aby uniemożliwić interakcję z kartą.

This tab is active and accessible.

This content is not reachable.

Another available tab panel.

<div class="tabs tabs-underline">
  <input type="radio" name="disabled-tabs" class="tab" aria-label="Available" checked>
  <div class="tab-content pt-4">This tab is active and accessible.</div>

  <input type="radio" name="disabled-tabs" class="tab tab-disabled" aria-label="Unavailable" disabled>
  <div class="tab-content pt-4">This content is not reachable.</div>

  <input type="radio" name="disabled-tabs" class="tab" aria-label="Another">
  <div class="tab-content pt-4">Another available tab panel.</div>
</div>

Zobacz kod

Zakładki pionowe

tabs-vertical przełącza do układu siatki z zakładkami w lewej kolumnie i treścią wypełniającą prawą. Pomiędzy kolumnami automatycznie dodawana jest linia oddzielająca o pełnej wysokości.

General Settings

Manage your display name, language preference, and time zone.

Security

Update your password, enable two-factor authentication, and review active sessions.

Notifications

Choose which events trigger email, push, or in-app notifications.

Billing

View invoices, update your payment method, and manage your subscription plan.

<div class="tabs tabs-vertical">
  <input type="radio" name="vertical" class="tab" aria-label="General" checked>
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">General Settings</h3>
    <p>Manage your display name, language preference, and time zone.</p>
  </div>

  <input type="radio" name="vertical" class="tab" aria-label="Security">
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">Security</h3>
    <p>Update your password, enable two-factor authentication, and review active sessions.</p>
  </div>

  <input type="radio" name="vertical" class="tab" aria-label="Notifications">
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">Notifications</h3>
    <p>Choose which events trigger email, push, or in-app notifications.</p>
  </div>

  <input type="radio" name="vertical" class="tab" aria-label="Billing">
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">Billing</h3>
    <p>View invoices, update your payment method, and manage your subscription plan.</p>
  </div>
</div>

Zobacz kod

Zakładki na dole

tabs-bottom odwraca układ tak, aby zawartość pojawiła się nad paskiem kart, co jest przydatne w przypadku pasków nawigacyjnych w stylu mobilnym lub dolnych pasków narzędzi.

Feed — latest posts and updates from people you follow.

Explore — discover trending topics, creators, and recommended content.

Saved — articles and posts you bookmarked for later.

<div class="tabs tabs-bottom tabs-underline">
  <input type="radio" name="bottom-tabs" class="tab" aria-label="Feed" checked>
  <div class="tab-content pb-4">
    <p>Feed — latest posts and updates from people you follow.</p>
  </div>

  <input type="radio" name="bottom-tabs" class="tab" aria-label="Explore">
  <div class="tab-content pb-4">
    <p>Explore — discover trending topics, creators, and recommended content.</p>
  </div>

  <input type="radio" name="bottom-tabs" class="tab" aria-label="Saved">
  <div class="tab-content pb-4">
    <p>Saved — articles and posts you bookmarked for later.</p>
  </div>
</div>

Zobacz kod

Zakładki wyrównane do końca

tabs-end przesuwa pasek kart na prawo (na koniec) kontenera, co jest przydatne w przypadku dodatkowej nawigacji lub menu akcji.

Weekly view — aggregated metrics for the past 7 days.

Monthly view — trend analysis over the past 30 days.

Yearly view — annual summary and year-over-year comparison.

<div class="tabs tabs-underline tabs-end">
  <input type="radio" name="end-tabs" class="tab" aria-label="Week" checked>
  <div class="tab-content pt-4">Weekly view — aggregated metrics for the past 7 days.</div>

  <input type="radio" name="end-tabs" class="tab" aria-label="Month">
  <div class="tab-content pt-4">Monthly view — trend analysis over the past 30 days.</div>

  <input type="radio" name="end-tabs" class="tab" aria-label="Year">
  <div class="tab-content pt-4">Yearly view — annual summary and year-over-year comparison.</div>
</div>

Zobacz kod

Zakładki sterowane JavaScriptem

W przypadku wzorców innych niż radiowe (np. linki zakotwiczone, treść dynamiczna) dodaj tab-active do wybranej karty w JavaScript. Sparowana zawartość tab-content jest wyświetlana za pomocą selektora .tab-active + .tab-content.

Dashboard panel — visible because this tab has tab-active.

Reports panel.

Integrations panel.

<div class="tabs tabs-box" id="js-tabs">
  <button class="tab tab-active" data-tab="0">Dashboard</button>
  <div class="tab-content pt-4">Dashboard panel — visible because this tab has <code>tab-active</code>.</div>

  <button class="tab" data-tab="1">Reports</button>
  <div class="tab-content pt-4">Reports panel.</div>

  <button class="tab" data-tab="2">Integrations</button>
  <div class="tab-content pt-4">Integrations panel.</div>
</div>

<script>
  document.querySelectorAll('#js-tabs .tab').forEach(tab => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('#js-tabs .tab').forEach(t => t.classList.remove('tab-active'));
      tab.classList.add('tab-active');
    });
  });
</script>

import { useTabs } from 'frutjam/react'

export default function TabsDemo() {
  const tabs = useTabs(0)
  return (
    <div className="tabs tabs-box">
      <button {...tabs.tabProps(0)}>Dashboard</button>
      <div {...tabs.panelProps(0)} className="tab-content pt-4">Dashboard panel.</div>

      <button {...tabs.tabProps(1)}>Reports</button>
      <div {...tabs.panelProps(1)} className="tab-content pt-4">Reports panel.</div>

      <button {...tabs.tabProps(2)}>Integrations</button>
      <div {...tabs.panelProps(2)} className="tab-content pt-4">Integrations panel.</div>
    </div>
  )
}

<script setup>
import { ref } from 'vue'
const active = ref(0)
</script>

<template>
  <div class="tabs tabs-box">
    <button
      v-for="(label, i) in ['Dashboard', 'Reports', 'Integrations']"
      :key="i"
      class="tab"
      :class="{ 'tab-active': active === i }"
      :aria-selected="active === i"
      role="tab"
      @click="active = i"
    ></button>

    <div class="tab-content pt-4" :hidden="active !== 0">Dashboard panel.</div>
    <div class="tab-content pt-4" :hidden="active !== 1">Reports panel.</div>
    <div class="tab-content pt-4" :hidden="active !== 2">Integrations panel.</div>
  </div>
</template>

<script>
  let active = $state(0)
  const labels = ['Dashboard', 'Reports', 'Integrations']
</script>

<div class="tabs tabs-box">
  {#each labels as label, i}
    <button
      class="tab"
      class:tab-active={active === i}
      aria-selected={active === i}
      role="tab"
      onclick={() => active = i}
    >{label}</button>
    <div class="tab-content pt-4" hidden={active !== i}>{label} panel.</div>
  {/each}
</div>

Zobacz kod

Tabs Component

Podstawowe użycie

Style zakładek

Rozmiary zakładek

Zakładki z przyciskami

Wyłączone karty

Zakładki pionowe

General Settings

Security

Notifications

Billing

Zakładki na dole

Zakładki wyrównane do końca

Zakładki sterowane JavaScriptem

Powiązany