Использование Bootstrap для углового и материального дизайна для угловых вместе

Question

Я работаю над проектом с этим template.

Шаблон написан с использованием AngularJs и Bootstrap-UI (бутстрап для углового), и я хотел бы включить некоторые элементы Material Design, такие как карты и другие.

Возможно ли это? это рекомендуется? Моя вещь, мы уже любим этот шаблон и способ для многих его элементов, но в Material Design есть карты, выпадающие меню, текстовые входы с анимацией ярлыков и т. Д., Например, которые потрясающе.

Так что мой вопрос:

AngularJS + Bootstrap для угловых + Материалов для угловых = Awesomeness или стихийного бедствия?

Answer 1

Если добавить оба самозагрузки & угловых-материала это то, что будет происходить

1. Оба имеет CSS, которые будут предназначаться вашим передние конечными элементами (например, вход
   элемента, кнопка)

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

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

4. Угловой материал обрабатывает элементы переднего конца угловым способом (директива) Так что, выпуская новую версию (до 29 выпусков), вам придется потратить некоторое время на тестирование своего предыдущего кода (например, они изменили $ media до $ mdMedia для обработки sideMenu). Я потратил много времени на то, чтобы выяснить, почему мой sideMenu перестает работать !.

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

   Угловой материал нуждается в собственных зависимостях, таких как «угловой анимированный» & «угловая ария».

Говоря о своем «MD-карте» есть «панель» в начальной загрузке вы могли бы хотеть посмотреть here

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

Answer 2

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

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

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

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

Answer 3

Я написал Angular Bootstrap Material, который является версией AngularJS из Bootstrap material design theme. Это устраняет зависимость от JavaScript jQuery и JavaScript бутстрапа. И поддерживает проверку формы с использованием ng-messages.

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

Поскольку вы уже используете UI Bootstrap, единственная дополнительная зависимость будет самозагрузки материала тема дизайна CSS и Angular Messages

---

Ниже основная форма проверки демо:

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="johndoe@mail.com" 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>

Answer 4

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

Угловой материал в основном основан на гибкой макете. Вы должны проверить, для вас это ограничение. Если вы используете только входные компоненты и не интегрируете какую-либо другую фреймворк 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>