Vật liệu hóa - Khung CSS Thiết kế Vật liệu
Google Vật liệu thiết kế Nhằm mục đích hoạt động tốt trên Web và cả trên ứng dụng di động. Nó trở nên phổ biến với các nhà phát triển và nếu bạn cũng muốn áp dụng nó, có nhiều cách để triển khai Thiết kế Vật liệu trên trang web của bạn. Bạn có thể sử dụng Polyme hoặc Angular hoặc bạn có thể sử dụng Vật liệu hóa.
Vật chất hóa là một Khung CSS dựa trên các nguyên tắc Thiết kế Vật liệu với sự hỗ trợ của Sass để phát triển tốt hơn. Nó mang kiểu dáng mặc định để dễ sử dụng và có tài liệu chi tiết.
Bạn có thể tìm thấy rất nhiều thành phần hữu ích trong: hộp thoại, phương thức, bộ chọn ngày, nút vật liệu, thị sai, thẻ và nhiều hơn nữa. Nó cũng có nhiều tùy chọn điều hướng bạn có thể chọn, chẳng hạn như thả xuống, trượt trong menu và các tab. Vật chất hóa cũng sử dụng một Hệ thống 12 lưới với 3 truy vấn phương tiện kích thước màn hình mặc định: chiều rộng tối đa 600px là thiết bị di động, thiết bị máy tính bảng 992px và hơn 992px được coi là thiết bị để bàn.
Bắt đầu
Có hai cách để bắt đầu với Materialize: sử dụng CSS chuẩn hoặc là Sass. Cả hai nguồn có thể được tải xuống ở đây. Bạn cũng có thể lấy chúng bằng Bower bằng lệnh sau:
Bower cài đặt cụ thể hóa
Sau khi bạn nhận được các nguồn, hãy đảm bảo liên kết chúng chính xác trên tệp dự án của bạn hoặc biên dịch nguồn nếu bạn đang sử dụng phiên bản Sass.
Tính năng, đặc điểm
Trong phần này, tôi sẽ giải thích một số tính năng mà Materialize cung cấp.
1. Sass Mixins
Khung này mang Sass Mixins tự động thêm tất cả các tiền tố trình duyệt khi bạn viết các thuộc tính CSS nhất định. Đó là một tính năng tuyệt vời để đảm bảo khả năng tương thích trên tất cả các trình duyệt, càng ít ồn ào, và mã càng tốt.
Hãy xem các thuộc tính hoạt hình sau:
-webkit-hoạt hình: 0,5s; -moz-hoạt hình: 0,5s; -o-hoạt hình: 0,5s; -ms-hoạt hình: 0,5s; hoạt hình: 0,5s;
Những dòng mã này có thể được viết lại bằng một dòng Sass mixin như vậy:
@incolee hoạt hình (.5s);
Có khoảng 19 hỗn hợp chính có sẵn. Để xem danh sách đầy đủ, hãy đi tới danh mục Sass trong phần MIXIN chuyển hướng.
2. Luồng văn bản
Trong khi các khung giao diện khác sử dụng văn bản cố định, Materialize thực hiện văn bản thực sự đáp ứng. Kích thước văn bản và chiều cao dòng cũng được điều chỉnh theo tỷ lệ để duy trì khả năng đọc. Khi nói đến màn hình nhỏ hơn, chiều cao dòng được thu nhỏ hơn.
Để sử dụng Flow Text, bạn chỉ cần thêm dòng chảy văn bản lớp học trên văn bản mong muốn của bạn. Ví dụ:
Đây là dòng văn bản.
Kiểm tra bản demo ở đây trên phần Flow Text.
3. Hiệu ứng gợn với sóng
Thiết kế Vật liệu cũng đi kèm với phản hồi tương tác, một ví dụ đáng chú ý là hiệu ứng gợn. Trong Materialize, hiệu ứng này được gọi là Sóng biển. Về cơ bản khi người dùng nhấp hoặc chạm / chạm vào nút, thẻ hoặc bất kỳ yếu tố nào khác, hiệu ứng sẽ xuất hiện. Sóng có thể dễ dàng được tạo bằng cách thêm hiệu ứng sóng lớp vào các yếu tố của bạn.
Đoạn trích này cung cấp cho bạn hiệu ứng sóng.
Gửi đi
Các gợn sóng có màu xám theo mặc định. Nhưng trong tình huống bạn có nền màu tối, bạn có thể muốn thay đổi màu. Để thêm một màu khác, chỉ cần thêm sóng- (màu) đến phần tử. Thay thế "(màu)" bằng tên của màu.
Gửi đi
Bạn có thể chọn từ 7 màu: ánh sáng, đỏ, vàng, cam, tím, xanh lá cây và teal. Bạn luôn có thể tạo hoặc tùy chỉnh màu sắc của riêng mình nếu những màu đó không phù hợp với nhu cầu của bạn.
4. Bóng tối
Để cung cấp mối quan hệ giữa các yếu tố, Thiết kế Vật liệu khuyên bạn nên sử dụng độ cao trên các bề mặt. Vật chất hóa cung cấp theo nguyên tắc này với độ sâu z- (số) lớp học. Bạn có thể xác định độ sâu bóng bằng cách thay đổi (số) từ 1 thành 5:
Độ sâu 3
Tất cả độ sâu của bóng được thể hiện bằng hình ảnh bên dưới.
5. Nút và Biểu tượng
Trong Thiết kế Vật liệu có ba loại nút chính: nút nâng lên, fab (nút hành động nổi) và nút phẳng.
(1) Nút tăng
Nút nâng lên là nút mặc định. Để tạo nút này, chỉ cần thêm một btn lớp để các yếu tố của bạn. Nếu bạn muốn tạo cho nó hiệu ứng sóng khi nhấp hoặc nhấn, hãy thực hiện với điều này:
Nút
Ngoài ra, bạn cũng có thể cung cấp cho nút một biểu tượng ở bên trái hoặc bên phải của văn bản. Đối với biểu tượng, bạn sẽ cần thêm tùy chỉnh thẻ với tên lớp và vị trí biểu tượng. Ví dụ:
Tải về
Trong đoạn trích trên, chúng tôi sử dụng mdi-file-file-download lớp cho biểu tượng tải xuống. Có khoảng 740 biểu tượng khác nhau bạn có thể dùng. Để xem chúng, hãy đến trang Sass trong tab Biểu tượng.
(2) Nút nổi
Một nút nổi có thể được tạo bằng cách nối thêm btn nổi lớp và biểu tượng mong muốn của bạn. Ví dụ:
Trong Thiết kế Vật liệu, nút phẳng thường được sử dụng trong hộp thoại. Để tạo nó, chỉ cần thêm btn-phẳng yếu tố của bạn như vậy:
Từ chối
Ngoài ra, các nút có thể được tắt với tàn tật lớp và làm cho lớn hơn bằng cách sử dụng btn lớn lớp học.
6. Lưới
Vật chất hóa sử dụng một tiêu chuẩn Lưới đáp ứng 12 cột hệ thống. Sự đáp ứng được chia thành ba phần: nhỏ (s) cho điện thoại di động, trung bình (m) cho máy tính bảng và lớn (l) cho máy tính để bàn.
Để tạo cột, sử dụng s, m hoặc l để chỉ kích thước, theo sau là số lưới. Ví dụ: khi bạn muốn tạo bố cục có kích thước bằng một nửa cho thiết bị di động thì bạn nên bao gồm một s6 lớp vào bố trí của bạn. s6 là viết tắt của nhỏ-6 có nghĩa là 6 cột trên thiết bị nhỏ.
Bạn cũng phải bao gồm một col lớp trong cách bố trí bạn tạo và đặt nó bên trong một phần tử có hàng lớp học. Điều này là để bố trí có thể được đưa vào cột đúng cách. Đây là một ví dụ:
Tôi có 12 cột hoặc chiều rộng đầy đủ ở đây4 cột (một phần ba) tại đây4 cột (một phần ba) tại đây4 cột (một phần ba) tại đây
Đây là kết quả:
Theo mặc định, col s12 là kích thước cố định và được tối ưu hóa cho tất cả các kích thước màn hình, về cơ bản giống như col s12 m12 l12. Nhưng nếu bạn muốn chỉ định kích thước cho các cột cho các thiết bị khác nhau. Tất cả bạn cần làm là liệt kê các kích thước bổ sung như vậy:
Chiều rộng của tôi luôn có 12 cột ở mọi nơiTôi có 12 cột trên thiết bị di động, 6 trên máy tính bảng và 9 trên máy tính để bàn
Đây là những gì nó trông giống như:
Đó chỉ là một vài tính năng của Materialize. Để tìm hiểu thêm về các tính năng khác của chúng, hãy truy cập trang tài liệu.
