angularjs - 一起使用 Angular 的 Bootstrap 和 Angular 的材料设计

Question

我正在使用这个模板做一个项目。

该模板是使用 AngularJs 和 Bootstrap-UI（角度的引导程序）编写的，我想包含一些 Material Design 元素，如卡片等。

有可能这样做吗？推荐吗？我的事情是我们已经喜欢这个模板和它的许多元素的方式，但是 Material Design 有卡片、下拉菜单、带有标签动画的文本输入等等，这些都很棒。

所以我的问题是：

AngularJS + Angular 的 Bootstrap + Angular 的 Material Design = 令人敬畏还是灾难？

score 113 · Accepted Answer

如果您同时添加引导程序和角度材料，则会发生这种情况

两者都有 css 将针对您的前端元素（例如输入
元素，按钮）
每个都有自己的外观和感觉（即 Bootstrap 输入元素与 Material 输入元素不同）。因此，您的整个项目不会有单一的外观和感觉。
如果您同时添加两者，您将不得不处理在公共部分（例如字体大小和字体系列）上覆盖其他样式的 css 样式。
Angular-material 以 Angular 方式（指令）处理前端元素所以当他们发布一个新版本（到目前为止 29 个版本）时，你将不得不花一些时间测试你的早期代码（例如他们将 $media 更改为 $mdMedia 以处理 sideMenu） . 我花了很多时间找出为什么我的 sideMenu 停止工作！。
如果您使用两个前端框架，您的项目依赖项的总体大小将会增加。

Angular-material 需要自己的依赖项，例如“angular-animate”和“angular-aria”。

谈论您的“md-cards”，引导程序中有“面板”，您可能想看看这里

我建议您坚持一件事，无论是引导程序还是角度材料。两者都很棒，只是不要混合它们。

score 13 · Accepted Answer

我最近刚刚写了一篇关于如何用 Angular-Material替换Bootstrap 的博文。它基于我正在使用的选择的 kickstarter 框架，但它会完成你所追求的工作。

就像@nitin 所说的那样，实现两者都将具有挑战性。我实际上要您考虑的是，无论是否可能，您为什么要两者兼得？

两者的目的是提供一个整体通用的 UI 样式，但它们在概念上是相互对立的，而不是可以协同工作的东西。

我建议你在开始之前从谷歌指南中阅读更多关于材料设计的信息。

score 5 · Accepted Answer

我已经编写了Angular Bootstrap Material，它是Bootstrap 材料设计主题的 AngularJS 版本。它消除了对 jQuery 和 bootstrap 的 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>

score 3 · Accepted Answer

对表单元素使用角度材料包。使用引导 css 网格进行响应式设计。 https://www.npmjs.com/package/@zirafa/bootstrap-grid-only

score 1 · Accepted Answer

仅添加bootstrap-grid-min.css无法正常工作，此外它没有其他方便的类，例如text-right等。

所以，这就是我想出的：投入bootstrap-min.css你的资产：

导入您的styles.scss/styles.css：

@import './assets/css/bootstrap.min.css';

但这与material-ui的设计相冲突。就像，我立即注意到单击时按钮周围出现了意想不到的边框（虽然听起来并不那么烦人）。

您可以在您的中添加以下内容styles.scss以消除这些影响。

* {
  &:active,
  :focus {
    outline: none !important;  // 1
  }
}

a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
    color: #3f51b5; // 2
  }

阅读更多：https ://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

score 1 · Accepted Answer

我最近也分析了这个问题。有一个新版本的 Angular 是 Angular 5。但是要为这个几周前发布的 Angular 版本找到漂亮的组件并不容易。

Angular Material 主要基于 flex 布局。您应该检查这是否对您有限制。如果您只使用输入组件并且不集成任何其他引导 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>

angularjs - 一起使用 Angular 的 Bootstrap 和 Angular 的材料设计

6 回答 6

Related

Reference