Xây dựng giao diện chỉn chu với Underverse UI
Khám phá toàn bộ component công khai qua ví dụ hoạt động thực tế, hướng dẫn cài đặt ngắn gọn, liên kết mã nguồn và lưu ý triển khai.
01
Cài đặt thư viện
Thêm Underverse UI bằng trình quản lý gói. Entry chính vẫn tương thích với phiên bản cũ và hỗ trợ tree shaking trên các bundler hiện đại.
npm install @underverse-ui/underverse02
Hiển thị component đầu tiên
Import component từ entry công khai, sau đó kết hợp với style và provider của ứng dụng.
- Có sẵn khai báo kiểu TypeScript.
- Bundler hiện đại có thể loại bỏ export không dùng.
- Có thông điệp giao diện tiếng Anh, Việt, Hàn và Nhật.
import { Button } from '@underverse-ui/underverse';
export function SaveAction() {
return <Button variant="primary">Save changes</Button>;
}03
Danh mục component
Duyệt thư viện theo nhu cầu. Mỗi trang có demo thực tế, đường dẫn import, hướng dẫn sử dụng và liên kết mã nguồn.
Component cơ bản
6 component
Button thuộc nhóm Component cơ bản. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Badge thuộc nhóm Component cơ bản. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Avatar thuộc nhóm Component cơ bản. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Card thuộc nhóm Component cơ bản. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Skeleton thuộc nhóm Component cơ bản. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Progress thuộc nhóm Component cơ bản. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Form Input
8 component
Input (with i18n) thuộc nhóm Form Input. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Textarea thuộc nhóm Form Input. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Checkbox thuộc nhóm Form Input. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Switch thuộc nhóm Form Input. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
RadioGroup thuộc nhóm Form Input. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Slider thuộc nhóm Form Input. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
TagInput thuộc nhóm Form Input. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
UEditor thuộc nhóm Form Input. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Picker & Select
13 component
DatePicker (with i18n) thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
LunarDatePicker thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
TimePicker thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
DateTimePicker thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
MonthYearPicker thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Calendar thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
CalendarTimeline thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
ColorPicker thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
EmojiPicker thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
StickerPicker thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Combobox thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
MultiCombobox thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
CategoryTreeSelect thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Phản hồi & Overlay
8 component
Modal thuộc nhóm Phản hồi & Overlay. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Toast thuộc nhóm Phản hồi & Overlay. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Alert (with i18n) thuộc nhóm Phản hồi & Overlay. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Tooltip thuộc nhóm Phản hồi & Overlay. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Popover thuộc nhóm Phản hồi & Overlay. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Sheet thuộc nhóm Phản hồi & Overlay. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Loading / GlobalLoading thuộc nhóm Phản hồi & Overlay. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
NotificationModal (with i18n) thuộc nhóm Phản hồi & Overlay. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Điều hướng
5 component
Breadcrumb thuộc nhóm Điều hướng. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Tabs thuộc nhóm Điều hướng. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
DropdownMenu thuộc nhóm Điều hướng. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Pagination (with i18n) thuộc nhóm Điều hướng. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
ScrollArea thuộc nhóm Điều hướng. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Hiển thị dữ liệu
5 component
Table thuộc nhóm Hiển thị dữ liệu. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
DataTable (with i18n) thuộc nhóm Hiển thị dữ liệu. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
List thuộc nhóm Hiển thị dữ liệu. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Grid thuộc nhóm Hiển thị dữ liệu. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Timeline thuộc nhóm Hiển thị dữ liệu. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Bố cục
3 component
Media & Hình ảnh
6 component
SmartImage thuộc nhóm Media & Hình ảnh. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
ImageUpload thuộc nhóm Media & Hình ảnh. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
FileUpload thuộc nhóm Media & Hình ảnh. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Watermark thuộc nhóm Media & Hình ảnh. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
FallingIcons thuộc nhóm Media & Hình ảnh. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Trình phát nhạc thuộc nhóm Media & Hình ảnh. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Tiện ích
3 component
Form (with i18n) thuộc nhóm Tiện ích. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
ClientOnly thuộc nhóm Tiện ích. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
AccessDenied thuộc nhóm Tiện ích. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Giao diện
4 component
Cấu hình chung thuộc nhóm Giao diện. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
ThemeToggle (with i18n) thuộc nhóm Giao diện. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
ThemeToggle (headless) thuộc nhóm Giao diện. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
LanguageSwitcher (headless) thuộc nhóm Giao diện. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Đa ngôn ngữ
2 component