Czy Dyrektywy układu są obsługiwane przez Angular 2 Material Design Components?

Question

Próbuję użyć składników Angular2 Material Design i nie mogę uzyskać żadnego z layout directives do pracy. Przykład:

Zgodnie z przykładami, to powinien „po prostu działa”:

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

ale nie - to właśnie czyni elementy na stronie jako zwykły starych div. (Używam najnowszej wersji Chrome).

Czy brakuje mi czegoś, jak jest plik CSS, który mam zaimportować?

Answer 1

stycznia 2017 Aktualizacja:

kątowa 2 zespół niedawno dodał nowy pakiet NPM flex-layout tylko układ. Jest to oddzielne opakowanie niezależne od materiału kątowego.
Pełne instrukcje są dostępne w pliku README github page.

instalacja modułu:

npm instalacji @ kątową/giętki układ oszczędzające

W app.module.ts (lub równoważny), stwierdzenie, że moduł:

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

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

Przykładowy przykład:

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

Oto plunker sample zaczerpnięty ze strony github z układem flex.

---

Original Odpowiedź:

docs którego się odnosimy się do angular1 materiału. Materiał Angular2 nadal nie ma żadnych dyrektyw dotyczących układu.

Możesz samodzielnie utworzyć dyrektywę w prosty sposób.

Wszystko, co musisz wiedzieć:

layout="row" jest taka sama jak style="display:flex;flex-direction:row"
layout="column" =>style="display:flex;flex-direction:column"

I flex jest równa style="flex:1"

As dyrektyw:

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

W dyrektywie Flex stosuje się ją w następujący sposób: <div flex> lub <div flex="10"> dowolna liczba od 0 do 100%.Ponadto, po prostu dla zabawy, dodałem kurczyć i rozwijać wejścia

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

Aby z nich korzystać wszędzie bez dodawania ich do każdego składnika:

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

Oto przykład w plunk

Answer 2

Inną opcją jest użyć angular2-polymer, aby pobrać Polymer's iron-flex-layout. Jest nieco bardziej ograniczony i ma nieco inny interfejs API niż układ Materiał 1 (ale układ Materiał 2 będzie miał również inny interfejs API). Ale działa teraz i jest obsługiwany. Jest to również przewodnik here.

Answer 3

Nie trzeba pisać nowej dyrektywy, dopóki Materiał 2 nie dostarczy nam Modułu Układu.

Wystarczy zaimportować układy kątowe-attributes.css z kąta1. Przejmuje starą dyrektywę jako selektor css.

wymagają ('node_modules/skośne materiału/moduły/arkusze/skośne material.layouts-attributes.css')

przykładowo CSS dyrektywy schematy-align = "koniec", to użyj selektora css : [layout-align = "end"]