web-dev-qa-db-ja.com

BootstrapにAngularを使用し、AngularにMaterial Designを一緒に使用する

私はこれでプロジェクトに取り組んでいます template 。

このテンプレートは、AngularJsとBootstrap-UI（Angularのブートストラップ）を使用して作成されており、カードなどのマテリアルデザイン要素を含めたいと思います。

それは可能ですか？お勧めですか？私のことは、すでにこのテンプレートとその多くの要素への道が大好きですが、マテリアルデザインには、カード、ドロップダウン、ラベルアニメーション付きのテキスト入力などがあり、それらは驚くべきものです。

だから私の質問は：

AngularJS + BootstrapのAngular + Angularのマテリアルデザイン=恐ろしさか災害か？

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

bootstrapと角型マテリアルの両方を追加すると、これが発生します

  1. 両方とも、フロントエンド要素をターゲットとするcssを持っています（例：入力
    要素、ボタン）

  2. それぞれに独自のルックアンドフィールがあります（つまり、Bootstrap入力要素はMaterial入力要素とは異なります）。したがって、プロジェクト全体のルックアンドフィールは1つになりません。

  3. 両方を追加する場合は、共通の部分（フォントサイズやフォントファミリなど）で他のCSSスタイルをオーバーライドする必要があります。

  4. Angular-materialはフロントエンド要素をangular方法（ディレクティブ）で処理しますsideMenuを処理するための$ mdMediaへ）。 sideMenuが機能しなくなった理由を見つけるのに多くの時間を費やしました！.

  5. 2つのフロントエンドフレームワークを使用している場合、プロジェクトの依存関係の全体的なサイズが大きくなります。

    Angular-materialには、「angular-animate」や「​​angular-aria」などの独自の依存関係が必要です。

あなたの「md-cards」について話すと、bootstrapに「パネル」があります here

_bootstrapまたは角型マテリアルのいずれかを使用することをお勧めします。両方とも、それらを混ぜてはいけません。

84
nitin

私は 最近ブログ記事を書いた 方法replaceBootstrap Angular-Materialを使用。これは、私が使用しているキックスターターフレームワークに基づいていますが、あなたが望んでいる仕事をするでしょう。

@nitinが言ったように、両方を実装するのは難しいでしょう。可能かどうかに関係なく、実際に考えてみてほしいのは、両方が必要な理由ですか？

両方の目的は、全体的に共通のUIスタイルを提供することですが、それらは連携して機能するものではなく、概念的に相互に並置されます。

すぐにジャンプする前に、Googleガイドから材料設計の詳細を読み始めることをお勧めします。

12
thunk

Angular Bootstrap Material と記述しました。これは、AngularJSバージョンの Bootstrap material design theme です。 jQueryとブートストラップのJavaScriptへの依存を排除​​します。 ng-messagesを使用したフォーム検証をサポートします。

Bowerからbower install abm経由でインストールできます。

すでにUI Bootstrapを使用しているため、追加の依存関係はbootstrap material design theme 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="[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

フォーム要素にはangularマテリアルパッケージを使用します。レスポンシブデザインには、bootstrap cssグリッドを使用します。 https://www.npmjs.com/package/@zirafa/bootstrap-grid-only

3
Lakin Mohapatra

最近、この問題も分析しました。 Angularの新しいバージョンがあります。これはAngular 5.です。ただし、このバージョンのangularの見栄えの良いコンポーネントは数週間でリリースされます。前。

角度材料は、主にフレックスレイアウトに基づいています。それがあなたにとって制限かどうかを確認する必要があります。入力コンポーネントのみを使用し、他のbootstrap 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>
1
Koray Güclü