4

YouTube やその他の学習サイトにはいくつかの Angular2 チュートリアルがあり、その中にはマテリアル デザイン ライト (MDL)を使用したものや、デモンストレーション目的で新しいAngular2 マテリアルを使用したものがあります。

Angular2 マテリアルはまだかなり新しく (現在はアルファ版)、MDL と比較してコンポーネントとドキュメントの数が限られていることを考慮すると、この時点でAngular2 に実装するより良いオプションであり、その長所と短所は何ですか?それぞれAngular2に固有ですか?

4

3 に答える 3

4

MDL は間違いなくより適切に文書化されているものです (Angular2 Material に関する適切な文書は見つかりませんでした)。このため、MDL が(現在)より良い選択であると思います。MDL の欠点は、typescript/angular2 に統合されていないことです。

Angular 2 コンポーネント テンプレートで MDL コンポーネントを使用する場合は、次のようにコンポーネントを拡張して、MDL コンポーネントを登録することができます (そうしないと、JavaScript に依存するため、MDL アニメーションが機能しません)。

declare var componentHandler: any;
export class MaterialTemplate {
    ngAfterViewInit(){
        componentHandler.upgradeAllRegistered();
    }
}

使用法は次のようになります。

@Component({
    selector: 'my-selector',
    template: `
        <form action="#">
        <div class="mdl-textfield mdl-js-textfield">
        <input value="{{bleh}}" class="mdl-textfield__input" type="text" id="sample1">
        <label class="mdl-textfield__label" for="sample1">Text...</label>
        </div>
        <button (click)="action()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
        create
        </button>
        </form>`
})
export class CreateComponent extends MaterialTemplate {...}

Angular2 Material のアルファ版が終了し、いくつかのドキュメントが作成されたら、それに切り替えます。

于 2016-06-16T08:15:42.443 に答える
0

Angular2-material や MDL とは別に、マテリアル デザインに基づく CSS フレームワークである MaterializeCSS もあります。彼らの公式 Web サイトはhttp://materializecss.comにあります。

それらには、MDL または Angular2-material によって提供されるよりもはるかに多くの作業コンポーネントがあり、すべて例とドキュメントが付属しています。

ただし、MaterializeCSS は JQuery ベースです。つまり、一部のコンポーネントの動的動作を有効にするには JQuery が必要です。https://www.npmjs.com/package/angular2-materializeをご覧ください。このパッケージは、まさにこの動的動作を Angular2 アプリに追加します。MaterializeDirectiveAngular2 コンポーネントに をインポートするだけで動作するはずです。

于 2016-07-27T18:03:33.247 に答える
0

ユースケースに完全に依存します。 あなたのプロジェクトはすぐに本番に入る予定ですか、それともかなりの時間がありますか? UI コンポーネントを細部までカスタマイズする必要がありますか、それとも非常に一般的な目的ですか? 私は多くのことを研究してきましたが、生産に入るまでの時間が短いため、Bootstrap Material Design を選択します URL: mdbootstrap.com 理由: 角度のあるマテリアル コンポーネントを使用する場合、最初はアルファ セカンドです。私のユース ケースは非常にカスタマイズされています。 、例は、ラジオ、チェックボックスなどの基本さえも設定するために残りのサービスを呼び出していることです。

ポイントは、時間がない場合は、MDL を使用して高度なカスタマイズを行う必要がある場合 (人気のある Wijmo 5 ng2 コンポーネントでさえ現在それを使用しています)、または angular2 マテリアルを待つことを選択することです。

于 2016-06-16T13:10:36.850 に答える