怎么评价Angular推出的Material,相比Polymer如何

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么评价Angular推出的Material,相比Polymer如何相关的知识,希望对你有一定的参考价值。

angular和polymer算是底层框架,material只是上层的一种组件实现方式,所以它们不太适合对比。换句话说,你用angular,polymer,甚至jQuery都能实现一套material的东西,只是各自的实现方式会有差异。

说两者后期会整合的,不太看好,因为内部的实现方式差别较大,所以我感觉到最后可能是有angular和polymer两个不同实现的material库
参考技术A angular和polymer算是底层框架,material只是上层的一种组件实现方式,所以它们不太适合对比。换句话说,你用angular,polymer,甚至jQuery都能实现一套material的东西,只是各自的实现方式会有差异。

说两者后期会整合的,不太看好,因为内部的实现方式差别较大,所以我感觉到最后可能是有angular和polymer两个不同实现的material

polymer 提供了一套开发组件的模式, ngMaterial在其基础上开发了一套 material design 风格的组件。
来源:知乎

Angular的Material完全还处在前期状态,官网上也说了:This project is still www.hbbz08.com in early preview. It is a complementary effort to the Polymer project's paper elements collection.都是谷歌的产品,都是Google Meterial Design的UI,我觉得它俩应该会整合。

如何让 Angular Material Icon 在我的 Angular 应用程序中显示轮廓?

【中文标题】如何让 Angular Material Icon 在我的 Angular 应用程序中显示轮廓?【英文标题】:How can I get Angular Material Icon to show the outline in my Angular app? 【发布时间】:2018-10-25 18:37:00 【问题描述】:

我现在有

<mat-icon>info<mat-icon>

它给出了填充颜色的信息图标的输出。但是,我只想要图标的轮廓。我该怎么做?

我想要的图标是https://material.io/tools/icons/?icon=info&style=outline而不是https://material.io/tools/icons/?icon=info&style=baseline

【问题讨论】:

How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?的可能重复 【参考方案1】:

你可以包括这个 |Material+Icons+Outlined在url中以大纲显示材料图标。

例子:

@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");

然后在模板文件中,可以添加material-icons-outlined

<mat-icon class="material-icons-outlined">home</mat-icon>

【讨论】:

【参考方案2】:

编辑:5/2019

这个问题已经过时了。可以在此处找到更深入的最新答案:How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

一般的想法是默认情况下不导入某些图标,需要从不同的库中定位。


原答案:

您正在寻找&lt;mat-icon&gt;info_outline&lt;/mat-icon&gt;

您可以对具有轮廓图像的任何项目使用相同的模板,但不要尝试将其用于填充/轮廓相同的对象。

例如&lt;mat-icon&gt;label&lt;/mat-icon&gt;&lt;mat-icon&gt;label_outline&lt;/mat-icon&gt;

【讨论】:

谢谢!我试图在名称前加上“大纲”。 当图标名称具有复杂名称时,这对我不起作用 也对我不起作用,特别是对于 edit_outline 图标。谢尔曼的回答虽然效果很好 问题并不过时,您提供的链接是关于使用材料设计的,与角材料 AFAICS 无关。 > 这不是 Angular 或 Material 特定的问题哦,但这是。它有相应的标签,并且在标题和问题本身中特别提到了角度材料。【参考方案3】:

我就是这样做的:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
rel="stylesheet"/>

<mat-icon fontSet="material-icons-outlined">edit</mat-icon>

找到解决方案here。

【讨论】:

【参考方案4】:

把它放在索引文件夹中 " "

编辑

【讨论】:

【参考方案5】:

索引.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

在 e.q. 中列出所有 mat-icon应用模块

export class AppModule  
  constructor(iconRegistry: MatIconRegistry) 
    iconRegistry.setDefaultFontSetClass('material-icons-outlined');
  

【讨论】:

这就是我要找的。在一处进行更改以在填充和轮廓之间快速切换。【参考方案6】:

直到知道 Google 还没有将他们的新设计发布为字体或 svg 图标集,我才感到不满意。因此我整理了一个小的 npm 包来解决这个问题。

https://www.npmjs.com/package/ts-material-icons-svg

只需导入您想使用的图标并将它们添加到您的注册表中。自述文件中有简短教程。

马可干杯

【讨论】:

以上是关于怎么评价Angular推出的Material,相比Polymer如何的主要内容,如果未能解决你的问题,请参考以下文章

如何让 Angular Material Icon 在我的 Angular 应用程序中显示轮廓?

angular-material md-card 动态高度

从 Angular Material 2 中的 MdDialog 返回数据

如何更改 Angular Material 上 mat-icon 的大小? [复制]

Angular Material 找不到 Angular Material 核心主题

Angular Material md-input-container 占用大量空间