web-dev-qa-db-ja.com

レイアウトディレクティブはAngular 2 Material Design Componentsでサポートされていますか？

Angular2 Material Design コンポーネントを使用しようとしていますが、 layout directives が機能しません。例：

例によれば、これは「うまくいく」はずです。

<div layout="row">
  <div flex>First item in row</div>
  <div flex>Second item in row</div>
</div>
<div layout="column">
  <div flex>First item in column</div>
  <div flex>Second item in column</div>
</div>

しかし、そうではありません-ページ上の要素を単純な古いdivとしてレンダリングするだけです。 （Chromeの最新バージョンを使用しています）。

インポートするCSSファイルがあるなど、何かが欠けていますか？

angularflexboxmaterial-design
56
Marcel Lamothe

2017年1月の更新：

Angular 2チームは最近、レイアウト専用の新しいNPMパッケージ flex-layout を追加しました。これは、angular素材に依存しない個別のパッケージです。
完全な手順は githubページ READMEで入手できます。

モジュールをインストールします。

npm install @ angular/flex-layout -save

App.module.ts（または同等のもの）で、モジュールを宣言します。

import {FlexLayoutModule} from "@angular/flex-layout";

@NgModule({
  imports: [ 
     ...
     FlexLayoutModule
  ],
  ...
})

マークアップの例：

<div class="flex-container" 
     fxLayout="row" 
     fxLayout.xs="column"
     fxLayoutAlign="center center"
     fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="20%" fxFlex.xs="40%">  </div>
  <div class="flex-item" fxFlex>        </div>
  <div class="flex-item" fxFlex="25px"> </div>
</div>

plunkerサンプル はflex-layout githubページから取得したものです。

元の回答：

docs は、angular1マテリアル用です。 Angular2マテリアルには、まだレイアウトディレクティブがありません。

簡単な方法でディレクティブを自分で簡単に作成できます。

知っておくべきこと：

layout="row"はstyle="display:flex;flex-direction:row"と同じです
layout="column" => style="display:flex;flex-direction:column"

flexはstyle="flex:1"と等しい

ディレクティブとして：

@Directive({
  selector:'[layout]'
})
export class LayoutDirective{
  @Input() layout:string;
  @HostBinding('style.display') display = 'flex';

  @HostBinding('style.flex-direction')
  get direction(){
       return (this.layout === 'column') ? 'column':'row';
  }
}

Flexディレクティブは、次のように使用します：<div flex>または<div flex="10"> 0〜100％の任意の数値。また、ただの楽しみのために、入力の縮小と拡大を追加しました

@Directive({
  selector:'[flex]'
})
export class FlexDirective{
    @Input() shrink:number = 1;
    @Input() grow:number = 1;
    @Input() flex:string;

    @HostBinding('style.flex')
    get style(){
        return `${this.grow} ${this.shrink} ${this.flex === '' ? '0':this.flex}%`;
    }
}

各コンポーネントに追加せずにどこでも使用するには：

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,FlexDirective ,LayoutDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

plunk のサンプルを次に示します

122
Abdulrahman

Material2がLayoutModuleを提供するまで、新しいディレクティブを記述する必要はありません。

ただ、angular1からangular layouts-attributes.cssをインポートする必要があります。古いディレクティブをcssセレクターとして使用します。

require（ 'node_modules/angular-material/modules/layouts/angular-material.layouts-attributes.css'）

たとえば、ディレクティブlayout-align = "end"のcssは、cssセレクターを使用します：[layout-align = "end"]

3
lekev87

もう1つのオプションは、Polymerの iron-flex-layout を取り込むために angular2-polymer を使用することです。少し制限があり、マテリアル1のレイアウトとはAPIが少し異なります（ただし、マテリアル2のレイアウトもAPIが異なります）。しかし、現在は機能し、サポートされています。

ガイドもあります こちら 。

1
Splaktar