问题描述
我正在尝试使用组件,而我无法获得任何才能正常工作。例子:
根据例子,这应该是正常工作:
< 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软件包仅用于布局。它是一个独立于角材料的独立包装。
完整说明可在你指的是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%另外,为了好玩,我增加了收缩和增长的投入。
选择器:'[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 {
以下是中的示例
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:
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材质设计组件支持布局指令吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!