web-dev-qa-db-fra.com

Les directives de mise en page sont-elles prises en charge par Angular 2 composants de conception de matériau?

J'essaie d'utiliser les composants Angular2 Material Design , et je ne parviens pas à faire fonctionner l'un des directives de mise en page . Exemple:

Selon les exemples, cela devrait "fonctionner":

<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 ce n’est pas le cas - les éléments de la page sont simplement divisés en vieux. (J'utilise la dernière version de Chrome).

Est-ce que quelque chose me manque, comme est-ce qu'il y a un fichier CSS que je suis censé importer?

angularflexboxmaterial-design
56
Marcel Lamothe

Mise à jour de janvier 2017 :

L'équipe Angular 2 a récemment ajouté un nouveau package NPM flex-layout pour la mise en page uniquement. Il s’agit d’un package séparé, indépendant du matériel angular).
Les instructions complètes sont disponibles dans le page github README.

Installez le module:

npm install @ angular/flex-layout -save

Dans app.module.ts (ou équivalent), déclarez 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 un exemple de plunker tiré de la page github de flex-layout.

Réponse originale :

Les docs auxquels vous faites référence sont destinés à un matériau angular1. Le matériau Angular2 n'a toujours pas de directives de mise en page.

Vous pouvez facilement créer la directive vous-même de manière simple.

Tout ce que vous devez savoir:

layout="row" est identique à style="display:flex;flex-direction:row"
layout="column" => style="display:flex;flex-direction:column"

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

En tant que 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';
  }
}

La directive flex, utilisez-la comme: <div flex> ou <div flex="10"> un nombre quelconque compris entre 0 et 100%. En outre, juste pour le plaisir, j'ai ajouté réduire et augmenter les intrants

@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

122
Abdulrahman

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

Vous devez simplement importer le angular layouts-attributs.css de angular1. Il prend 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"]

3
lekev87

Une autre option consiste à utiliser angular2-polymer pour insérer Polymer iron-flex-layout . Il est légèrement plus limité et a une API légèrement différente de celle de la disposition Matériau 1 (mais la disposition de Matériel 2 aura également une API différente). Mais cela fonctionne maintenant et est pris en charge.

Il y a aussi un guide ici .

1
Splaktar