Bahan Sudut - Ikon
Itu md-icon, direktif Angular, adalah komponen untuk menampilkan ikon berbasis vektor dalam aplikasi. Ini mendukung font ikon dan ikon SVG juga selain menggunakan Ikon Material Google.
Atribut
Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-icon.
| Sr Tidak | Parameter & Deskripsi |
|---|---|
| 1 | * md-font-icon Ini adalah nama string ikon CSS yang terkait dengan font-face, yang akan digunakan untuk membuat ikon. Membutuhkan font dan gaya CSS yang diberi nama untuk dimuat sebelumnya. |
| 2 | * md-font-set Ini adalah nama gaya CSS yang terkait dengan pustaka font, yang akan ditetapkan sebagai kelas untuk pengikat font-icon. Nilai ini juga dapat berupa alias yang digunakan untuk mencari nama kelas; gunakan $ mdIconProvider.fontSet (<alias>) secara internal untuk menentukan nama gaya. |
| 3 | * md-svg-src Ini adalah String URL (atau ekspresi) yang digunakan untuk memuat, meng-cache, dan menampilkan SVG eksternal. |
| 4 | * md-svg-icon Ini adalah nama string yang digunakan untuk mencari ikon dari cache internal; string atau ekspresi yang diinterpolasi juga dapat digunakan. Nama set tertentu dapat digunakan dengan sintaks <set name>: <icon name>. Untuk menggunakan kumpulan ikon, pengembang diharuskan untuk melakukan pra-registrasi kumpulan menggunakan layanan $ mdIconProvider. |
| 5 | aria-label Ikon label ini untuk aksesibilitas. Jika string kosong diberikan, ikon akan disembunyikan dari lapisan aksesibilitas dengan aria-hidden = "true". Jika tidak ada aria-label pada ikon atau label pada elemen induk, peringatan akan dicatat ke konsol. |
| 6 | alt Ikon label ini untuk aksesibilitas. Jika string kosong diberikan, ikon akan disembunyikan dari lapisan aksesibilitas dengan aria-hidden = "true". Jika tidak ada alt pada ikon atau label pada elemen induk, peringatan akan dicatat ke konsol. |
Contoh
Contoh berikut menunjukkan penggunaan direktif md-icons dan juga penggunaan ikon.
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>Hasil
Verifikasi hasilnya.