Winkelmaterial - Symbole

Das md-icon, eine Angular-Direktive, ist eine Komponente zum Anzeigen vektorbasierter Symbole in der Anwendung. Neben der Verwendung der Google Material Icons werden auch Symbolschriftarten und SVG-Symbole unterstützt.

Attribute

In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-icon.

Sr.Nr.	Parameter & Beschreibung
1	* md-font-icon Dies ist der Zeichenfolgenname des CSS-Symbols, das der Schriftart zugeordnet ist und zum Rendern des Symbols verwendet wird. Erfordert das Vorladen der Schriftarten und der genannten CSS-Stile.
2	* md-font-set Dies ist der CSS-Stilname, der der Schriftartenbibliothek zugeordnet ist und als Klasse für die Schriftart-Symbol-Ligatur zugewiesen wird. Dieser Wert kann auch ein Alias sein, der zum Nachschlagen des Klassennamens verwendet wird. Verwenden Sie intern $ mdIconProvider.fontSet (<Alias>), um den Stilnamen zu bestimmen.
3	* md-svg-src Dies ist die String-URL (oder der Ausdruck), die zum Laden, Zwischenspeichern und Anzeigen einer externen SVG-Datei verwendet wird.
4	* md-svg-icon Dies ist der Zeichenfolgenname, der zum Nachschlagen des Symbols aus dem internen Cache verwendet wird. Es können auch interpolierte Zeichenfolgen oder Ausdrücke verwendet werden. Bestimmte Satznamen können mit der Syntax <Satzname>: <Symbolname> verwendet werden. Um Symbolsätze verwenden zu können, müssen Entwickler die Sätze mithilfe des Dienstes $ mdIconProvider vorregistrieren.
5	aria-label Dieses Beschriftungssymbol dient der Barrierefreiheit. Wenn eine leere Zeichenfolge angegeben wird, wird das Symbol mit aria-hidden = "true" vor der Eingabehilfenebene ausgeblendet. Wenn das Symbol weder eine Arienbeschriftung noch eine Beschriftung des übergeordneten Elements enthält, wird eine Warnung an der Konsole protokolliert.
6	alt Dieses Beschriftungssymbol dient der Barrierefreiheit. Wenn eine leere Zeichenfolge angegeben wird, wird das Symbol mit aria-hidden = "true" vor der Eingabehilfenebene ausgeblendet. Wenn das Symbol weder eine Alt noch eine Beschriftung des übergeordneten Elements enthält, wird eine Warnung an der Konsole protokolliert.

Beispiel

Das folgende Beispiel zeigt die Verwendung der Direktive md-icons sowie die Verwendung von Symbolen.

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>

Ergebnis

Überprüfen Sie das Ergebnis.