Tạo thanh tiến trình thiết kế vật liệu dễ dàng với MproTHER.js
Không thể phủ nhận rằng Google vật liệu thiết kế đã thay đổi hoàn toàn web. Nó cung cấp một ngôn ngữ thiết kế chung mà các nhà thiết kế UI có thể áp dụng cho tất cả các trang web và ứng dụng di động.
Xu hướng thiết kế vật liệu này đã dẫn đến nhiều thư viện, bao gồm khung Materialize phổ biến. Và một trong những dự án vật liệu mới tuyệt vời nhất Tôi đã tìm thấy là MproTHER.js.
Thư viện JavaScript này tạo ra một thanh tiến độ vật liệu sử dụng CSS và JavaScript thuần túy. Không phụ thuộc, không vô nghĩa Chỉ cần tải đơn giản (và tải trước) với giao diện thiết kế vật liệu sẽ phù hợp với bất kỳ trang web hoặc ứng dụng web nào.
Việc thiết lập khá đơn giản và chỉ yêu cầu hai tập tin: CSS và tập lệnh JS từ MproTHER.
Bạn có thể tải cả hai từ repo GitHub hoặc sử dụng một trình quản lý gói chẳng hạn như npm hoặc Bower. Từ đó, bạn cần phải tạo một đối tượng Mproceed mới và bảo nó khởi động trình nạp.
Điều này có thể được thực hiện với nghĩa đen một dòng mã:
var mproTHER = new MproTHER ('start'); Các tài sản khác có thể được áp dụng để thay đổi thời gian hoạt hình, tốc độ hoặc màu hiển thị của thanh tiến trình. Cấu hình này thậm chí cho phép bạn tạo mẫu tùy chỉnh dựa trên phong cách thiết kế vật liệu mặc định. Tuyệt vời!
Hãy nhìn vào trang demo để xem trình tải này hoạt động. Nó không phải là một thanh tải mê hoặc, tuy nhiên nó cung cấp một giải pháp tốt mà không cần bạn phải xây dựng từ đầu.
Bạn có thể chạy các phương thức như bộ() đến đặt tỷ lệ phần trăm hoặc là inc () đến tăng thanh tải. Nó có thể được xử lý theo chương trình để tạo trình tải HTTP nhưng điều đó đòi hỏi phải có thêm công việc trong JavaScript.
Vẻ đẹp của MproTHER.js là sự đơn giản của nó. Nó không cho bạn biết cách cấu trúc dữ liệu hoặc những gì bạn cần tải. Nó có thể đang tải trang hoặc có thể xử lý tải lên tệp. Hoặc có thể theo dõi người dùng đã cuộn xuống bao xa từ đầu trang.
Có rất nhiều thứ bạn có thể làm với thư viện này và với không phụ thuộc bạn có thể sử dụng nó cho bất kỳ dự án web. Để bắt đầu, hãy kiểm tra Repro MProwards trên GitHub, nơi bạn cũng có thể duyệt qua tài liệu.
