Tabs

Một tập hợp các phần nội dung phân lớp—được gọi là tab panels—được hiển thị từng cái một.

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

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add tabs

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add tabs

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add tabs

bun

bunx @galaxy-stack/nebula-cli@latest add tabs

Sử dụng

Vue

<script setup lang="ts">
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui'
</script>

<template>
  <Tabs default-value="account" class="w-[400px]">
    <TabsList>
      <TabsTrigger value="account">Tài khoản</TabsTrigger>
      <TabsTrigger value="password">Mật khẩu</TabsTrigger>
    </TabsList>
    <TabsContent value="account">
      Thay đổi thông tin tài khoản tại đây.
    </TabsContent>
    <TabsContent value="password">
      Thay đổi mật khẩu tại đây.
    </TabsContent>
  </Tabs>
</template>

React

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui'

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Tài khoản</TabsTrigger>
        <TabsTrigger value="password">Mật khẩu</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Thay đổi thông tin tài khoản tại đây.
      </TabsContent>
      <TabsContent value="password">
        Thay đổi mật khẩu tại đây.
      </TabsContent>
    </Tabs>
  )
}

Angular

import { Component } from '@angular/core';
import { TabsComponent, TabsListComponent, TabsTriggerComponent, TabsContentComponent } from '@/components/ui';

@Component({
  selector: 'app-tabs-demo',
  standalone: true,
  imports: [TabsComponent, TabsListComponent, TabsTriggerComponent, TabsContentComponent],
  template: `
    <ui-tabs [value]="activeTab" (valueChange)="activeTab = $event" class="w-[400px]">
      <ui-tabs-list>
        <ui-tabs-trigger value="account" [isActive]="activeTab === 'account'" (triggerClick)="activeTab = $event">
          Tài khoản
        </ui-tabs-trigger>
        <ui-tabs-trigger value="password" [isActive]="activeTab === 'password'" (triggerClick)="activeTab = $event">
          Mật khẩu
        </ui-tabs-trigger>
      </ui-tabs-list>
      <ui-tabs-content value="account" [isActive]="activeTab === 'account'">
        Thay đổi thông tin tài khoản tại đây.
      </ui-tabs-content>
      <ui-tabs-content value="password" [isActive]="activeTab === 'password'">
        Thay đổi mật khẩu tại đây.
      </ui-tabs-content>
    </ui-tabs>
  `
})
export class TabsDemoComponent {
  activeTab = 'account';
}

Tham khảo API

Tabs

Component gốc quản lý trạng thái tab.

Props:

• defaultValue - Giá trị tab active mặc định
• value - Giá trị tab active được kiểm soát

TabsList

Container chứa các tab triggers.

TabsTrigger

Button kích hoạt một tab panel.

Props:

• value - Định danh duy nhất cho tab
• disabled - Tab có bị vô hiệu hóa không

TabsContent

Panel nội dung cho một tab.

Props:

• value - Định danh khớp với giá trị trigger

Khả năng truy cập

• Điều hướng bàn phím: [TODO]
• Đọc màn hình: [TODO]
• Quản lý focus: [TODO]
• Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)