web-dev-qa-db-ja.com

Angularを使用したMdBootstrap

作成方法bootstrap Angularによるマテリアルデザイン。

これが私がこれまでに試したことです。 angularプロジェクトをビルドするためにcliを使用しています。

angular-cli.jsonファイル

Npmを使用してMDBをインストールし、これらをangular cli jsonファイルに追加しました。

"styles": [
        "styles.css",
        "../node_modules/mdbootstrap/css/bootstrap.css",
        "../node_modules/mdbootstrap/css/mdb.css"
      ],
      "scripts": [
        "../node_modules/mdbootstrap/js/jquery-3.1.1.js",
        "../node_modules/mdbootstrap/js/tether.js",
        "../node_modules/mdbootstrap/js/bootstrap.js",
        "../node_modules/mdbootstrap/js/mdb.js"
      ],

次に、コードをコンポーネントに追加します。

<button type="button" class="btn btn-warning">Warning</button>

コードはエラーをスローしませんが、クリックウェーブとクリックは機能しません。助けてください

angularmaterial-designbootstrap-4
13
INFOSYS

Angularでmdbootstrapを使用するには、npmを介してAngularバージョンをインストールする必要があります：

npm i angular-bootstrap-md -save

FontAwesomeも使用されるので、必ずスタイルに追加してください。

"../node_modules/font-awesome/scss/font-awesome.scss"

そして最後に、app.module.tsに以下を含める必要があります。

import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { NO_ERRORS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
   ...,
    MDBBootstrapModule.forRoot()
  ],
  schemas: [NO_ERRORS_SCHEMA]
})

詳細はgithubページをご覧ください：

https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design

11
Z. Bagley

Npmパッケージをインストールし、正しく構成した場合（ こちら を参照）、mdbRippleRadiusディレクティブをこのようなボタンタグ：

<button type="button" class="btn btn-warning" mdbRippleRadius>Warning</button>

それが役に立てば幸い！

1
menestrello