Animated Tabs

Gắn stylesheet và script một lần, rồi thêm data-tabs vào mỗi bộ tab:

<link rel="stylesheet" href="animated-tabs.css" />
<script src="animated-tabs.js" defer></script>

<div class="animated-tabs" data-tabs>
  <div class="animated-tabs__list" role="tablist" aria-label="Cài đặt">
    <button class="animated-tabs__tab" role="tab" type="button" aria-selected="true">Chung</button>
    <button class="animated-tabs__tab" role="tab" type="button">Thanh toán</button>
  </div>
  <div class="animated-tabs__panel" role="tabpanel">…</div>
  <div class="animated-tabs__panel" role="tabpanel" hidden>…</div>
</div>

Tab được ghép với panel theo thứ tự (hoặc theo aria-controls); script tự điền id và các thuộc tính ARIA còn thiếu. Để các panel là con trực tiếp của .animated-tabs và gắn hidden cho mọi panel trừ panel đầu, để trang hiển thị đúng ngay cả trước khi script chạy. Tab có disabled sẽ bị bỏ qua.

Tuỳ chọn qua data attribute trên phần tử gốc: data-variant="underline" (mặc định: viên kính), data-orientation="vertical", data-activation="manual" (mũi tên chỉ di chuyển focus, Enter / Space mới chọn).

Mỗi lần đổi tab đều phát sự kiện tabchange (có nổi bọt), dù do người dùng hay do script:

document.querySelector("#settings").addEventListener("tabchange", (event) => {
  console.log(event.detail.value, event.detail.previousValue); // và .index, .previousIndex
});

AnimatedTabs.get(element).select("billing"); // theo data-value (không có thì theo id), hoặc theo vị trí

Tab thêm vào sau khi trang đã tải: AnimatedTabs.init(container) — hàm này trả về một hàm để gỡ ra. AnimatedTabs.createTabs(element, { activation, orientation }) khởi tạo trực tiếp một phần tử.

Chép Tabs.tsx, animated-tabs.css và thư mục core vào dự án:

import { Tab, TabList, TabPanel, Tabs } from "./Tabs";

<Tabs defaultValue="general" onChange={(value) => console.log(value)}>
  <TabList aria-label="Cài đặt">
    <Tab value="general">Chung</Tab>
    <Tab value="billing">Thanh toán</Tab>
  </TabList>
  <TabPanel value="general">…</TabPanel>
  <TabPanel value="billing">…</TabPanel>
</Tabs>

Dùng defaultValue để component tự giữ trạng thái, hoặc value + onChange để bạn tự giữ. variant ("pill" | "underline"), orientation ("horizontal" | "vertical") và activation ("automatic" | "manual") đặt trên <Tabs>. Để <TabList> và các panel là con trực tiếp của <Tabs>. Mọi prop của <div> / <button> đều dùng được (className, disabled, aria-*…). Panel ẩn vẫn được giữ lại trong cây, nên trạng thái bên trong không mất. React 18 hoặc 19.

Component bắt đầu bằng "use client", nên dùng được trong mọi page hay server component. Với App Router không cần làm gì thêm. Với Pages Router, chuyển dòng import CSS vào pages/_app.

Đặt các biến sau trên .animated-tabs (hoặc class của bạn):

Biến	Đổi gì
--tabs-text, --tabs-text-hover, --tabs-text-active	Màu chữ của tab
--tabs-surface, --tabs-border	Rãnh kính phía sau các tab
--tabs-pill, --tabs-pill-tint-from, --tabs-pill-tint-to, --tabs-pill-border, --tabs-glow	Viên kính: nền, sắc màu, viền, quầng sáng
--tabs-accent-from, --tabs-accent-to, --tabs-line	Đường gạch chân: gradient và độ dày
--tabs-ring	Viền focus
--tabs-radius, --tabs-padding, --tabs-gap	Hình dạng, kích thước tab, khoảng cách giữa tab và nội dung
--tabs-lead, --tabs-trail, --tabs-lag, --tabs-ease-lead, --tabs-ease-trail	Độ giãn: mép trước, mép sau đi nhanh chậm ra sao, mép sau chờ bao lâu
--tabs-panel-duration, --tabs-panel-shift	Nội dung đổi trong bao lâu và trượt xa bao nhiêu

Màu dùng light-dark(): tự theo color-scheme của trang. Hiệu ứng chuyển nội dung cần Chrome 117, Safari 17.4 hoặc Firefox 129; trình duyệt cũ hơn đổi nội dung tức thì.