Material Design Lite - Thanh tiến trình
MDL cung cấp một loạt các lớp CSS để áp dụng các cải tiến hình ảnh và hành vi được xác định trước khác nhau và hiển thị các loại thanh tiến trình khác nhau. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | mdl-js-progress Đặt hành vi MDL cơ bản thành chỉ báo tiến trình và là một lớp bắt buộc. |
| 2 | mdl-progress__indeterminate Đặt hoạt ảnh thành chỉ báo tiến trình và là một lớp tùy chọn. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-js-progress các lớp để hiển thị các loại thanh tiến trình khác nhau.
mdl_progressbars.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Progress bar</h4>
<div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
<h4>Indeterminate Progress bar</h4>
<div id = "progressbar2"
class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<h4>Buffering Progress bar</h4>
<div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
<script language = "javascript">
document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
</script>
</body>
</html>Kết quả
Xác minh kết quả.