[英]Are Layout Directives supported by Angular 2 Material Design Components?
I'm trying to use the Angular2 Material Design components, and I can't get any of the layout directives to work. 我正在尝试使用Angular2 Material Design组件,我无法使任何布局指令起作用。 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. 但它没有 - 它只是将页面上的元素呈现为普通的旧div。 (I'm using the latest version of Chrome).
(我正在使用最新版本的Chrome)。
Am I missing something, like is there a CSS file I'm supposed to import? 我错过了什么,比如有一个我应该导入的CSS文件吗?
January 2017 Update : 2017年1月更新 :
Angular 2 team recently added a new NPM package flex-layout for layout only. Angular 2团队最近为布局添加了新的NPM包flex-layout 。 It is a separate package independent of angular material.
它是一个独立的包装,独立于角形材料。
The full instructions are available in the github page README. 完整说明可在github页面自述文件中找到。
Install the module: 安装模块:
npm install @angular/flex-layout -save
npm install @ angular / flex-layout -save
In app.module.ts (or equivalent), declare the module: 在app.module.ts(或等效的)中,声明模块:
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. 这是一个从flex-layout github页面中获取的plunker样本 。
Original Answer : 原答案 :
The docs you are referring to are for angular1 material. 您指的文档适用于angular1材质。 Angular2 material still doesn't have any layout directives.
Angular2材质仍然没有任何布局指令。
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="row"
与style="display:flex;flex-direction:row"
layout="column"
=> style="display:flex;flex-direction:column"
layout="column"
=> style="display:flex;flex-direction:column"
And flex
is equal to style="flex:1"
而
flex
等于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%. flex指令,使用它像:
<div flex>
或<div flex="10">
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 { }
No need to write a new directive until Material2 provide us the LayoutModule. 在Material2为我们提供LayoutModule之前,无需编写新指令。
You just have to import the angular layouts-attributes.css from angular1. 您只需从angular1导入angular layouts-attributes.css。 It takes the old directive as css selector.
它将旧指令作为css选择器。
require('node_modules/angular-material/modules/layouts/angular-material.layouts-attributes.css')
要求( 'node_modules /角材料/模块/布局/角material.layouts-attributes.css')
for example the css for directive layout-align="end" it use the css selector: [layout-align="end"] 例如css for directive layout-align =“end”它使用css选择器:[layout-align =“end”]
Another option is to use angular2-polymer in order to pull in Polymer's iron-flex-layout . 另一个选择是使用angular2聚合物以拉入Polymer的iron-flex-layout 。 It is slightly more limited and has a slightly different API than the Material 1 layout (but the Material 2 layout will also have a different API).
它稍微有限,并且与Material 1布局略有不同(但是Material 2布局也将具有不同的API)。 But it works now and is supported.
但它现在有效,并得到支持。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.