Как добиться такого макета с помощью Angular Flex-Layout - PullRequest
Новая
       15

Как добиться такого макета с помощью Angular Flex-Layout

0 голосов
/ 05 сентября 2018

как мне добиться этого макета с помощью Angular Flex-Layout? desired layout

Так как я использую угловой материал. Кажется, мне нужно использовать эту библиотеку flex-layout вместо начальной загрузки, но проблема в том, что я не могу заставить ее работать, поэтому любая помощь приветствуется.

* Я не ищу реакции, если я смогу получить этот макет так же, как изображение, оно мне очень поможет.

1 Ответ

0 голосов
/ 05 сентября 2018

Хорошо, установите flex-layout .

Импорт модуля макета в ваш проект / модуль: 

import {FlexLayoutModule} from '@angular/flex-layout';
...
@NgModule({
 imports: [
   ...
   FlexLayoutModule,
   ...
 ]
})

И, наконец, в HTML: 

<div fxLayout="row" style="height: 100%">
  <div style="background-color: red" fxFlex="20"></div>
  <div fxLayout="column" fxFlex>
    <div style="background-color: blueviolet" fxFlex></div>
    <div style="background-color: cornflowerblue" fxFlex></div>
    <div style="background-color: darkgray" fxFlex></div>
  </div>
</div>

fxFlex="20" дает первый div 20% ширины. fxFlex без параметров просто равномерно распределяет высоту или ширину между элементами.

...