Использование Bootstrap для Angular и дизайна материалов для Angular вместе

Ответ 1

Если вы добавите как бутстрап, так и angular -материал, это то, что произойдет

• Оба имеют css, которые будут нацелены на ваши элементы переднего конца (например, входные данные
  элемент, кнопки)

• У каждого свой вид и внешний вид (т.е. элемент ввода Bootstrap отличается от элемента ввода материала). Таким образом, ваш общий проект не будет иметь ни единого взгляда.

• Если вы добавите оба, вам придется позаботиться о стилях css, переопределяющих другие на общих частях (например, размер шрифта и семейство шрифтов).

• Angular -материал обрабатывает передние элементы в angular способе (директиве) Поэтому, выпуская новую версию (до 29 выпусков), вам придется потратить некоторое время на тестирование своего более раннего кода (например, сменив $media на $mdMedia для обработки sideMenu). Я потратил много времени на то, чтобы выяснить, почему мой sideMenu перестает работать!

• Общий размер зависимостей проекта будет увеличен, если вы используете две интерфейсные рамки.

  Angular -материал нуждается в собственных зависимостях, таких как angular -animate '& angular -aria.

Говоря о ваших "md-картах", есть "панели" в начальной загрузке, вы можете посмотреть здесь

Я бы порекомендовал вам придерживаться одной или самой загрузки или angular -материала. Оба являются удивительными, просто не смешивайте их.

Ответ 2

Я просто недавно написал сообщение в блоге о том, как заменить Bootstrap с Angular -материалом. Он основан на используемой мной платформе kickstarter, но я буду выполнять эту работу.

Похоже, что @nitin сказал, будет сложно реализовать оба. То, о чем я на самом деле просил вас подумать, независимо от того, возможно ли это, почему вы хотите, чтобы оба?

Цель обоих состоит в том, чтобы обеспечить общий общий стиль пользовательского интерфейса, но они концептуально связаны друг с другом, а не с тем, что может работать в тандеме.

Я бы посоветовал вам начать читать больше о материальном дизайне из руководства Google, прежде чем прыгать прямо.

Ответ 3

Я написал Angular Загрузочный материал, который является версией Тема дизайна материала Bootstrap. Это устраняет зависимость от jQuery и загрузочного JavaScript. И поддерживает проверку формы с помощью ng-messages.

Вы можете установить из беседки через bower install abm.

Поскольку вы уже используете UI Bootstrap, единственной дополнительной зависимостью будет тема для создания темы bootstrap css и Angular Сообщения

Ниже приведена базовая демонстрация проверки формы:

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>

Ответ 4

Недавно я проанализировал этот вопрос. Существует новая версия Angular, которая составляет Angular 5. Но нелегко найти красивые компоненты для этой версии Angular, выпущенной пару недель назад.

Angular Материал в основном основан на гибкой макете. Вы должны проверить, для вас это ограничение. Если вы используете только входные компоненты и donot интегрируете любую другую фреймворк javascript (например, ng-bootstrap), он должен работать.

Поскольку материальные компоненты не определяют какого-либо изменения какого-либо родного стиля (у него даже нет реализации normalize.css). Если вы проверите тему стилизации материала, например. https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css вы не найдете стиль для собственных тегов.

То, на что вы должны обратить внимание, - это не использовать оба стиля в одном элементе, например. следующее не будет работать по желанию

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

Если вы используете материальный компонент, вы должны использовать особый стиль для этого компонента. например

<button mat-raised-button color="primary">Primary</button>