メインコンテンツまでスキップ

Accordion, Tab, Modal

Link design Figma:
Component

Hãy xây dựng các thành phần Accordion, TabModal dựa trên thiết kế.

  • Không cần kiểm tra perfect pixel.
  • Mã nguồn cần chạy ổn định, tối ưu.
  • Ưu tiên khả năng tái sử dụng của các component.
  • Các component cần hỗ trợ việc sử dụng nhiều instance cùng chức năng trên cùng một trang và hoạt động độc lập với nhau.

Yêu cầu thực hiện

1. Accordion

  • Accordion cho phép hiển thị danh sách các mục, mỗi mục có thể mở rộng hoặc thu gọn để xem nội dung chi tiết.
  • Khi nhấn vào tiêu đề của mỗi item, nội dung sẽ hiển thị/ẩn tương ứng.

2. Tab

  • Tab giúp phân chia nội dung thành nhiều phần, mỗi phần nằm trong một tab riêng biệt.
  • Khi chọn một tab, nội dung tương ứng sẽ được hiển thị, các tab khác sẽ ẩn nội dung.
  • Có thể chuyển đổi giữa các tab bằng cách nhấn vào tiêu đề tab.

3. Modal

  • Modal là cửa sổ nổi xuất hiện trên giao diện chính để hiển thị thông tin hoặc yêu cầu người dùng tương tác.
  • Modal có thể đóng/mở bằng nút hoặc thao tác bên ngoài vùng modal.