example - angular material install

¿Son compatibles las directivas de diseño con Angular 2 Material Design Components?

Question

Estoy tratando de usar los componentes Angular2 Material Design , y no puedo hacer que ninguna de las directivas de diseño funcione. Ejemplo:

Según los ejemplos, esto debería "funcionar":

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

Pero no es así: solo representa los elementos de la página como simples divs antiguos. (Estoy usando la última versión de Chrome).

¿Me estoy perdiendo algo, como si hay un archivo CSS que debo importar?

Answer 1

No es necesario escribir una nueva directiva hasta que Material2 nos proporcione el LayoutModule.

Solo tiene que importar los diseños-atributos.css angulares de angular1. Toma la directiva anterior como selector de CSS.

require (''node_modules / angular-material / modules / layouts / angular-material.layouts-attribute.css'')

por ejemplo, el css para la directiva layout-align = "end" usa el selector css: [layout-align = "end"]

Answer 2

Otra opción es utilizar angular2-polymer para atraer el iron-flex-layout de iron-flex-layout de Polymer. Es un poco más limitado y tiene una API ligeramente diferente que el diseño del Material 1 (pero el diseño del Material 2 también tendrá una API diferente). Pero funciona ahora y es compatible.

También hay una guía here .

Answer 3

Actualización de enero de 2017 :

El equipo de Angular 2 agregó recientemente un nuevo paquete flex-layout NPM para el diseño únicamente. Es un paquete separado independiente del material angular.
Las instrucciones completas están disponibles en la flex-layout README.

Instalar el módulo:

npm install @ angular / flex-layout -save

En app.module.ts (o equivalente), declare el módulo:

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

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

Ejemplo de marcado:

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

Aquí hay una muestra de plunker tomada de la página github de diseño flexible.

Respuesta original

Los documentos a los que se refiere son para material angular1. El material Angular2 todavía no tiene directivas de diseño.

Puede crear fácilmente la directiva usted mismo de una manera simple.

Todo lo que necesitas saber:

layout="row" es lo mismo que style="display:flex;flex-direction:row"
layout="column" => style="display:flex;flex-direction:column"

Y flex es igual a style="flex:1"

Como directivas:

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

La directiva flex, úsela como: <div flex> o <div flex="10"> cualquier número del 0 al 100%. Además, solo por diversión, agregué entradas de reducción y crecimiento

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

Para usarlos en todas partes sin agregarlos a cada componente:

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

Aquí hay una muestra en plunk