Le direttive di layout sono supportate da Angular 2 Material Design Components?

Question

Sto tentando di utilizzare i componenti Angular2 Material Design e non riesco a far funzionare nessuno degli layout directives. Esempio:

Secondo gli esempi, questo dovrebbe "solo lavoro":

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

Ma non è così - è solo rende gli elementi sulla pagina come vecchie div pianura. (Sto usando l'ultima versione di Chrome).

Mi manca qualcosa, come se ci fosse un file CSS che dovrei importare?

Answer 1

gennaio 2017 Aggiornamento:

angolare 2 team ha recentemente aggiunto un nuovo pacchetto NPM flex-layout solo per il layout. È un pacchetto separato indipendente dal materiale angolare.
Le istruzioni complete sono disponibili nel README github page.

Installare il modulo:

npm installare @ angolare/flex-la layout -save

In app.module.ts (o equivalente), dichiarare il modulo:

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

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

Esempio di revisione:

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

Ecco uno plunker sample preso dalla pagina github layout flessibile.

---

risposta originale:

Il docs si fa riferimento sono per angular1 materiale. Il materiale Angular2 non ha ancora direttive di layout.

È possibile creare facilmente la direttiva in modo semplice.

Tutto quello che devi sapere:

layout="row" è stessa style="display:flex;flex-direction:row"
layout="column" =>style="display:flex;flex-direction:column"

E flex è uguale a style="flex:1"

Come direttive:

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

La direttiva flex, utilizzare come: <div flex> o <div flex="10"> qualsiasi numero compreso tra 0 e 100%.Inoltre, solo per divertimento, ho aggiunto compattare e far crescere gli ingressi

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

Per utilizzare ovunque senza l'aggiunta di ogni componente:

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

Ecco un esempio in plunk

Answer 2

Un'altra opzione è per utilizzare angular2-polymer per inserire Polymer's iron-flex-layout. È leggermente più limitato e ha un'API leggermente diversa rispetto al layout Materiale 1 (ma il layout Materiale 2 avrà anche un'API diversa). Ma ora funziona ed è supportato.

C'è anche una guida here.

Answer 3

Non è necessario scrivere una nuova direttiva finché Material2 non ci fornisce il LayoutModule.

Devi solo importare i layout angolari-attributes.css da angular1. Prende la vecchia direttiva come selettore di CSS.

require ('node_modules/angolare materiale/moduli/layout/angolari-material.layouts-attributes.css')

per esempio il CSS direttiva layout align = "fine" it usa il selettore css : [layout-align = "end"]