Ionic指令VS带Ionic框架的Angular材料指令



我想在材料设计中使用离子。我被困在使用自定义CSS和角度材料的离子指令之间

我读到,使用离子指令,我们可以获得许多有效的功能,如

  • 即使在导航到其他视图并返回页面后,应用程序数据也会被UI路由器记住

  • Ionic列表项仅呈现到显示高度,并在向下或向上滚动时重复使用

以及许多性能改进。

但是,如果我使用离子指令,它们就没有材料设计。

如果我使用有棱角的材料,我将不会有这些性能改进,以及移动应用程序所需的额外功能。

角度材料指令类似

<md-list>
  <md-item ng-repeat="item in items">
    Hello, {{item}}!
  </md-item>
</md-list>

离子指令类似

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

看起来Ionic正在资助角材料项目的开发,那么为什么角材料与Ionic不兼容?

如何在不失去离子的性能改进和功能的情况下使用角材料组件?

有没有更好的想法来使用离子材料设计?

我发现了一个名为Materializecss的材料设计CSS框架。看起来很有希望。它只是简单的CSS和javascript框架。

http://materializecss.com/

相对于其他框架的优势

  1. 纯CSS类,不会与Ion指令冲突。没有性能损失
  2. 在我见过的所有框架中,这是唯一一个严格遵循材料设计规则的框架
  3. 几乎准备好了,它有大约50多个贡献者,在不到6个月的时间里达到了当前版本0.95.3
  4. 易于使用。有完善的功能导航文档
  5. 它几乎具备应用程序所需的所有材料设计功能

本页http://materializecss.com/getting-started.html将向您展示如何将其包含在您的项目中。

我希望这能帮助你们中的任何人寻找一个好的材料设计框架。

更新:2015-07-09

我发现了另一个轻量级强大漂亮的CSS框架用于材料设计

材料设计灯 http://www.getmdl.io/

它重量轻,动画流畅快速,看起来很不错。它是由谷歌的一个开发者制作的。它由谷歌官方推广https://developers.google.com/web/.它越来越受欢迎,试试看。与Angular Material 的比较

更新:2015-10-23

Ionic2内置支持Android中的材料设计

它是官方的,你可以在AngularConnect中观看Ionic2演示,它的材料设计是Android的默认设置。我们不需要担心选择材料设计框架。

有一个相当新的项目叫做离子材料。

我已经试过了,效果很好,但请注意,它仍处于"预发布预览"模式。

根据github回购协议,它应该在2015年4月进入阿尔法。

可以安装bower

bower install ionic-material

这几乎就是你需要做的全部,但请注意,存在漏洞,文档基本上不存在。

祝你好运!

离子材料和离子材料设计精简版是两个正在萌芽的新库,旨在成为离子框架的扩展。虽然有点不成熟,但它能很好地与离子成分配合使用,并很好地支持材料的主题化。

这可能会提供更多的见解。

最新更新