Vật liệu góc cạnh - Biểu tượng
Các md-icon, một chỉ thị Angular, là một thành phần để hiển thị các biểu tượng dựa trên vector trong ứng dụng. Nó hỗ trợ các phông chữ biểu tượng và biểu tượng SVG ngoài việc sử dụng các Biểu tượng Vật liệu của Google.
Thuộc tính
Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-icon.
| Sr.No | Mô tả về Thông Số |
|---|---|
| 1 | * md-font-icon Đây là tên chuỗi của biểu tượng CSS được liên kết với font-face, sẽ được sử dụng để hiển thị biểu tượng. Yêu cầu tải trước phông chữ và kiểu CSS đã đặt tên. |
| 2 | * md-font-set Đây là tên kiểu CSS được liên kết với thư viện phông chữ, sẽ được gán làm lớp cho chữ ghép biểu tượng phông chữ. Giá trị này cũng có thể là một bí danh được sử dụng để tra cứu tên lớp; sử dụng nội bộ $ mdIconProvider.fontSet (<alias>) để xác định tên kiểu. |
| 3 | * md-svg-src Đây là URL chuỗi (hoặc biểu thức) được sử dụng để tải, lưu vào bộ nhớ cache và hiển thị một SVG bên ngoài. |
| 4 | * md-svg-icon Đây là tên chuỗi được sử dụng để tra cứu biểu tượng từ bộ nhớ cache bên trong; chuỗi hoặc biểu thức nội suy cũng có thể được sử dụng. Các tên bộ cụ thể có thể được sử dụng với cú pháp <tên bộ>: <tên biểu tượng>. Để sử dụng các bộ biểu tượng, các nhà phát triển phải đăng ký trước các bộ bằng dịch vụ $ mdIconProvider. |
| 5 | aria-label Biểu tượng nhãn này cho khả năng tiếp cận. Nếu một chuỗi trống được cung cấp, biểu tượng sẽ bị ẩn khỏi lớp trợ năng với aria-hidden = "true". Nếu không có nhãn aria trên biểu tượng cũng như nhãn trên phần tử mẹ, một cảnh báo sẽ được ghi vào bảng điều khiển. |
| 6 | alt Biểu tượng nhãn này cho khả năng tiếp cận. Nếu một chuỗi trống được cung cấp, biểu tượng sẽ bị ẩn khỏi lớp trợ năng với aria-hidden = "true". Nếu không có alt trên biểu tượng cũng như không có nhãn trên phần tử mẹ, một cảnh báo sẽ được ghi vào bảng điều khiển. |
Thí dụ
Ví dụ sau đây cho thấy việc sử dụng chỉ thị md-icon và cả việc sử dụng các biểu tượng.
am_icons.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.iconDemo .glyph {
border-bottom: 1px dotted #ccc;
padding: 10px 0 20px;
margin-bottom: 20px;
}
.iconDemo .preview-glyphs {
display: flex;
flex-direction: row;
}
.iconDemo .step {
flex-grow: 1;
line-height: 0.5;
}
.iconDemo .material-icons.md-18 {
font-size: 18px;
}
.iconDemo .material-icons.md-24 {
font-size: 24px;
}
.iconDemo .material-icons.md-36 {
font-size: 36px;
}
.iconDemo .material-icons.md-48 {
font-size: 48px;
}
.iconDemo .material-icons.md-dark {
color: rgba(0, 0, 0, 0.54);
}
.iconDemo .material-icons.md-dark.md-inactive {
color: rgba(0, 0, 0, 0.26);
}
.iconDemo .material-icons.md-light {
color: white;
}
.iconDemo .material-icons.md-light.md-inactive {
color: rgba(255, 255, 255, 0.3);
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('iconController', iconController);
function iconController ($scope) {
var iconData = [
{name: 'accessibility' , color: "#777" },
{name: 'question_answer', color: "rgb(89, 226, 168)" },
{name: 'backup' , color: "#A00" },
{name: 'email' , color: "#00A" }
];
$scope.fonts = [].concat(iconData);
$scope.sizes = [
{size:"md-18",padding:0},
{size:"md-24",padding:2},
{size:"md-36",padding:6},
{size:"md-48",padding:10}
];
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "iconContainer" class = "iconDemo"
ng-controller = "iconController as ctrl" ng-cloak>
<div class = "glyph" ng-repeat = "font in fonts" layout = "row">
<div ng-repeat = "it in sizes" flex layout-align = "center center"
style = "text-align: center;" layout = "column">
<div flex></div>
<div class = "preview-glyphs">
<md-icon ng-style = "{color: font.color}"
aria-label = "{{ font.name }}"
class = "material-icons step"
ng-class = "it.size">
{{ font.name }}
</md-icon>
</div>
</div>
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.