Giới thiệu
Ant Design (AntD) là bộ thư viện giao diện do Alibaba phát triển, cung cấp 71 thành phần giao diện dành cho ứng dụng doanh nghiệp. Đây là tài liệu tham khảo nhanh về công năng từng component — giúp bạn chọn đúng thành phần khi làm việc với Claude Code.Đặc điểm nổi bật
| Đặc điểm | Giải thích |
|---|---|
| 71 thành phần | Đủ bộ để xây dựng mọi ứng dụng doanh nghiệp |
| Phát triển bởi Alibaba | Kinh nghiệm từ hệ thống doanh nghiệp lớn |
| TypeScript | Mã nguồn viết bằng TypeScript — dễ bảo trì |
| React | Chỉ hỗ trợ React |
| ProComponents | Bổ sung ProLayout, ProForm, ProTable cho nhu cầu nâng cao |
Nhóm 1 — Hiển thị dữ liệu (Data Display)
Dùng khi bạn muốn trình bày thông tin cho người dùng nhìn thấy.
| Tên | Công dụng |
|---|---|
Avatar | Ảnh đại diện người dùng — tròn, có chữ viết tắt nếu không có ảnh |
Badge | Số thông báo nhỏ hiện trên icon, nhãn “New” |
Calendar | Lịch cho phép xem/chọn ngày tháng năm |
Card | Khung chứa nội dung với tiêu đề, hình ảnh, chân trang |
Carousel | Thanh trình chiếu ảnh có thể vuốt trái/phải |
Collapse | Danh sách các mục có thể thu gọn/mở rộng từng mục |
Descriptions | Bảng mô tả hiện danh sách thuộc tính và giá trị |
Empty | Trạng thái “không có dữ liệu” — hiện khi danh sách/bảng trống |
Image | Ảnh có tính năng phóng to, xem toàn màn hình |
List | Danh sách hiện dữ liệu dạng danh sách có phân trang |
Popover | Cửa sổ nhỏ bật ra khi bấm hoặc di chuột vào một phần tử |
QRCode | Mã QR code — tự động sinh mã QR từ nội dung |
Segmented | Thanh chọn kiểu phân đoạn — giống tabs nhưng nằm ngang liền mạch |
Statistic | Hiển thị số liệu lớn — ví dụ: số đơn hàng, doanh thu |
Table | Bảng dữ liệu có sắp xếp, tìm kiếm, phân trang, lọc |
Tag | Thẻ nhãn nhỏ — ví dụ: “Mới”, “Hot”, “Pro” |
Timeline | Dòng thời gian hiện các sự kiện theo thứ tự |
Tooltip | Dòng chú thích nhỏ hiện ra khi di chuột vào một phần tử |
Tour | Hướng dẫn từng bước kiểu guided tour cho người dùng mới |
Tree | Cây thư mục hiện cấu trúc phân cấp có thể thu gọn |
Nhóm 2 — Nhập liệu & Biểu mẫu (Input & Form)
Dùng khi bạn muốn thu thập thông tin từ người dùng.
| Tên | Công dụng |
|---|---|
AutoComplete | Ô tìm kiếm có gợi ý sẵn khi gõ chữ |
Cascader | Chọn địa chỉ/danh mục phân cấp nhiều tầng |
Checkbox | Hộp tích chọn — có thể chọn nhiều |
ColorPicker | Bảng chọn màu trực quan |
DatePicker | Chọn ngày tháng bằng lịch trực quan |
Form | Biểu mẫu tổng hợp kèm validation (kiểm tra lỗi nhập liệu) |
Input | Ô nhập văn bản một dòng |
InputNumber | Ô nhập chỉ cho phép nhập số, có nút tăng/giảm |
Mentions | Gợi ý @mentions kiểu mạng xã hội (nhắc tên người dùng) |
Radio | Nút radio — chỉ chọn được một trong nhiều lựa chọn |
Rate | Thang đánh giá sao (1-5 sao) |
Select | Danh sách xổ xuống để chọn một hoặc nhiều mục |
Slider | Thanh trượt để chọn giá trị trong một khoảng |
Switch | Công tắc bật/tắt (toggle) |
TimePicker | Chọn giờ phút |
Transfer | Chuyển đổi giữa hai danh sách — chọn/di chuyển nhiều mục |
TreeSelect | Chọn từ cây danh mục phân cấp (tương tự Select nhưng dạng cây) |
Upload | Tải lên tệp — hỗ trợ kéo thả, xem trước ảnh |
Nhóm 3 — Điều hướng (Navigation)
Dùng khi bạn muốn dẫn dắt người dùng di chuyển giữa các phần của ứng dụng.
| Tên | Công dụng |
|---|---|
Anchor | Điều hướng neo — bấm vào để nhảy đến phần trong trang |
Breadcrumb | Đường dẫn phân cấp (ví dụ: Trang chủ > Sản phẩm > Áo thun) |
Dropdown | Menu xổ xuống khi bấm vào nút hoặc liên kết |
Menu | Thanh menu dọc hoặc ngang — phổ biến cho sidebar và header |
Pagination | Thanh số trang khi có nhiều nội dung (Trang 1, 2, 3…) |
Steps | Thanh tiến trình gồm các bước — dùng cho wizard, quy trình đăng ký |
Tabs | Thanh tab để chuyển đổi giữa nhiều nội dung khác nhau |
Nhóm 4 — Thông báo & Phản hồi (Feedback)
Dùng khi bạn muốn thông báo điều gì đó cho người dùng hoặc phản hồi hành động.
| Tên | Công dụng |
|---|---|
Alert | Hộp thông báo nổi bật (thành công, lỗi, cảnh báo, thông tin) |
Drawer | Bảng điều khiển trượt ra từ cạnh màn hình (trái/phải/trên/dưới) |
Message | Thông báo ngắn bật lên ở góc màn hình (thành công, lỗi…) |
Modal | Hộp thoại bật lên giữa màn hình — dùng cho xác nhận, form |
Notification | Thông báo dạng popup thường nằm ở góc trên phải |
Popconfirm | Cửa sổ xác nhận nhỏ bật ra khi bấm nút nguy hiểm |
Progress | Thanh tiến trình cho biết công việc đang ở đâu |
Result | Trang kết quả hiện thành công, lỗi, 403, 404, 500 |
Skeleton | Đường gạch chờ tải — giúp giao diện không “nhảy” khi đang load |
Spin | Vòng xoay chờ tải (loading indicator) |
Watermark | Hình mờ chồng lên phần tử — dùng để bảo vệ bản quyền |
Nhóm 5 — Bố cục & Cấu trúc (Layout)
Dùng khi bạn muốn sắp xếp, tổ chức không gian trên màn hình.
| Tên | Công dụng |
|---|---|
Divider | Đường kẻ phân cách ngang hoặc dọc |
Flex | Bố cục linh hoạt theo flexbox — sắp xếp các phần tử theo hàng/cột |
Grid | Hệ thống lưới 24 cột — chia màn hình thành các vùng linh hoạt |
Layout | Cấu trúc trang gồm header, sider, content, footer |
Masonry | Bố cục dạng gạch xếp chồng — các khối tự sắp xếp theo chiều cao |
Space | Khoảng cách tự động thêm khoảng trống giữa các phần tử |
Splitter | Thanh kéo chia màn hình thành các vùng có thể thay đổi kích thước |
Nhóm 6 — Hành động & Tương tác (Actions)
Dùng khi bạn muốn người dùng thao tác với ứng dụng.
| Tên | Công dụng |
|---|---|
Button | Nút bấm có nhiều kiểu (mặc định, outline, text, link) và kích thước (small, medium, large) |
FloatButton | Nút nổi cố định ở góc màn hình — dùng cho hành động nhanh như “Cuộn lên đầu” |
Icon | Biểu tượng — thư viện icon tích hợp sẵn |
Typography | Kiểu chữ — tiêu đề, đoạn văn, trích dẫn với các kích thước chuẩn |
Nhóm 7 — Cấu hình & Tiện ích (Config & Utilities)
Dùng để tuỳ chỉnh toàn bộ ứng dụng hoặc các công cụ hỗ trợ.
| Tên | Công dụng |
|---|---|
Affix | Thanh cố định — giữ một phần tử luôn hiển thị khi cuộn trang |
App | Cấu hình ngữ cảnh toàn cục cho ứng dụng |
ConfigProvider | Cấu hình toàn cục — thay đổi màu chủ đạo, ngôn ngữ, locale |
Util | Bộ công cụ hỗ trợ — hàm tiện ích dùng chung |
Tổng hợp theo nhóm
| Nhóm | Số thành phần | Dùng khi nào |
|---|---|---|
| Hiển thị dữ liệu | 20 | Trình bày thông tin |
| Nhập liệu & Biểu mẫu | 18 | Thu thập dữ liệu từ người dùng |
| Điều hướng | 7 | Dẫn dắt người dùng di chuyển |
| Thông báo & Phản hồi | 11 | Thông báo trạng thái |
| Bố cục & Cấu trúc | 7 | Sắp xếp không gian |
| Hành động & Tương tác | 4 | Thao tác của người dùng |
| Cấu hình & Tiện ích | 4 | Tuỳ chỉnh toàn cục |
Tổng cộng: 71 thành phần — bộ đầy đủ nhất cho ứng dụng doanh nghiệp.
Tham khảo
- Trang chính thức: ant.design
- Danh sách thành phần: ant.design/components/overview
- Mã nguồn: github.com/ant-design/ant-design