Cài Đặt Thư Viện Materialize CSS Trong JavaScript
Materialize CSS là một thư viện giao diện người dùng (UI) mã nguồn mở, được phát triển dựa trên triết lý thiết kế Material Design của Google. Với Materialize CSS, bạn có thể dễ dàng thiết kế các giao diện đẹp mắt, hiện đại và tương thích tốt trên nhiều thiết bị và nền tảng khác nhau.
Trong bài viết này, chúng ta sẽ tìm hiểu cách cài đặt và sử dụng thư viện Materialize CSS trong một ứng dụng JavaScript. Bài viết sẽ bao gồm các phần như sau:
- Giới thiệu về Materialize CSS
- Yêu cầu hệ thống
- Cài đặt Materialize CSS
- Sử dụng các thành phần giao diện
- Tích hợp JavaScript vào Materialize CSS
- Một số thành phần phổ biến trong Materialize CSS
- Những lưu ý và mẹo khi sử dụng Materialize CSS
- Tổng kết
1. Giới Thiệu Về Materialize CSS
Materialize CSS kết hợp các nguyên tắc thiết kế Material Design vào các thành phần giao diện người dùng, giúp tạo ra các trang web và ứng dụng đẹp mắt, dễ sử dụng và trực quan. Nó cung cấp các thành phần mã hóa sẵn bao gồm: Buttons, Cards, Forms, Modals, và nhiều hơn nữa.
2. Yêu Cầu Hệ Thống
Trước khi cài đặt Materialize CSS, hãy đảm bảo rằng bạn đã cài đặt các công cụ và phần mềm sau:
- Một trình soạn thảo mã nguồn (như Visual Studio Code, Atom, Sublime Text).
- Node.js và npm (Node Package Manager) để quản lý các gói thư viện.
Cài Đặt Node.js Và npm
Để cài đặt Node.js và npm, bạn truy cập trang web chính thức của Node.js tại nodejs.org, tải về và cài đặt phiên bản phù hợp với hệ điều hành của bạn. Sau khi cài đặt xong, bạn có thể kiểm tra bằng cách mở terminal (hoặc command prompt) và chạy lệnh sau:
node -v
npm -v
Nếu mọi thứ cài đặt đúng, bạn sẽ thấy phiên bản của Node.js và npm được hiển thị.
3. Cài Đặt Materialize CSS
Có nhiều cách để cài đặt Materialize CSS, bạn có thể tải về trực tiếp từ trang chủ, hoặc sử dụng npm và CDN. Dưới đây là các bước cài đặt thông qua ba cách này:
Cài Đặt Qua CDN
CDN (Content Delivery Network) là cách cài đặt nhanh và dễ dàng nhất. Bạn chỉ cần thêm các liên kết CSS và JavaScript của Materialize CSS vào tệp HTML của bạn:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize CSS Installation</title>
<!-- Materialize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- JavaScript Materialize -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Cài Đặt Qua npm
Nếu bạn đang phát triển một dự án phức tạp và muốn quản lý dễ dàng các gói thư viện, bạn có thể sử dụng npm để cài đặt Materialize CSS:
- Mở terminal và tạo một thư mục dự án mới:
mkdir my-project
cd my-project
- Khởi tạo một dự án Node.js mới:
npm init -y
- Cài đặt Materialize CSS bằng npm:
npm install materialize-css
- Sau khi cài đặt xong, bạn có thể nhập Materialize CSS vào tệp JavaScript của bạn:
import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize.min.js';
Tải Về Trực Tiếp
Bạn cũng có thể tải về thư viện Materialize CSS từ trang chủ materializecss.com, sau đó giải nén và lưu vào thư mục dự án của bạn. Thêm các tệp này vào tệp HTML của bạn tương tự như cách làm với CDN.
4. Sử Dụng Các Thành Phần Giao Diện
Bây giờ, khi đã cài đặt xong Materialize CSS, bạn có thể bắt đầu sử dụng các thành phần giao diện người dùng mà thư viện cung cấp. Dưới đây là một số ví dụ cơ bản:
Buttons
Dưới đây là cách tạo button với Materialize CSS:
<a class="waves-effect waves-light btn">button</a>
Bạn có thể thêm các lớp CSS khác để tùy chỉnh như thêm biểu tượng vào button:
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
Forms
Form là thành phần không thể thiếu trong các trang web, để tạo một form sử dụng Materialize CSS:
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
</form>
</div>
Cards
Các thẻ (cards) là một thành phần mạnh mẽ để hiển thị thông tin tổ chức:
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/sample-1.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p><a href="#">This is a link</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
5. Tích Hợp JavaScript Vào Materialize CSS
Để kích hoạt các thành phần JavaScript-Driven như modals, tooltips, và dropdowns, bạn cần mã lệnh JavaScript. Dưới đây là cách sử dụng:
Modals (Hộp Thoại)
Đầu tiên, tạo cấu trúc modal trong HTML của bạn:
<!-- Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
Tiếp theo, thêm đoạn mã JavaScript để khởi tạo modal:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
Tooltips
Để thêm tooltips vào các thành phần, bạn cần thiết lập cấu trúc HTML:
<a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">Hover me!</a>
Khởi tạo tooltips bằng JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tooltipped');
var instances = M.Tooltip.init(elems);
});
6. Một Số Thành Phần Phổ Biến Trong Materialize CSS
Ngoài các ví dụ trên, Materialize CSS còn cung cấp nhiều thành phần khác nhau. Dưới đây là một số thành phần phổ biến:
Navbars (Thanh Điều Hướng)
<div class="navbar">
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
Collapsible (Khung Thu Gọn)
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>
Khởi tạo thành phần Collapsible bằng JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
Dropdowns (Danh Sách Thả Xuống)
<!-- Trigger -->
<a class="dropdown-trigger btn" href="#" data-target="dropdown1">Drop Me!</a>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
Khởi tạo Dropdowns bằng JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
7. Những Lưu Ý Và Mẹo Khi Sử Dụng Materialize CSS
Tính Năng Responsive
Materialize CSS tích hợp sẵn các tính năng responsive, kiểm tra kỹ lưỡng giao diện trên các thiết bị khác nhau để đảm bảo giao diện hoạt động tốt.
Sử Dụng Grid System
Sử dụng hệ thống lưới của Materialize CSS để bố trí các thành phần giao diện dễ dàng và nhất quán.
Tùy chỉnh với SASS
Nếu bạn muốn tùy chỉnh sâu hơn, Materialize CSS hỗ trợ SASS, một mở rộng của CSS cung cấp các tính năng mạnh mẽ như biến số và nhập khẩu tệp. Bạn có thể tải về các tệp SASS từ kho lưu trữ GitHub của Materialize CSS.
8. Tổng Kết
Trong bài viết này, chúng ta đã cùng nhau khám phá cách cài đặt và sử dụng Materialize CSS trong các ứng dụng JavaScript. Từ việc cài đặt ban đầu bằng CDN, npm, đến việc sử dụng các thành phần cơ bản như buttons, forms, và modals. Bằng cách nắm vững các kiến thức này, bạn sẽ có thể dễ dàng tạo ra các giao diện người dùng hiện đại, chuyên nghiệp và thân thiện với người dùng.
Hy vọng rằng hướng dẫn này sẽ giúp bạn bắt đầu nhanh chóng với Materialize CSS và cung cấp nền tảng để bạn có thể tùy chỉnh và mở rộng giao diện theo nhu cầu của mình. Hãy thử và khám phá thêm tài liệu trên trang chủ Materialize CSS để làm phong phú hơn kiến thức của bạn!
Comments