learnhtml
  • Responsive thẻ meta
  • 🥹[GSAP] một mẫu sử dụng ScrollTrigger, Observer, ScrollSmoother crack (ok)
  • 😝Font Awesome Kits are here to save the day! Fast, flexible, friendly, and full of icons (ok)
  • 😅Custom Map
  • 🥰D3.js render Vietnam map (ok)
  • 😆Free Vietnam SVG Map (ok)
  • Tính khoảng cách đường bay Airport Distance Map
  • 😍Bộ công cụ chuyển đổi Text to SVG && Animation 😉
  • 😅Cách sử dụng aspect ratio với CSS3, video aspect-ratio (ok)
  • 😅is there a way I can create an Email link defaulting to Gmail? (ok)
  • 😅document.write jquery-3.7.0.min.js (ok)
  • 😅CodePen Home File Sharing Web App (ok)
  • 😅Template Tiktok khamphukhoa.net.vn (ok)
  • 😅Div Table Full (ok)
  • 🧐Coreui giao diện admin sử dụng bootstrap 5 (ok)
  • 😆Type datetime-local (ok)
  • [Admin] AdminLTE (ok)
  • [ADMIN] Laravel Admin (ok)
  • Thẻ colgroup cho phép chúng ta điều chỉnh độ rộng của table (ok)
  • Tổng quan về Material Design Lite
  • Fullscreen Horizontal Page Slider with jQuery and CSS3 - HSlider scroll template html (ok)
  • Bảng mã ký tự hay dùng :))) trong html
  • Tất cả những gì bạn cần biết về thuộc tính Data trong HTML5
  • Responsive Images trên Web
  • Tìm hiểu về BEM trong 15 phút
  • Cách sử dụng base để copy đường dẫn :(
  • Structure website HTML
  • Show Heading (ok)
  • Refused to display site in an iframe, X-Frame-Options to 'SAMEORIGIN' (ok)
  • --------- Start AppML --------------
  • AppML Tutorial (ok)
  • appml-include-html, appml-controller (ok)
  • AppML Messages (ok)
  • AppML API (ok)
  • AppML PHP (ok)
  • --------- End AppML --------------
Powered by GitBook
On this page
  • Tổng quan về Material Design Lite
  • Các Thành phần Material Design
  • Tuỳ biến
  • Trình duyệt Hỗ trợ
  • Tóm tắt
  • Tài liệu Tham khảo

Was this helpful?

Tổng quan về Material Design Lite

https://webdesign.tutsplus.com/vi/articles/an-overview-of-material-design-lite--cms-24370

PreviousThẻ colgroup cho phép chúng ta điều chỉnh độ rộng của table (ok)NextFullscreen Horizontal Page Slider with jQuery and CSS3 - HSlider scroll template html (ok)

Last updated 4 years ago

Was this helpful?

Tổng quan về Material Design Lite

by 8 Jul 2015Length:ShortLanguages:EnglishEspañolFrançaisItalianoPolskiPortuguêsPусскийTiếng Việt

Vietnamese (Tiếng Việt) translation by (you can also )

Tôi có cảm giác rằng CodePen sẽ tràn ngập các thiết kế Material Design trong những tháng tới. Tại sao ư? Bởi vì Google vừa phát hành (MDL) của họ. Thư viện các thành phần cho front-end này cho phép các nhà thiết kế web cài đặt của Google bằng HTML, CSS và JavaScript thuần tuý. Đó là một phiên bản nhẹ hơn của đặc tả Material Design (ít phụ thuộc, không nặng, rất tập trung) vì thế nó được gọi là "Lite".

Khi phát hành MDL, Google đã đáp ứng một nhu cầu rất rõ ràng. Họ ghi nhận thực tế rằng có những nỗ lực từ cộng đồng nhằm xây dựng các framework lấy cảm hứng từ Material Design, ví dụ một vài cái tên như , và . Với MDL, được xây dựng bằng sự cộng tác chặt chẽ với nhóm Chrome UX, Google đã đưa ra một tiêu chuẩn về cách thiết kế Material Design nên được cài đặt trên các trang web.

Hãy cùng tìm hiểu về những gì mà MDL đã cung cấp trong lần phát hành đầu tiên của nó!

Các Thành phần Material Design

Không giống như các Phần tử Material Design của (còn gọi là ) được phát triển cho các trang web và ứng dụng có tính tương tác cao, MDL tập trung chủ yếu vào các trang web có nội dung đơn giản hơn như blog, tiếp thị và landing.

Trong bản phát hành đầu tiên này, MDL đi kèm với một số ít các thành phần, bao gồm:

Layout

Thành phần layout bao gồm một số khối xây dựng để cấu trúc các trang. Ví dụ, Grid: một tính năng cơ bản của bất kỳ framework nào dành cho front-end. Grid của MDL được xây dựng bằng Flexbox và một ít trợ giúp từ calc() của CSS. Nó có mười hai cột thiết lập cho các viewport lớn, tám cột cho viewport có kích thước như máy tính bảng và bốn cột cho các viewport nhỏ hơn.

Thành phần Layout của MDL cũng bao gồm điều hướng, các tab và footer—mỗi cái đều được tối ưu hóa cho các kích thước viewport khác nhau.Advertisement

Button

Theo các nguyên tắc Material Design, có một số kiểu button trực quan khác nhau, một số đó là:

  • Button thông thường: một button hình chữ nhật cơ bản với màu nền khác với màu chữ.

  • Button phẳng: một button không có nền.

  • Float Action Button (FAB) là một button rất riêng của Material Design: một nút tròn chạy trên giao diện, thường chứa hành động chính của màn hình hiện tại hoặc, trong trường hợp này là trang.

Thẻ

Một thẻ là một vùng chứa (container) để hiển thị nội dung, như văn bản và hình ảnh, thường quảng bá một số loại hành động. Ví dụ, một hình ảnh có nút "like" hoặc "share", danh sách nhạc có nút "play" hoặc có thể là ghi chú có nút "Save".

Badge

Một badge là một vòng tròn nhỏ, được đặt gần một phần tử UI, thường chứa một con số (có thể để chỉ những thư chưa đọc hoặc các tin nhắn đến) hoặc một biểu tượng. Ngày nay, khi thông tin liên tục đi qua các thiết bị của chúng ta, một "badge" có thể được xem là một thành phần UI rất quan trọng trong bất kỳ thiết kế nào.

Và Còn nữa

  1. Blog

  2. Bài viết

  3. Một ứng dụng hoặc một trang Landing

  4. Một dashboard

  5. Một trang web chứa nhiều văn bản

Tuỳ biến

Trình duyệt Hỗ trợ

Vì hầu hết các thành phần trong MDL được xây dựng bằng các kỹ thuật web tiên tiến, chẳng hạn như calc(), Flexbox, querySelector và classList, nên MDL sẽ chỉ hoạt động hoàn hảo trong các trình duyệt hiện đại: Chrome, Firefox, Opera, Microsoft Edge. MDL sẽ suy giảm đáng kể trong các trình duyệt cũ hơn, chẳng hạn như IE9, bằng cách chỉ phục vụ phiên bản CSS. Các phần tử tương tác (chẳng hạn như hiệu ứng gợn sóng trong button) sẽ không có mặt.

Tóm tắt

Bây giờ bạn đã có thêm một framework cho front-end trong hộp công cụ của bạn cùng với Bootstrap và Foundation. Tuy nhiên, MDL không có ý định thay thế, hoặc trở thành một người kế nhiệm Bootstrap. Material Design là một phần trong sứ mệnh của Google nhằm đảm bảo rằng các giao diện, cũng như trải nghiệm người dùng trong các dòng sản phẩm của họ đều nhất quán, thống nhất và được cân nhắc kỹ.

Hãy tự nhắc mình về ý tưởng cốt lõi:

Vì vậy hãy nhớ, mặc dù MDL phù hợp với các sản phẩm của Google, nhưng nó có thể không tốt khi được triển khai trong một trang web không liên quan gì đến Google. Tuy nhiên, như chúng ta đã vừa khám phá, Google cung cấp toàn bộ quyền kiểm soát mã nguồn, cho phép chúng ta tùy biến nó từ chi tiết nhỏ nhất. Và đó là những gì chúng ta sẽ đề cập đến trong bài tiếp theo. Vì vậy, hãy nhớ theo dõi nhé!

Tài liệu Tham khảo

Mỗi nút có thể được cải tiến bằng .

Các thành phần cơ bản khác bạn sẽ tìm thấy trong MDL bao gồm các input, slider, toggle, menu, tooltip, và .Gặp gỡ

Ngoài ra, Google cũng cung cấp để giúp bạn nhanh chóng làm quen với cấu trúc Layout thích hợp. Có năm kiểu template trong phiên bản đầu tiên này:

Template cho layout blog của MDL khá ngon

Các phong cách của MDL được cấu trúc bằng Sass và phương pháp BEM. Các phong cách có thể được tùy biến bằng nhiều cách, ngay cả trước khi bạn tải xuống gói framework. Một trong những cách đó là với bánh xe màu trên trang . Bánh xe màu cho phép bạn lựa chọn các màu tương phản dựa trên việc chọn các màu chính. Customizer sau đó sẽ tạo ra stylesheet để bạn có thể tải về hoặc liên kết trực tiếp từ Google CDN. của MDL

Tập tin kết quả material.min.css là khá nhỏ (17.6kB gzip), nhưng đối với những người cần kiểm soát hoàn toàn để giảm xuống tối đa, thì mã nguồn có sẵn trong kho .

Tuy vậy, UI vẫn còn hoạt động tốt trong IE8. Ví dụ, hãy xem các button và phần tử table:

"Chúng ta thử thách bản thân để tạo ra một ngôn ngữ trực quan cho người dùng của chúng ta, tổng hợp các nguyên tắc cổ điển của thiết kế tốt cùng với sự đổi mới và khả năng của công nghệ và khoa học." —

của Addy Osmani

hiệu ứng gợn sóng quen thuộc
một vài template
Github
Giới thiệu về Material Design của Google
Material Design Lite
Những gì Bạn Có thể Học từ Material Design của Google
Tạo lại Hiệu ứng Gợn sóng như trong Thiết kế của Google
Giới thiệu về Material Design Lite
Thoriq Firdaus
Material Design Lite
Material Design
Dai Phong
view the original English article
Material Design Lite
đặc tả thiết kế Material Design
Bootstrap Material Design
Materialize
Material UI
Polymer
Paper Elements
các biểu tượng của Material Design
các thành phần
Customize
Theme builder
Theme builder
The MDL blog layout template
Meet the components