Les directives de mise en page sont-elles prises en charge par les composants de conception de matériaux angulaires 2?

Question

Je suis en train d'utiliser le Angular2 Matériel de Conception de composants, et je ne peux pas obtenir tout de la mise en page des directives de travail. Exemple:

Selon les exemples, cette il faut "juste":

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

Mais il n'est pas juste que cela rend les éléments sur la page plain old divs. (J'utilise la dernière version de Chrome).

Ai-je raté quelque chose, comme est-il un fichier CSS je suis censé importer?

Answer 1

Janvier 2017 Mise À Jour:

Angulaire 2 équipe ont récemment ajouté un nouveau package NPM flex-mise en page pour la mise en page uniquement. C'est un paquet séparé indépendant angulaire du matériel.
Les instructions complètes sont disponibles dans la page github README.

Installer le module:

npm install @angulaire/flex-mise en page -enregistrer

En application.le module.ts (ou équivalent), vous devez déclarer le module:

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

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

Exemple de balisage:

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

Voici une plunker échantillon pris à partir de la flex-mise en page github de la page.

---

Réponse Originale À Cette Question:

Les docs que vous mentionnez sont pour angular1 matériel. Angular2 matériel encore n'ont pas de directives de mise en page.

Vous pouvez facilement créer de la directive-vous dans une manière simple.

Tout ce que vous devez savoir:

layout="row" est le même que style="display:flex;flex-direction:row"
layout="column" => style="display:flex;flex-direction:column"

Et flex est égal à style="flex:1"

Que les 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';
  }
}

Le flex de la directive, l'utiliser comme: <div flex> ou <div flex="10"> n'importe quel nombre de 0 à 100%. Aussi, juste pour le fun, j'ai ajouté de la réduction et augmentation des entrées

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

Pour les utiliser partout sans les ajouter à chaque composant:

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

Voici un exemple dans plunk

Answer 2

Pas besoin d'écrire une nouvelle directive jusqu'à ce que Material2 nous fournisse le LayoutModule.

Il vous suffit d'importer les layouts-attributs.css angulaires d'angular1. Il faut l'ancienne directive comme sélecteur css.

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

par exemple, la directive css pour layout-align = "end" utilise le sélecteur css: [layout-align = "end"]

Answer 3

Une autre option est d'utiliser angular2-polymère dans le but de tirer dans du Polymère de fer-flex-mise en page. Il est légèrement plus limitée et est un peu différent de l'API que l'Matières 1 mise en page (mais le Matériel 2 mise en page ont également une API différente). Mais il fonctionne maintenant et est pris en charge.

Il existe également un guide ici.