Giao diện chỉn chu với Underverse UI
Nền tảng React có kiểu dữ liệu cho giao diện thường ngày, tích hợp sẵn bảng dữ liệu, quy trình xử lý tài liệu và lập kế hoạch nguồn lực.
Trạng thái phát hành
- Underverse Free
- Bản MIT công khai · v2.0.42
Năng lực cốt lõi
Xem những thao tác tạo nên khác biệt.
Mỗi bản xem trước tái hiện một luồng thật của component: dữ liệu phân cấp, bảng tính ngay trong tài liệu và lịch biểu phát hiện xung đột trước khi bàn giao.
01 / DATA TABLE
Nhóm cả hàng lẫn cột mà vẫn giữ đúng ngữ cảnh.
DataTable kết hợp header nhiều tầng, cột cố định, nhóm kết quả lồng nhau, truy vấn server có kiểu dữ liệu và xuất kết quả.
- Tạo header hai hoặc ba tầng với colspan và rowspan tự động; cột dữ liệu vẫn giữ sắp xếp, bộ lọc và điều khiển hiển thị.
- Nhóm theo nhiều chiều nghiệp vụ, đồng thời tính nhãn hoặc tổng phụ từ dữ liệu bên trong từng nhóm.
- Giữ cố định header và cột chính; virtualized rows cùng truy vấn server có thể hủy xử lý tập kết quả lớn.
02 / UEDITOR TABLE ENGINE
Bảng nằm trong tài liệu, thao tác như một spreadsheet.
UEditor có table engine riêng cho tài liệu có cấu trúc: chọn vùng ô, resize hàng và cột độc lập, gộp ô, định dạng và tính toán ngay trong nội dung.
- Gộp hoặc tách ô, bật hàng/cột tiêu đề, kéo đổi thứ tự và resize riêng cột, hàng hoặc toàn bộ bảng.
- Tính SUM, AVG, MIN, MAX và COUNT từ tham chiếu ô hoặc vùng; tự động tính lại theo quan hệ phụ thuộc.
- Dán dữ liệu từ Excel hoặc Google Sheets rồi tiếp tục chỉnh cấu trúc, viền, căn lề và công thức trong tài liệu.
03 / CALENDAR TIMELINE
Điều chỉnh lịch và thấy ngay tác động lên nguồn lực.
CalendarTimeline kết hợp thao tác trực tiếp với lập kế hoạch nguồn lực. Người dùng chỉnh lịch ngay trên lưới, đồng thời theo dõi mức sử dụng, giới hạn đồng thời và thời gian khả dụng.
- Kéo để tạo, di chuyển hoặc resize sự kiện trong chế độ tháng, tuần, ngày và sprint; mọi thay đổi đều có callback để kiểm soát.
- Xếp sự kiện chồng nhau thành nhiều lane, tự tăng chiều cao hàng, nhóm nguồn lực hoặc virtualize lịch biểu lớn.
- Đo sức chứa, đánh dấu xung đột công việc đồng thời và xếp hạng nguồn lực phù hợp với khoảng thời gian yêu cầu.
01
Cài đặt Underverse Free
Cài đặt rõ phiên bản công khai 2.0.23 để dự án luôn nằm đúng trong phạm vi gói MIT đã được ghi nhận.
npm install @underverse-ui/underverse@2.0.4202
Hiển thị component đầu tiên
Import component từ entry của gói Free, 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