Xây dựng thành phần Tabs với Tailwind CSS và React

Tabs (thẻ chuyển đổi nội dung) là một mẫu giao diện người dùng (UI) phổ biến để chuyển đổi giữa các vùng nội dung hoặc chế độ xem khác nhau. Với React và Tailwind CSS, việc xây dựng một thành phần tab có khả năng mở rộng và phản hồi tốt trở nên gọn gàng và hiệu quả.

Tại sao nên dùng Tabs?

• Tổ chức nội dung liên quan trong một không gian gọn gàng
• Cải thiện khả năng sử dụng mà không cần điều hướng thêm
• Tránh tải lại trang không cần thiết hoặc chuyển hướng phức tạp

Cấu trúc thành phần

Chúng ta sẽ xây dựng các thành phần sau:

• Tabs – quản lý trạng thái tab đang hoạt động
• TabList – vùng chứa các nút tab
• Tab – một tab có thể nhấp được
• TabPanels – vùng chứa nội dung của các tab
• TabPanel – nội dung riêng của từng tab

Tệp Tabs.js

import { useState, createContext, useContext } from 'react' const TabsContext = createContext() export function Tabs({ children, defaultIndex = 0 }) { const [activeIndex, setActiveIndex] = useState(defaultIndex) return ( <TabsContext.Provider value={{ activeIndex, setActiveIndex }}> <div>{children}</div> </TabsContext.Provider> )
} export function TabList({ children }) { return <div className="flex border-b">{children}</div>
} export function Tab({ index, children }) { const { activeIndex, setActiveIndex } = useContext(TabsContext) const isActive = index === activeIndex return ( <button onClick={() => setActiveIndex(index)} className={`px-4 py-2 -mb-px border-b-2 transition-colors ${ isActive ? 'border-indigo-500 text-indigo-600 font-medium' : 'border-transparent text-gray-500 hover:text-gray-700' }`} > {children} </button> )
} export function TabPanels({ children }) { const { activeIndex } = useContext(TabsContext) return <div className="p-4">{children[activeIndex]}</div>
} export function TabPanel({ children }) { return <div>{children}</div>
}

Ví dụ sử dụng

import { Tabs, TabList, Tab, TabPanels, TabPanel,
} from './Tabs' function App() { return ( <div className="max-w-xl mx-auto mt-10"> <Tabs defaultIndex={0}> <TabList> <Tab index={0}>Overview</Tab> <Tab index={1}>Pricing</Tab> <Tab index={2}>Reviews</Tab> </TabList> <TabPanels> <TabPanel> <p>Welcome to the overview section.</p> </TabPanel> <TabPanel> <p>Check out our competitive pricing.</p> </TabPanel> <TabPanel> <p>Read customer reviews here.</p> </TabPanel> </TabPanels> </Tabs> </div> )
}

Mẹo Styling với Tailwind

• Sử dụng border-b và -mb-px để tạo hiệu ứng gạch chân chuyển động
• Tô sáng tab đang chọn bằng font-medium và tiện ích màu
• Thêm hiệu ứng transition để chuyển tab mượt mà

Nâng cấp thêm

• Hỗ trợ bàn phím với phím ArrowLeft và ArrowRight
• Thêm hoạt ảnh chuyển đổi nội dung tab bằng thư viện framer-motion
• Tải nội dung tab theo nhu cầu (lazy-loading) để tăng hiệu suất
• Đồng bộ trạng thái tab với URL để có thể chia sẻ liên kết

Tóm lược

Việc xây dựng thành phần tab với Tailwind CSS và React Context giúp mã nguồn gọn gàng, có tổ chức và dễ mở rộng. Cách tiếp cận này tách biệt các chức năng, đồng thời cung cấp khả năng kiểm soát cao về giao diện và hành vi của thành phần.