Tabs

Table
Textarea

Tabs

Account

Make changes to your account here. Click save when you’re done.

Usage

Template macros available

This component ships a tabs() macro for Jinja and Nunjucks.

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, Tabs component CSS, and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/tabs.css";
@import "basecoat-css/styles/vega.css";

Using CDN or bundler imports? See the Installation page.

Include JavaScript

Copy or serve the full Basecoat JavaScript bundle.

<script src="/assets/js/all.min.js" defer></script>

Or copy or serve the Basecoat runtime and Tabs script.

<script src="/assets/js/basecoat.min.js" defer></script>
<script src="/assets/js/tabs.min.js" defer></script>

Using CDN or bundler imports? See the Installation page.

Add your tabs HTML

<div class="tabs w-full" id="demo-tabs-with-panels">
  <nav role="tablist" aria-orientation="horizontal" class="w-full">
    <button type="button" role="tab" id="demo-tabs-with-panels-tab-1" aria-controls="demo-tabs-with-panels-panel-1" aria-selected="true" tabindex="0">Account</button>
    <button type="button" role="tab" id="demo-tabs-with-panels-tab-2" aria-controls="demo-tabs-with-panels-panel-2" aria-selected="false" tabindex="-1">Password</button>
  </nav>
  <div role="tabpanel" id="demo-tabs-with-panels-panel-1" aria-labelledby="demo-tabs-with-panels-tab-1" tabindex="-1" aria-selected="true">
    <div class="card">
      <header>
        <h2>Account</h2>
        <p>Make changes to your account here. Click save when you're done.</p>
      </header>
      <section>
        <form class="grid gap-4">
          <div role="group" class="field">
            <label for="demo-tabs-account-name">Name</label>
            <input type="text" id="demo-tabs-account-name" value="Pedro Duarte" />
          </div>
          <div role="group" class="field">
            <label for="demo-tabs-account-username">Username</label>
            <input type="text" id="demo-tabs-account-username" value="@peduarte" />
          </div>
        </form>
      </section>
      <footer>
        <button type="button" class="btn">Save changes</button>
      </footer>
    </div>
  </div>
  <div role="tabpanel" id="demo-tabs-with-panels-panel-2" aria-labelledby="demo-tabs-with-panels-tab-2" tabindex="-1" aria-selected="false" hidden>
    <div class="card">
      <header>
        <h2>Password</h2>
        <p>Change your password here. After saving, you'll be logged out.</p>
      </header>
      <section>
        <form class="grid gap-4">
          <div role="group" class="field">
            <label for="demo-tabs-password-current">Current password</label>
            <input type="password" id="demo-tabs-password-current" />
          </div>
          <div role="group" class="field">
            <label for="demo-tabs-password-new">New password</label>
            <input type="password" id="demo-tabs-password-new" />
          </div>
        </form>
      </section>
      <footer>
        <button type="button" class="btn">Save password</button>
      </footer>
    </div>
  </div>
</div>

HTML structure

<div class=“tabs”>

Root tabs container. It becomes horizontal or vertical based on the child tablist’s aria-orientation.

<nav role=“tablist” aria-orientation=“horizontal”>

Tablist containing tab buttons. Set aria-orientation=“vertical” for vertical tabs and data-variant=“line” for the line style.

<button role=“tab” id=”{ TAB_ID }” aria-controls=”{ PANEL_ID }” aria-selected=“true” tabindex=“0”>
Tab trigger. The active tab has aria-selected=“true” and tabindex=“0”. Inactive tabs use tabindex=“-1”. Disabled tabs use disabled or aria-disabled=“true”.
<div role=“tabpanel” id=”{ PANEL_ID }” aria-labelledby=”{ TAB_ID }“>
Panel controlled by a tab. Inactive panels are hidden.

JavaScript API

APITypeDescription
tabs.select(tab)MethodSelects a tab button in the tablist.
tabs.refresh()MethodRescans tabs and panels after children change inside the existing tablist/panel structure.

Examples

Line

Overview content.

Vertical

Account content.

Disabled

Home content.

Icons

Preview content.

RTL

To enable RTL support, set dir="rtl" on the tabs root or a parent element.

نظرة عامة

عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.

لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.