Materiale angolare - icone
Il md-icon, una direttiva Angular, è un componente per mostrare le icone basate su vettori nell'applicazione. Supporta anche i caratteri delle icone e le icone SVG oltre a utilizzare le icone dei materiali di Google.
Attributi
La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-icon.
| Suor n | Parametro e descrizione |
|---|---|
| 1 | * md-font-icon Questo è il nome della stringa dell'icona CSS associata al carattere del carattere, che verrà utilizzata per eseguire il rendering dell'icona. Richiede che i caratteri e gli stili CSS con nome siano precaricati. |
| 2 | * md-font-set Questo è il nome dello stile CSS associato alla libreria dei caratteri, che verrà assegnato come classe per la legatura dell'icona del carattere. Questo valore può anche essere un alias utilizzato per cercare il nome della classe; utilizzare internamente $ mdIconProvider.fontSet (<alias>) per determinare il nome dello stile. |
| 3 | * md-svg-src Questo è l'URL della stringa (o espressione) utilizzato per caricare, memorizzare nella cache e visualizzare un SVG esterno. |
| 4 | * md-svg-icon Questo è il nome della stringa utilizzato per la ricerca dell'icona dalla cache interna; possono essere utilizzate anche stringhe o espressioni interpolate. È possibile utilizzare nomi di set specifici con la sintassi <nome set>: <nome icona>. Per utilizzare i set di icone, gli sviluppatori devono preregistrare i set utilizzando il servizio $ mdIconProvider. |
| 5 | aria-label Questa icona etichetta per l'accessibilità. Se viene fornita una stringa vuota, l'icona verrà nascosta dal livello di accessibilità con aria-hidden = "true". Se non è presente un'etichetta aria sull'icona né un'etichetta sull'elemento padre, verrà registrato un avviso nella console. |
| 6 | alt Questa icona etichetta per l'accessibilità. Se viene fornita una stringa vuota, l'icona verrà nascosta dal livello di accessibilità con aria-hidden = "true". Se non è presente alcun alt sull'icona né un'etichetta sull'elemento padre, verrà registrato un avviso nella console. |
Esempio
L'esempio seguente mostra l'uso della direttiva md-icons e anche l'uso delle icone.
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>Risultato
Verifica il risultato.