Phản ứng Sáp nhập MDL Phản ứng với Thiết kế Vật liệu Lite

Google gần đây đã đưa ra một thư viện có tên là Design Design Lite, đây là tài nguyên dành cho các nhà phát triển. Nó tự động định kiểu bất kỳ trang web nào bằng cách sử dụng các nguyên tắc thiết kế vật liệu với CSS và JS dựng sẵn.

Đây là một khung phổ biến cho các dự án dev đơn giản. React MDL kết hợp khung của Google với thư viện React để tạo tài nguyên lối vào được làm tròn.

Thiết kế tài liệu của Google rõ ràng là tương lai của UI / UX trong thế giới của Google. Và với Material Design Lite, việc triển khai các tính năng này trên bất kỳ trang web nào với thư viện mã nguồn mở độc quyền trở nên dễ dàng hơn bao giờ hết.

React cũng là khung JS frontend phổ biến nhất được sử dụng cho các thành phần khung nhìn frontend. Với React MDL, bạn có thể hợp nhất các thành phần React này với thư viện MDL để có được một cái nhìn giống như bạn sẽ tìm thấy trong tài liệu trực tuyến của Google.

Đây là một mẫu bài viết mẫu để bạn có thể cảm nhận được nó trông như thế nào.

Trang này không có nhiều thành phần React nhưng nó thể hiện tính thẩm mỹ của thiết kế vật liệu. Bạn sẽ tìm thấy nhiều hành động hơn trên bản demo này được xây dựng bằng các thành phần React.

Bạn thực sự có thể tìm thêm thông tin về Material Design Lite trên repo GitHub nếu bạn tò mò muốn tìm hiểu thêm. Từ đó, bạn có thể tải xuống CSS và JS thô để triển khai vào trang của mình, nó tự động hỗ trợ tất cả các trình duyệt hiện đại và xuống cấp duyên dáng.

Thật không may vì React MDL vẫn còn khá mới nên nó không hỗ trợ đầy đủ cho tất cả các thành phần.

Nhưng bạn có thể thấy một danh sách đầy đủ ở đây bao gồm các bản demo nhỏ cho mỗi người. Điều này cũng bao gồm các bit của mã nguồn mà bạn có thể sao chép / dán vào các dự án của riêng bạn khi cần.

tôi sẽ không phải khuyên bạn nên học React MDL cho đến khi bạn cảm thấy thoải mái với cả hai thư viện.

Bộ phần mềm Design Design Lite khá đơn giản để bắt đầu nhưng React phức tạp hơn nhiều.

Để tìm hiểu thêm về MDL, hãy xem trang Câu hỏi thường gặp trên trang web chính thức của họ. Nó cung cấp các mẹo về nơi sử dụng MDL, tính năng mà nó cung cấp và cách nó có thể phù hợp với quy trình làm việc webdev điển hình.

Nhưng thật ra ngay cả khi bạn không hiểu rõ về React, bạn vẫn có thể nhận được bằng tất cả các mẫu trên trang thành phần. Ví dụ: trang trường văn bản có các trường văn bản hoạt động bằng cách sử dụng thiết kế vật liệu nhưng với đoạn mã React.

Hãy chơi xung quanh và xem những gì bạn có thể xây dựng. Cả hai thư viện đều hoàn toàn miễn phí và là nguồn mở cho tất cả các dự án cho dù là cá nhân hay thương mại.

Bạn có thể tìm hiểu thêm từ trang React MDL GitHub nếu bạn muốn nghiên cứu nguồn và lặn trong.