TUH
Thi Ui Hoa

Drawer Width - Copy this React, Mui Component to your project

Cấu trúc giao diện chính Kích thước cửa sổ mặc định: 1024x768px. Bố cục: Sidebar (280px): Bên trái. Main Content: Bên phải. Theme màu: Tông màu sáng, hiện đại. 2. Sidebar (280px) Logo/Header: Hiển thị tiêu đề: Photo Finder. Button điều khiển: Stop | Bắt đầu thủ công | Auto. Mục Folders: Source Folder: 📂 Click để mở và chọn thư mục. Lock Source với biểu tượng khóa. Output Folder: 💾 Click để mở và chọn thư mục. Lock Output với biểu tượng khóa. Ô input: Nhập văn bản mã số. Checkbox tùy chọn: Auto Sub. Hiển thị đường dẫn: Source Path. Output Path. 3. Main Content Bảng kết quả: Các cột hiển thị: Folder. Trạng thái: ✅/❌. Đường dẫn: Source → Destination. Chức năng: Mỗi dòng có thể click để mở folder chứa file. Thanh tiến trình: Hiển thị: Phần trăm hoàn thành. Số file đã xử lý/tổng số file. Progress bar: Trực quan [███░░░]. 4. Tương tác người dùng Chức năng chính: Đường dẫn có thể click để mở folder. Thông báo tự động cập nhật. Thanh tiến trình cập nhật theo thời gian thực. Giao diện responsive: Tự động thích ứng khi thay đổi kích thước cửa sổ. 5. Thiết kế giao diện Font chữ: Font sans serif, dễ đọc. Màu sắc: Tương phản vừa đủ. Thông báo lỗi/thành công: Có màu phân biệt. Icons: Rõ ràng, dễ nhận biết. 6. Yêu cầu kỹ thuật Công nghệ sử dụng: Electron.js cho desktop app. React + MUI cho UI. Tối ưu hiệu năng: Xử lý tốt số lượng lớn file. Hỗ trợ chế độ: Dark mode / Light mode.

Prompt
Component Preview

About

drawerWidth - Set your sidebar at 280px for a modern layout with responsive design, built with React and MUI. Start coding now!

Share

Last updated 1 month ago