Các chỉ thị bố cục có được hỗ trợ bởi Angular 2 Material Design Components không?

Question

Tôi đang cố gắng sử dụng các thành phần Angular2 Material Design và tôi không thể nhận bất kỳ số nào trong số layout directives hoạt động. Ví dụ:

Theo các ví dụ, điều này sẽ "chỉ làm việc":

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

Nhưng nó không - nó chỉ làm cho các yếu tố trên trang như divs cũ đồng bằng. (Tôi đang sử dụng phiên bản Chrome mới nhất).

Tôi có thiếu thứ gì đó không, như là có tệp CSS mà tôi phải nhập không?

Answer 1

tháng 1 năm 2017 Cập nhật:

góc 2 đội gần đây thêm một NPM mới gói flex-layout chỉ bố trí. Nó là một gói riêng biệt độc lập với vật liệu góc.
Hướng dẫn đầy đủ có sẵn trong README github page.

Cài đặt các module:

NPM cài đặt @ góc/flex-layout Save

Trong app.module.ts (hoặc tương đương), kê khai các mô-đun:

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

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

Ví dụ về đánh dấu:

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

Đây là plunker sample được lấy từ trang github flex-layout.

---

gốc trả lời:

Các docs bạn đang đề cập đến là dành cho angular1 vật chất. Vật liệu Angular2 vẫn không có bất kỳ chỉ thị bố trí nào.

Bạn có thể dễ dàng tạo chỉ thị cho mình theo cách đơn giản.

Tất cả bạn cần biết:

layout="row" là giống như style="display:flex;flex-direction:row"
layout="column" =>style="display:flex;flex-direction:column"

Và flex bằng style="flex:1"

Như directives:

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

Chỉ thị flex, sử dụng nó như: <div flex> hoặc <div flex="10"> bất kỳ số nào từ 0 - 100%.Ngoài ra, chỉ để cho vui, tôi đã thêm thu nhỏ và phát triển đầu vào

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

Để sử dụng chúng ở khắp mọi nơi mà không cần thêm chúng vào từng thành phần:

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

Đây là một mẫu trong plunk

Answer 2

tùy chọn khác là sử dụng angular2-polymer để lấy trong số iron-flex-layout của Polymer. Nó hơi hạn chế hơn và có API hơi khác so với bố cục Material 1 (nhưng bố cục Material 2 cũng sẽ có API khác). Nhưng nó hoạt động ngay bây giờ và được hỗ trợ.

Ngoài ra còn có hướng dẫn here.

Answer 3

Không cần viết chỉ thị mới cho đến khi Material2 cung cấp cho chúng tôi LayoutModule.

Bạn chỉ cần nhập các thuộc tính góc bố trí.cs từ angular1. Chỉ thị cũ là bộ chọn css.

yêu cầu ('node_modules/góc quan trọng/modules/layouts/góc-material.layouts-attributes.css')

ví dụ như css cho thị bố trí-align = "kết thúc" nó sử dụng bộ chọn css : [layout-align = "end"]