Ionic指令与带有Ionic框架的Angular材料指令的比较

101

我想使用ionic结合材料设计。我在使用带有自定义CSS的ionic指令和angular-material之间遇到了困难。

我已经了解到,使用ionic指令可以获得很多高效功能,例如:

  • 通过UI-router记住应用数据,即使在浏览到其他视图后返回到页面时也是如此

  • 只渲染ionic列表项,高度达到显示高度并在向上或向下滚动时重复使用

并且还有很多性能提升。

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

如果我使用angular-material,我将没有这些性能改进以及移动应用程序所需的额外功能。

Angular-material指令类似于

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

Ionic指令类似于

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

看起来Ionic正在资助angular-material项目的开发,那么为什么angular-material不能与ionic一起使用?

我如何在不失去ionic性能优化和功能的情况下使用angular-material组件?

或者

有没有更好的方法来使用material design与ionic?


可能需要一些时间,直到ngMaterial和ionic能够相互配合。Ionic始终必须支持iOS。我不确定Ionix在设计方面的发展方向。当项目开始时,他们希望所有平台上的应用程序看起来完全相同。他们在一段时间前放弃了这个目标,现在朝着更多的平台连续性发展,这也可以从招聘信息中看出。您可能想直接询问开发人员(Ionic论坛是一个很好的提问地点)关于材料设计的路线图。 - Markus Müller
1
我在Ionic论坛上发布了帖子,但没有什么运气。一些谷歌应用程序在Android和iOS上都使用Material Design。但是我目前只对Android感兴趣。iOS更加昂贵,而且每年都会有新版本 :( 这使得像我这样的初学者望而却步。我认为iOS应该为开发者账户使用有限收费。 - Vamsi
我相信他们很快会发布v1版本后的路线图。 - Markus Müller
3个回答

71

我发现了一个名为 Materializecss 的Material Design CSS框架。它看起来很有前途。这只是一个纯CSS和javascript框架。

http://materializecss.com/

与其他框架相比优势

  1. 纯CSS类,不会与ionic指令冲突。没有性能损失。
  2. 在我看过的所有框架中,这是唯一一个紧密遵循material design规则的框架
  3. 几乎就绪,它拥有50多个贡献者,在不到6个月的时间里达到了当前版本0.95.3
  4. 易于使用。具有特色导航的良好文档记录。
  5. 它几乎拥有应用所需的所有材料设计功能。

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

我希望这对于正在寻找良好的材料设计框架的任何人都有所帮助。

更新:2015-07-09

我发现了另一个轻量级功能强大且美观的材料设计CSS框架

Material Design Light http://www.getmdl.io/

它是轻量级的,具有平滑快速的动画效果,看起来很不错。它是由Google的一名开发者制作的。它被Google正式推广https://developers.google.com/web/。它变得越来越流行,请尝试。 与Angular Material的比较

更新:2015-10-23

Ionic2在Android中内置了对Material Design的支持

正式宣布,你可以观看AngularConnect中的Ionic2演示,对于Android来说,它默认采用了Material Design。我们不需要担心选择Material Design框架的问题。


1
这个问题的关键是它需要 jQuery。 - darryn.ten
1
我们只需要CSS。在Ionic中,弹出窗口、模态框和其他功能都已经存在了。因此,除非我们想使用Ionic中没有的Materialize JavaScript功能,否则大多数情况下不需要jQuery。 - Vamsi
你使用过Material Design Light http://www.getmdl.io/吗?我也遇到了关于ionic + material design的同样问题和疑问。非常感谢您对该库提供任何反馈。 - Javier Salinas
我个人没有使用过Material Design Light,但它看起来很有前途。这里是Material Design LightBootstrap的比较:http://tutorialzine.com/2015/07/comparing-bootstrap-with-mdl/,如果你使用过`Bootstrap`,会对比较有帮助。Google在其Web开发者页面中推广这个工具,因此应该足够好用。 - Vamsi

25

有一个相当新的项目叫做Ionic Material

我试用过它,效果不错,但需要注意的是它仍处于“Pre-Release Preview”模式。

根据github资源库的说法,它应该在2015年4月份进入Alpha版本。

可以使用bower进行安装

bower install ionic-material

这就是你需要做的全部,但请注意,存在错误且文档基本上不存在。

祝好运!


9
我之前见过ionic-material库,但问题在于:
  1. 它还没有完善,没有提供文档。
  2. 它没有得到积极的开发,并且缺乏良好的支持。今天我们只看到一个人工作了7天。因此,在没有保证的情况下,很难在生产应用中使用它。
  3. Angular-material和Ionic都有良好的资金和支持,非常优秀的开发人员正在以很好的速度开发它们,所以我可以信任它们。
- Vamsi

3

Ionic MaterialIonic Material Design Lite是两个新兴的库,旨在成为Ionic框架的扩展。虽然还有些不成熟,但与Ionic组件配合良好,并很好地支持了Material主题。

这里可能能提供更多见解。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接