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

как я могу добиться этого макета с помощью Angular Flex-Layout? желаемый макет

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

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


angular layout angular-material angular-flex-layout
person Paulo Afonso Pinheiro    schedule 05.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Итак, установите 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 без параметров просто равномерно распределяет высоту или ширину между элементами.

person PeS    schedule 05.09.2018