首页 文章

Angular 2 Material Design Components是否支持布局指令？

提问于
浏览 次
54

我正在尝试使用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文件吗？

angular flexbox material-design

3 回答

  • 3

    January 2017 Update ：

    Angular 2团队最近添加了一个新的NPM包flex-layout仅用于布局 . 它是一个独立于角材料的独立包装 .
    完整说明可在github page 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>

    这是从flex-layout github页面获取的plunker sample .

    Original Answer ：

    你所指的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中的示例

    回复于
  • 121

    在Material2为我们提供LayoutModule之前，无需编写新指令 .

    您只需从angular1导入angular layouts-attributes.css . 它将旧指令作为css选择器 .

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

    例如css for directive layout-align =“end”它使用css选择器：[layout-align =“end”]

    回复于
  • 1

    另一种选择是使用angular2-polymer来拉入Polymer的iron-flex-layout . 它稍微有限，并且与Material 1布局略有不同（但是Material 2布局也将具有不同的API） . 但它现在有效，并得到支持 .

    还有一个指南here .

    回复于

相关问题