离子指令与 Ionic 框架的 Angular 材料指令

Posted 2023-02-22

【中文标题】离子指令与 Ionic 框架的 Angular 材料指令

【英文标题】：Ionic directives VS Angular material directives with Ionic Framework

【发布时间】：2015-05-09 03:10:31

【问题描述】：

我想在材料设计中使用ionic。我被困在使用带有自定义 CSS 的离子指令和 angular-material

我已经读到使用离子指令我们可以获得许多高效的功能，例如

即使在导航到其他视图并返回页面之后，UI-router 也会记住应用数据

Ionic 列表项仅渲染到显示高度，并在向下或向上滚动时重复使用

还有很多性能改进。

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

如果我使用 angular-material，我将不会获得这些性能改进以及移动应用程序所需的额外功能。

Angular-material 指令类似于

<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 is funding angular-material 项目开发，那么为什么 angular-material 与 ionic 不兼容？

如何使用angular-material 组件而不失去离子的性能改进和功能？

或

将材料设计与 ionic 结合使用是否有更好的想法？

【问题讨论】：

这可能需要一些时间，直到 ngMaterial 和 ionic 可以相互配合。 Ionic 也必须始终支持 ios。我不确定 Ionix 在设计方面的发展方向。当项目开始时，他们希望应用程序在所有平台上看起来都一样。他们前段时间取消了这个目标，现在开始寻求更多的平台连续性，招聘信息也显示了这一点。您可能想直接向开发人员询问材料设计的路线图（Ionic 论坛是一个很好的提问场所）。

我在 ionic 论坛上发过帖子，但没有运气。一些谷歌应用程序在 android 和 ios 上都使用材料设计。但我目前对android感兴趣。 iOS 每年都更贵 :( 。它只是不鼓励像我这样的初学者加入 ios。我认为 ios 应该对开发者帐户使用有限的费用。

我相信他们会在不久的将来宣布发布 v1 路线图。

【参考方案1】：

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

http://materializecss.com/

相对于其他框架的优势

纯 CSS 类，不会与 ionic 指令冲突。没有性能损失。 在我见过的所有框架中，这是唯一一个严格遵循材料设计规则的框架 几乎准备就绪，它有大约 50 多个贡献者，当前版本 0.95.3 不到 6 个月 易于使用。有据可查的功能明智的导航。 它具有应用所需的几乎所有材料设计功能。

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

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

更新：2015-07-09

我找到了另一个轻量级的强大漂亮的材料设计 CSS 框架

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

它很轻巧，动画流畅快速，看起来很不错。它是由一位 Google 开发人员制作的。由googlehttps://developers.google.com/web/官方推广。越来越流行了，试试吧。 Comparision with Angular Material

更新：2015-10-23

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

它是官方的，你可以观看Ionic2 demo in AngularConnect，它有Material Design作为Android的默认设置。我们无需担心选择 Material Design 框架。

【讨论】：

最大的问题是它需要 jQuery

我们只需要css。 Popup、modals 和其他功能存在于 ionic 中。因此，除非我们尝试使用不在 ionic 中的物化 javascript 功能，否则大部分情况下都不需要 jquery。

你对使用 Material Design Light 有什么反馈吗getmdl.io 我在这里遇到了同样的问题和关于离子 + 材料设计的问题。非常感谢您对图书馆的任何反馈

我没有亲自使用过Material Design Light，看起来很有希望。这是Material Design Light和bootstraptutorialzine.com/2015/07/comparing-bootstrap-with-mdl的比较，如果你使用过bootstrap，它会有所帮助。谷歌在其网络开发者页面中宣传这一点。所以，它必须足够好。

【参考方案2】：

Ionic Material 和Ionic Material Design Lite 是两个萌芽的新库，旨在成为离子框架的扩展。虽然有点不成熟，但可以很好地与离子组件配合使用，并且很好地支持材料主题。

This 可能会提供更多见解。

【参考方案3】：

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

我试过了，效果很好，但请注意，它仍处于“预发布预览”模式。

根据github repo，它应该在 2015 年 4 月进入 Alpha。

可以用bower安装

bower install ionic-material

这几乎是您需要做的所有事情，但请注意，存在错误并且文档基本上不存在。

祝你好运！

【讨论】：

我以前看过 ionic-material 库，但问题是 1。这还远未完成。没有可用的文档。 2.这个不是在积极开发中，也没有很好的支持。正如今天所见，只有一个人为此工作了 7 天。所以很难在没有保证的情况下在生产应用程序中使用它。 3. Angular-material 和 ionic 都有很好的资金和支持，并且非常优秀的开发人员正在以良好的速度进行开发。所以我可以信任他们。