PrintHub 3DDESIGN SYSTEM v1.0

Thư viện giao diện chuẩn hóa Frontend Next.js

Về Trang chủ

Thư Viện UI Components

Các thành phần cốt lõi được đóng gói tái sử dụng, tương thích cao với Next.js 15 và React 19.

1. Stepper Tiến Trình 4 Bước

Dùng cho quy trình tạo đơn và theo dõi vòng đời in 3D

2
3
4

2. Buttons (Các biến thể & kích cỡ)

Tích hợp loading state và icon

3. Badges & Status Tags

Nhãn phân loại trạng thái đơn hàng & vật liệu

Mặc địnhĐang ghép thầuWatertight 100%Chờ nạp nhựaLỗi hình họcFDM PLA+
Kích thước nhỏKích thước vừa

4. Metric Cards (Thông số 3D hình học)

Hiển thị kết quả tính toán thực tế từ Python Trimesh Worker

Kích thước DxRxC
120 × 85 × 140mm
Thể tích khối
142.5cm³
Khối lượng nhựa
~178gram PLA
Kiểm định Watertight
100% Solid0 lỗi manifold

5. Form Inputs & Textarea

Trường nhập liệu hỗ trợ icon và validation error

Mẹo: Mô tả rõ chi tiết góc cạnh và mục đích sử dụng

Chiều cao vượt quá khổ bàn in tối đa (256mm)

6. Tương Tác Vật Liệu & Modal

Thành phần tương tác trực tiếp với người dùng cuối

Màu sắc nguyên liệu:Trắng tuyết
Kiểm tra Modal: