web-dev-qa-db-fra.com

Utilisation de Bootstrap pour Angular et conception matérielle pour Angular ensemble)

Je travaille sur un projet avec ceci template .

Le modèle est écrit en utilisant AngularJs et Bootstrap-UI (bootstrap pour angular) et j'aimerais inclure certains éléments de Material Design, tels que des cartes et autres.

Est-il possible de faire ça? est-ce recommandé? Mon truc, c'est que nous aimons déjà ce modèle et son cheminement pour de nombreux éléments, mais Material Design propose des cartes, une liste déroulante, des entrées de texte avec l'animation de l'étiquette, etc., qui sont étonnantes.

Donc ma question est:

AngularJS + Bootstrap pour Angular + Conception matérielle pour Angular = Awesomeness ou Catastrophe?)

angularjstwitter-bootstrapangular-ui-bootstrapangular-material
52
Felipe Millan

Si vous ajoutez les deux bootstrap & angular-material c'est ce qui va arriver

  1. Les deux ont des CSS qui cibleront vos éléments frontaux (par exemple, input
    élément, boutons)

  2. Chacun a son propre look & feel (c'est-à-dire Bootstrap est différent de l'élément d'entrée Material). Ainsi, votre projet global n'aura pas un seul look & feel.

  3. Si vous ajoutez les deux, vous devrez veiller à ce que les styles CSS ignorent les autres parties communes (taille de la police et famille de polices, par exemple).

  4. Angular-material gère les éléments frontaux dans angular way (directive). Ainsi, lorsqu'ils publient une nouvelle version (29 versions à ce jour), vous devrez passer un peu de temps à tester votre code précédent (par exemple, changé $ media en $ mdMedia pour la gestion de sideMenu). J'ai passé beaucoup de temps à chercher pourquoi mon sideMenu ne fonctionnait plus !.

  5. Votre taille globale des dépendances de projet augmentera si vous utilisez deux frameworks front-end.

    Le matériau angulaire a besoin de ses propres dépendances telles que "angular-animate" et "angular-aria".

En parlant de vos "cartes md", il y a des "panneaux" dans bootstrap vous voudrez peut-être jeter un oeil ici

Je vous recommanderais de vous en tenir à une chose soit bootstrap ou angular-material. Les deux sont géniaux, ne les mélangez pas.

84
nitin

Je viens récemment écrit un article de blog sur la façon de remplacer Bootstrap avec Angular-Material, basé sur le framework de choix kickstarter que j’utilise, mais il fera le travail que vous recherchez.

Comme @nitin l'a dit, il sera difficile d'implémenter les deux. Ce que je vous demanderais en réalité de penser, que ce soit possible ou non, est la raison pour laquelle vous voudriez les deux?

Le but des deux est de fournir un style général d’interface utilisateur commun, mais ils sont conceptuellement opposés les uns aux autres, plutôt que quelque chose qui pourrait fonctionner en tandem.

Je vous recommande de commencer à lire davantage sur la conception des matériaux dans les guides Google avant de vous lancer.

12
thunk

J'ai écrit Angular Bootstrap Material qui est une version AngularJS de thème de conception de matériaux Bootstrap . Il élimine la dépendance à JavaScript de jQuery et de bootstrap. Et prend en charge la validation de formulaire à l'aide de ng-messages.

Vous pouvez installer de bower via bower install abm.

Puisque vous utilisez déjà l'interface utilisateur Bootstrap, la seule dépendance supplémentaire sera bootstrap le thème de conception des matériaux css et Messages angulaires

Vous trouverez ci-dessous une démonstration de validation de formulaire de base:

angular.module('angularBootstrapMaterialDocs', ['angularBootstrapMaterial', 'ui.bootstrap']);
angular.module('angularBootstrapMaterialDocs')
  .controller('validationDemoCtrl', ['$scope',
    function($scope) {
      $scope.user = {
        name: "",
        notifications: {}
      }
      $scope.errorMap = {
        required: "This field is mandatory",
        email: "Please enter a valid email"
      }
      $scope.change = function() {
        console.log($scope);
      }
    }
  ]);
.container-fluid {
  background-color: #fff;
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script>
<script src="https://rawgit.com/tilwinjoy/angular-bootstrap-material/master/dist/angular-bootstrap-material.min.js"></script>
<div class="container-fluid" ng-app="angularBootstrapMaterialDocs">
  <div class="row" ng-controller="validationDemoCtrl">
    <div class="col-xs-12 col-sm-6">
      <form name="signup">
        <abm-form-group error-messages="errorMap">
          <label data-abm-label type="floating">Name</label>
          <input type="text" name="name" class="form-control" abm-form-control ng-model="user.name" required>
        </abm-form-group>
        <abm-form-group error-messages="errorMap">
          <label data-abm-label>Email</label>
          <input type="email" name="email" class="form-control" placeholder="[email protected]" abm-form-control ng-model="user.email" required>
        </abm-form-group>
        <div class="form-group">
          <div class="togglebutton" abm-toggle label="Premium Account">
            <input type="checkbox" name="premiumAccount" ng-model="user.premium" ng-change="user.paymentMode=undefined">
          </div>
        </div>
        <abm-form-group error-messages="errorMap">
          <label>Prefered payment method</label>
          <div class="radio" abm-radio label="Net banking">
            <input type="radio" name="payment" value="net" ng-model="user.paymentMode" ng-required="user.premium" ng-disabled="!user.premium">
          </div>
          <div class="radio" abm-radio label="Credit card">
            <input type="radio" name="payment" value="credit" ng-model="user.paymentMode" ng-required="user.premium" ng-disabled="!user.premium">
          </div>
        </abm-form-group>
        <div class="form-group">
          <div class="togglebutton" abm-toggle label="Send Me Updates">
            <input type="checkbox" name="notifications" ng-model="user.notify" ng-change="user.notifications={}">
          </div>
        </div>
        <div class="row">
          <div class="col-xs-6">
            <abm-form-group error-messages="errorMap">
              <label>Notifications via:</label>
              <div class="checkbox" abm-checkbox label="Text Message">
                <input type="checkbox" name="text-notifications" ng-model="user.notifications.text" ng-disabled="!user.notify" ng-required="user.notify && !user.notifications.email">
              </div>
              <div class="checkbox" abm-checkbox label="Email">
                <input type="checkbox" name="email-notifications" ng-model="user.notifications.email" ng-disabled="!user.notify" ng-required="user.notify && !user.notifications.text">
              </div>
            </abm-form-group>
          </div>
          <div class="col-xs-6">
            <abm-form-group error-messages="errorMap">
              <label>Notification Frequency:</label>
              <select class="form-control" name="frequency" abm-form-control ng-model="user.notifications.frequency" ng-disabled="!user.notify" ng-required="user.notify">
                <option>Daily</option>
                <option>Weekly</option>
                <option>Monthly</option>
              </select>
            </abm-form-group>
          </div>
        </div>
        <a href="" class="btn btn-raised btn-primary" ng-disabled="signup.$invalid" abm-component>Create Account</a>
      </form>
    </div>
    <div class="col-xs-12 col-sm-6">
      <pre>{{user | json}}</pre>
    </div>
  </div>
</div>
5
T J

Utilisez angular pour les éléments de formulaire. Utilisez bootstrap pour une conception réactive. https://www.npmjs.com/package/@zirafa/bootstrap-grid-only

3
Lakin Mohapatra

J'ai récemment analysé cette question aussi. Il y a une nouvelle version de Angular qui est Angular 5. Mais il n'est pas facile de trouver des composants agréables à regarder pour cette version de angular qui est sortie il y a quelques semaines.

Le matériau angulaire est principalement basé sur une mise en page flexible. Vous devriez vérifier si c'est une restriction pour vous. Si vous utilisez uniquement des composants d'entrée et n'intégrez aucun autre framework javascript bootstrap (tel que ng-bootstrap), cela devrait fonctionner.

Parce que les composants matériels ne définissent aucun changement de style natif (il n’a même aucune implémentation de normalize.css). Si vous cochez un thème de style de matière, par exemple https://unpkg.com/@angular/material/prebuilt-themes/Indigo-pink.css vous ne trouvez pas de style pour les balises natives.

Ce que vous devez faire attention est de ne pas utiliser les deux styles au même élément, par exemple. ce qui suit ne fonctionnera pas comme souhaité

<button mat-raised-button class="btn btn-primary">Submit</button>

Si vous utilisez un composant matériel, vous devez utiliser un style spécifique à ce matériau. par exemple

<button mat-raised-button color="primary">Primary</button>
1
Koray Güclü