Werden Layout-Richtlinien von Angular 2 Material Design Components unterstützt?

Question

Ich versuche, die Angular2 Material Design Komponenten zu verwenden, und ich kann keine der layout directives zu arbeiten. Beispiel:

die Beispiele nach, soll dies „einfach funktionieren“:

<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> 

Aber es funktioniert nicht - es macht nur die Elemente auf der Seite als plain old divs. (Ich verwende die neueste Version von Chrome).

Fehle ich etwas, wie gibt es eine CSS-Datei, die ich importieren soll?

Answer 1

Januar 2017 aktualisieren:

Angular 2-Team hat kürzlich ein neues Paket NPM flex-layout nur für das Layout. Es ist ein separates Paket, das unabhängig vom eckigen Material ist. Die vollständigen Anweisungen finden Sie in der README github page.

Installieren des Moduls:

NPM installieren @ Winkel/flex-Layout -save

In app.module.ts (oder gleichwertig), erklären das Modul:

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

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

Markup-Beispiel:

<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> 

Hier ist ein plunker sample aus der Flex-Layout-GitHub-Seite genommen.

---

Original-Antwort:

Die docs Sie sich beziehen für angular1 Material sind. Angular2-Material hat noch keine Layout-Anweisungen.

Sie können die Richtlinie auf einfache Weise selbst erstellen.

Alles, was Sie wissen müssen:

layout="row" ist die gleiche wie style="display:flex;flex-direction:row"
layout="column" =>style="display:flex;flex-direction:column"

Und flex-style="flex:1"

Als Richtlinien entspricht:

@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'; 
    } 
} 

Die Flex-Richtlinie, verwenden Sie es wie: <div flex> oder <div flex="10"> eine beliebige Zahl von 0 - 100%.Auch nur zum Spaß, fügte ich schrumpfen und wachsen Eingänge

@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}%`; 
    } 
} 

sie überall nutzen zu können, ohne sie zu jeder Komponente hinzufügen:

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

Hier ist ein Beispiel in plunk

Answer 2

Eine weitere Option ist angular2-polymer zu verwenden, um Polymer's iron-flex-layout zu ziehen. Es ist etwas begrenzter und hat eine etwas andere API als das Material 1 Layout (aber das Material 2 Layout wird auch eine andere API haben). Aber es funktioniert jetzt und wird unterstützt.

Es gibt auch eine Anleitung here.

Answer 3

Es ist nicht nötig, eine neue Direktive zu schreiben, bis Material2 uns das LayoutModul zur Verfügung stellt.

Sie müssen nur die angular layouts-attributes.css von angular1 importieren. Es dauert die alte Richtlinie als CSS-Selektor.

erfordern ('node_modules/Schräg-Material/modules/Layout/Winkel material.layouts-attributes.css')

beispielsweise die Richtlinie für CSS-Layout-align = it "Ende" Verwenden Sie den css Selektor: [layout-align = "end"]