web-dev-qa-db-fra.com

Le matériel Angular 4 est-il réactif comme le bootstrap?)

Je commence un nouveau projet avec Angular 4 et j'ai besoin de créer une interface utilisateur réactive et agréable.

  • le bootstrap vous donne la réactivité, mais aucune sensation matérielle
  • matériau angulaire fournit cette expérience Nice UI https://material.angular.io

Je sais que bootstrap et je l'ai utilisé dans les précédentes applications AngularJS, mais angular est nouveau pour moi. Il semble facile de suivre la documentation mais je ne trouve pas le support de réactivité .

Je ne veux pas les mélanger mais je n'ai pas pu trouver cette réactivité de colonne pour le support mobile que bootstrap fournit.

Est-ce que je manque quelque chose? Est-ce que angular angulaire prend en charge une réactivité similaire ou dois-je utiliser les deux dans mon application?

26
Brian

Pour ajouter de la réactivité dans les modernes angular angulaires que vous pouvez utiliser Flex-layout , il est complètement distinct de material2 , de sorte que vous pouvez l'utiliser même sans utiliser material2 dans votre application.

Gardez à l'esprit que, comme flex-layout est basé sur Flexbox CSS il en est ainsi non pris en charge par les anciens navigateurs .

Voici quelques exemples

Découvrez également le nouvel épisode épisode ngAir qui parle de Flex-Layout

MISE À JOUR:

À partir de 6.0.0-beta.16flex-layout a maintenant une API pour prendre en charge CSS Grid . Vous pouvez trouver plus de détails en cochant pr # 712

26
Kuncevič

J'ai essayé de tester Angular Matériel avec deux projets différents Angular, une construction avec Angular CLI et la seconde avec Modèle Aspnet Core 2.0 de Visual Studio. Avec les deux, je n'ai pas réussi à démarrer avec une simple page. Ce fut une expérience assez frustrante de contourner le problème avant de pouvoir exécuter le serveur. Pour commencer, npm instaling @ angular/material, demande de vous mettre à niveau Angular vers la version 5.0.0. Dans ce cas, il s’est plaint du fait que la cli n’était pas à la version 2.3.1 ou supérieure à la version 5.0.0. Je devais faire quelques solutions de contournement Dans un tutoriel que je suivais pour mettre en place le formulaire, il fallait utiliser mdInput. Mais il s’est plaint et je me suis rendu compte que c’était maintenant matInput. Aujourd’hui, c’est mon troisième jour d’essayer sans succès. J'espère arriver à un simple exemple de page. en utilisant un composant ou un formulaire avant mardi la semaine prochaine. D'un autre côté, je n'ai rencontré aucun problème avec Bootstrap. Toujours stable. Mais je voulais voir d'autres options. a eu un problème avec PrimeNG et a abandonné l’essai Angular Material. Quelqu'un at-il vécu la même chose?

1
Manuel Hernandez

Un peu tard, mais j’ai créé un modèle de départ qui montre un exemple de disposition sensible avec Material 5 et Angular 5), ainsi qu’un routage simple. https: // github. com/kenji-1996/matériel-sidenav-responsive-starter

Utilise Material et Flex, pas de bibliothèque extérieure

0
Cacoon