Angular 2材质设计组件支持布局指令吗？ [英] Are Layout Directives supported by Angular 2 Material Design Components?

问题描述

我正在尝试使用 Angular2 Material Design 组件，而我无法获得任何布局指令才能正常工作。例子：

根据例子，这应该是正常工作：

 < div layout =row> 
< div flex>行中的第一项< / div> 
< div flex>行中的第二项< / div> 
< / div> 
< div layout =column> 
< div flex>列中的第一项< / div> 
< div flex>列中的第二项< / div> 
< / div> 
  

但它不会 - 它只是将页面上的元素渲染为普通的旧div。 （我正在使用最新版本的Chrome）。

我是否缺少一些东西，比如是否有一个我应该导入的CSS文件？ b $ b

解决方案

2017年1月更新：
$ b $ Angular 2团队最近添加了一个新的NPM软件包弹性布局仅用于布局。它是一个独立于角材料的独立包装。

完整说明可在 github

安装模块：

npm install @角色/ flex-layout -save

在app.module.ts（或同等版本）中，声明模块：

$ b

 从@ angular / flex-layout导入{FlexLayoutModule}; 
 
 @NgModule（{
 imports：[
 ... 
 FlexLayoutModule 
]，
 ... 
}） 
  

标记示例：

 < div class =flex-container
 fxLayout =row
 fxLayout.xs =column
 fxLayoutAlign =中心中心
 fxLayoutAlign.xs =开始> 
< div class =flex-itemfxFlex =20％fxFlex.xs =40％> < / DIV> 
< div class =flex-itemfxFlex> < / DIV> 
< div class =flex-itemfxFlex =25px> < / DIV> 
< / div> 
  

这是
$ b 原始答复： docs 你指的是angular1材料。 Angular2材质仍然没有任何布局指令。

您可以通过简单的方式轻松地创建指令。

所有你需要知道的：
$ b $ layout =row与 style =display：flex; flex-direction：row

layout =column =>

$ b

flex 等于 style =flex：1

作为指令：

@Directive（{
selector：'[layout]'
}）
导出类LayoutDirective {
@Input（）layout：string;
@HostBinding（'style.display'）display ='flex';
$ b $ @HostBinding（'style.flex-direction'）
get direction（）{
return（this.layout ==='column'）？ 列：行;

flex指令使用它：< div flex> 或< div flex =10> 0 - 100％另外，为了好玩，我增加了收缩和增长的投入。

@Directive（{
选择器：'[flex]'
}）
导出类FlexDirective {
@Input（）shrink：number = 1;
@Input（）grow：number = 1;
@Input（）flex：string;
$ b $ @ $ this $ this.shrink} $ {this.flex = ==''？ 0’ ：this.flex}％`;




$ p $要使用它们而不将它们添加到每个组件：

@NgModule（{
imports：[BrowserModule]，
declarations ：[AppComponent，FlexDirective，LayoutDirective]，
bootstrap：[AppComponent]
}）
export class AppModule {


以下是 plunk 中的示例

I'm trying to use the Angular2 Material Design components, and I can't get any of the layout directives to work. Example:

According to the examples, this should "just work":

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

But it doesn't - it just renders the elements on the page as plain old divs. (I'm using the latest version of Chrome).

Am I missing something, like is there a CSS file I'm supposed to import?

解决方案

January 2017 Update:

Angular 2 team recently added a new NPM package flex-layout for layout only. It is a separate package independent of angular material.
The full instructions are available in the github page README.

Install the module:

npm install @angular/flex-layout -save

In app.module.ts (or equivalent), declare the module:

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

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

Markup example:

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

Here is a plunker sample taken from the flex-layout github page.

---

Original Answer:

The docs you are referring to are for angular1 material. Angular2 material still doesn't have any layout directives.

You can easily create the directive yourself in a simple way.

All you need to know:

layout="row" is same as style="display:flex;flex-direction:row"
layout="column" => style="display:flex;flex-direction:column"

And flex is equal to style="flex:1"

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

The flex directive, use it like: <div flex> or <div flex="10"> any number from 0 - 100%. Also, just for fun, I added shrink and grow inputs

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

To use them everywhere without adding them to each component:

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

Here is a sample in plunk

这篇关于Angular 2材质设计组件支持布局指令吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！