100

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

我已经读过使用离子指令我们可以获得很多有效的功能，比如

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

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

以及许多性能改进。

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

如果我使用 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 正在资助 angular-material项目开发，那么为什么 angular-material 与 ionic 不兼容？

如何在不失去 ionic 的性能改进和特性的情况下使用angular-material组件？

或者

将材料设计与离子一起使用有更好的主意吗？

4

3 回答 3

71

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

http://materializecss.com/

相对于其他框架的优势

  1. 纯 CSS 类，不会与 ionic 指令冲突。没有性能损失。
  2. 在我见过的所有框架中，这是唯一一个严格遵循材料设计规则的框架
  3. 几乎准备好了，它有大约 50 多个贡献者它是当前版本 0.95.3 在不到 6 个月内
  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/官方推广。越来越流行了，试试吧。与角材料的比较

更新：2015-10-23

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

它是官方的，您可以在 AngularConnect 中观看 Ionic2 演示，它具有 Material Design 作为 Android 的默认设置。我们无需担心选择 Material Design 框架。

于 2015-03-23T12:38:01.293 回答
25

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

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

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

它可以与凉亭一起安装

bower install ionic-material

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

祝你好运！

于 2015-03-18T15:13:03.020 回答
3

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

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

于 2015-10-30T11:10:51.870 回答