web-dev-qa-db-fra.com

Ionic directives VS Angular directives matérielles avec Ionic Framework

Je veux utiliser ionique avec la conception matérielle. Je suis coincé entre les directives ionic et les CSS personnalisées et angular-material

J'ai lu qu'en utilisant les directives ionic nous obtenons beaucoup de fonctionnalités efficaces comme

  • Les données de l'application sont mémorisées avec UI-router, même après avoir navigué dans une autre vue et être retourné à la page

  • Les éléments de la liste ionique sont rendus uniquement jusqu'à la hauteur d'affichage et réutilisés lors du défilement vers le haut ou vers le bas

et beaucoup d'améliorations de performances.

Mais si j'utilise les directives ionic, elles n'ont pas la conception matérielle.

Si j'utilise un matériau angulaire, je ne bénéficierai pas de ces améliorations de performances ni des fonctionnalités supplémentaires nécessaires pour une application mobile.

Les directives de matériaux angulaires sont comme

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

Les directives ioniques sont comme

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

On dirait que Ionic finance le matériau angulaire le développement du projet, pourquoi le matériau angulaire n'est-il pas compatible avec l'utilisation avec ionique?

Comment utiliser des composants angular-material sans perdre les améliorations de performances et les fonctionnalités de ionique?

OR

existe-t-il une meilleure idée d'utiliser la conception de matériaux avec ionique?

93
Vamsi

J'ai trouvé un framework CSS de conception de matériaux appelé Materializecss . Cela semble prometteur. Il s'agit simplement d'un simple framework CSS et javascript.

http://materializecss.com/

Avantages par rapport aux autres cadres

  1. Les classes CSS pures ne seront pas en conflit avec les directives ionic. Aucune perte de performance.
  2. De tous les cadres que j'ai vus, c'est le seul à suivre de près les règles de conception des matériaux
  3. Presque prêt, il compte plus de 50 contributeurs. La version actuelle est 0.95.3 en moins de 6 mois.
  4. Facile à utiliser. Bien documenté avec la navigation sage caractéristique.
  5. Il possède presque toutes les fonctionnalités de conception matérielles nécessaires à une application.

Cette page http://materializecss.com/getting-started.html vous montrera comment l’inclure dans vos projets.

J'espère que cela aidera tous ceux d'entre vous à la recherche d'un bon cadre de conception matérielle.

UPDATE: 2015-07-09

J'ai trouvé un autre cadre CSS puissant et léger pour la conception de matériaux

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

Il est léger, présente des animations fluides et rapides et semble plutôt beau. Il a été créé par l'un des développeurs de Google. Il est officiellement promu par Google https://developers.google.com/web/ . Il devient très populaire, essayez-le. Comparaison avec Angular Matériel

UPDATE: 2015-10-23

Ionic2 prend en charge InBuilt pour la conception de matériel dans Android

C'est officiel, vous pouvez regarder démo de Ionic2 dans AngularConnect , il a la conception matérielle par défaut pour Android. Nous n'avons pas à nous soucier de choisir un cadre de conception de matériaux.

68
Vamsi

Il existe un projet assez récent appelé matériau ionique .

Je l'ai essayé et cela fonctionne plutôt bien, mais sachez qu'il est toujours en mode "Aperçu préliminaire".

Selon le github repo , il devrait entrer dans Alpha en avril 2015.

Il peut être installé avec bower

bower install ionic-material

C'est à peu près tout ce que vous devez faire, mais soyez averti, il y a des bugs et la documentation est pratiquement inexistante.

Bonne chance!

24
darryn.ten

Ionic Material et Ionic Material Design Lite sont deux nouvelles bibliothèques en herbe qui visent à être une extension du cadre ionic. Bien qu'un peu immature, fonctionne bien avec les composants ionic) et supporte bien les thèmes.

This pourrait probablement donner plus d'un aperçu.

3
varna