Подтвердить что ты не робот

Директивы Layout поддерживаются Angular 2 компонентами дизайна материалов?

Я пытаюсь использовать компоненты Angular2 Material Design, и я не могу получить ни одного из директивы компоновки для работы. Пример:

В соответствии с примерами это должно "просто работать":

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

Но это не так - он просто отображает элементы на странице как простые старые div. (Я использую последнюю версию Chrome).

Я что-то пропустил, например, есть ли файл CSS, который я должен импортировать?

Ответ 1

Январь 2017 Обновление:

Команда

Angular 2 недавно добавила новый пакет NPM flex-layout только для макета. Это отдельный пакет, не зависящий от материала angular.
Полные инструкции доступны на странице github README.

Установите модуль:

npm install @ angular/flex-layout -save

В app.module.ts(или эквиваленте) объявите модуль:

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

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

Пример разметки:

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

Вот пример plunker, взятый из страницы github flex-layout.

Оригинальный ответ:

docs, на которые вы ссылаетесь, относятся к материалу углового1. Angular2 материал по-прежнему не имеет директив компоновки.

Вы можете легко создать директиву себе простым способом.

Все, что вам нужно знать:

layout="row" совпадает с style="display:flex;flex-direction:row"
layout="column" = > style="display:flex;flex-direction:column"

И flex равно style="flex:1"

В качестве директив:

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

Директива flex, используйте его как: <div flex> или <div flex="10"> любое число от 0 до 100%. Кроме того, просто для удовольствия я добавил сокращение и увеличение входов

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

Чтобы использовать их везде, не добавляя их к каждому компоненту:

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

Вот пример в plunk

Ответ 2

Не нужно писать новую директиву до тех пор, пока Material2 не предоставит нам LayoutModule.

Вам просто нужно импортировать angular layouts-attributes.css из angular1. Он принимает старую директиву как селектор css.

требуется ( 'node_modules/angular -Материал/модули/макеты/ angular -material.layouts-attributes.css')

например, css для директивы layout-align = "end" используется css селектор: [layout-align = "end" ]

Ответ 3

Другой вариант - использовать angular2-polymer, чтобы вытащить Polymer iron-flex-layout. Он немного более ограничен и имеет несколько иной API, чем макет Material 1 (но макет Material 2 также будет иметь другой API). Но он работает сейчас и поддерживается.

Существует также руководство здесь.