angularjs – 如何在角材料设计中使用?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何在角材料设计中使用?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我非常新的angular.js和角材料设计。我想知道如何使用材料图标…?如
<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon>

不管用..

我想有一个问题的路径给定作为参数的icon属性。想知道这个图标文件夹实际上是在哪里。 (BTW我使用bower下载软件包)

由于其他答案没有解决我的担心,我决定写我自己的答案。

md-icon伪指令的icon属性中给出的路径是位于静态文件目录中某个位置的.png或.svg文件的URL。所以你必须将该文件的正确路径放在icon属性中。 p.s将文件放在正确的目录,以便您的服务器可以服务它。

记住md-icon不像bootstrap图标。目前,它们只是一个显示.svg文件的指令。

更新

角度材料设计已经改变了很多,因为这个问题发布。

现在有几种方法使用md-icon

第一种方法是使用SVG图标。

< md-icon md-svg-src ='< url_of_an_image_file>‘>< / md-icon>

例:

< md-icon md-svg-src ='/static/img/android.svg'\u0026gt ;\u0026lt;/md-icon\u0026gt; 要么 < md-icon md-svg-src ='{{getMyIcon()}}'>< / md-icon>

:其中getMyIcon是在$ scope中定义的方法

要么
< md-icon md-svg-icon =“social:android”>< / md-icon>

使用这个你必须到$ mdIconProvider服务来配置您的应用程序与svg iconsets。

angular.module('appSvgIconSets',['ngMaterial'])  
  .controller('DemoCtrl',function($scope) {})  
  .config(function($mdIconProvider) {
    $mdIconProvider
      .iconSet('social','img/icons/sets/social-icons.svg',24)
      .defaultIconSet('img/icons/sets/core-icons.svg',24);    
  });

第二种方式是使用字体图标。

< md-icon md-font-icon =“android”alt =“android”>< / md-icon>

< md-icon md-font-icon =“fa-magic”class =“fa”alt =“magic wand”>< / md-icon& 在这之前你必须加载像这样的字体库。 < link href =“https://fonts.googleapis.com/icon?family=Material Icons”rel =“stylesheet”>

或使用带有连字的字体图标

< md-icon md-font-library =“material-icons”> face< / md-icon>

< md-icon md-font-library =“material-icons”>#xE87C;< / md-icon>

< md-icon md-font-library =“material-icons”class =“md-light md-48”> face< / md-icon>

更多详情,请查看我们的

Angular Material mdIcon Directive documentation

$mdIcon Service Documentation

$mdIconProvider Service Documentation

原文链接:https://www.f2er.com/angularjs/146917.html

猜你在找的Angularjs相关文章