Как использовать Flex Layout для Angular

Введение

Flex Layout — это компонентный движок, который позволяет создавать макеты страниц с помощью CSS Flexbox с набором директив, доступных для использования в ваших шаблонах.

Библиотека написана на чистом TypeScript, поэтому внешние таблицы стилей не нужны. Он также предоставляет способ указать разные директивы в разных точках останова для создания адаптивных макетов.

В этом руководстве вы создадите пример приложения Angular и будете использовать Flex Layout для размещения элементов.

Предпосылки

Для выполнения этого урока вам понадобятся:

Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
Некоторое знакомство с использованием компонентов Angular может быть полезным.

Это руководство было проверено с помощью Node v14.13.1, npm v6.14.8, angular v10.1.6 и @angular/flex-layout.

Шаг 1 — Настройка проекта

Вы можете использовать @angular/cli для создания нового проекта Angular.

В окне терминала используйте следующую команду:

npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

Это настроит новый проект Angular со стилями, установленными на «CSS» (в отличие от «Sass», «Less» или «Stylus»), без маршрутизации и пропустит тесты.

Перейдите в только что созданный каталог проекта:

cd angular-flex-example

В папке проекта выполните следующую команду, чтобы установить Flex Layout:

npm install @angular/flex-layout@10.0.0-beta.32

Затем импортируйте FlexLayoutModule в модуль вашего приложения:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from "@angular/flex-layout";

import { AppComponent } from './app.component';

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

Запустите проект, чтобы убедиться в отсутствии ошибок.

npm start

Если вы откроете локальное приложение (обычно по адресу localhost:4200) в веб-браузере, вы увидите сообщение приложение angular-flex-example запущено!.

Установив этот каркас, вы можете использовать Flex Layout в своих шаблонах.

Шаг 2 — Экспериментирование с Flex Layout

Затем вы измените шаблон app.component.html, чтобы использовать FlexLayoutModule.

Вот рисунок, показывающий окончательный результат экспериментов с Flex Layout в этом руководстве:

Сначала откройте app.component.css в редакторе кода и добавьте следующие строки кода:

.container {
  margin: 10px;
}

.item {
  border-radius: .2em;
  color: #ffffff;
  font-family: sans-serif;
  font-size: 2em;
  padding: 4em 1em;
  text-transform: uppercase;
}

.item-1 {
  background-color: #009169;
}

.item-2 {
  background-color: #55b296;
}

.item-3 {
  background-color: #9fd3c3;
}

.item-4 {
  background-color: #e7b013;
}

.item-5 {
  background-color: #073443;
}

Затем откройте app.component.html в редакторе кода и замените код двумя контейнерами div и пятью внутренними элементами div:

<div class="container">
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container">
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

После перекомпиляции откройте свое приложение в веб-браузере. Теперь у вас будет пять div, расположенных друг над другом.

Затем добавьте fxLayout:

<div class="container"
     fxLayout
>
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
>
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

Этот код применит стили display: flex и flex-direction: row к контейнерам div.

После перекомпиляции зайдите в свое приложение в веб-браузере, и вы увидите три элемента div, разделяющих верхнюю строку, и два элемента div, разделяющих нижнюю строку.

Затем добавьте fxLayoutAlign и fxLayoutGap:

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
>
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
>
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

Этот код применит стили place-content: stretch center и align-items: stretch к контейнеру div. Он также применит пространство 10px между flex-элементами.

Примечание. В версии 10.0.0-beta.32 fxLayoutGap использует свойство CSS margin вместо свойства CSS gap.

Затем используйте адаптивные суффиксы, чтобы изменить стили flexbox в определенных точках останова:

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

Этот код установит точки останова на размерах экрана xs (очень маленьком). Он изменит макет с row по умолчанию на column и размер зазора с 10px на 0 .

После перекомпиляции откройте свое приложение в веб-браузере. Измените размер окна браузера до точки останова xs (менее 599px в ширину) и наблюдайте за изменением стилей.

Псевдонимы точек останова доступны для различных размеров экрана:

sm - маленький
мд – средний
lg — большой
xl — очень большой

Существуют также директивы, которые можно добавить для дочерних элементов.

Затем добавьте fxFlex:

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-1"
       fxFlex="15%"
  >
    Item 1
  </div>
  <div class="item item-2"
       fxFlex="20%"
  >
    Item 2
  </div>
  <div class="item item-3"
       fxFlex
  >
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-4"
       fxFlex
  >
    Item 4
  </div>
  <div class="item item-5"
       fxFlex="200px"
  >
    Item 5
  </div>
</div>

Этот код применит flex-grow: 1, flex-shrink: 1 и flex-basis: 100%. Указав значение ширины, он применит свойство max-width.

Затем добавьте fxFlexOrder и fxFlexOffset:

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-1"
       fxFlex="15%"
  >
    Item 1
  </div>
  <div class="item item-2"
       fxFlex="20%"
       fxFlexOrder="3"
  >
    Item 2
  </div>
  <div class="item item-3"
       fxFlex
  >
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-4"
       fxFlex
       fxFlexOffset="50px"
       fxFlexOffset.xs="0"
  >
    Item 4
  </div>
  <div class="item item-5"
       fxFlex="200px"
  >
    Item 5
  </div>
</div>

Этот код применит order: 3 ко второму элементу. Он также применит margin-left: 50px к четвертому элементу.

После перекомпиляции откройте свое приложение в веб-браузере, вы заметите, что второй элемент находится на третьей позиции строки, а четвертый элемент имеет отступ 50px от начала flexbox.

На этом мы заканчиваем краткие эксперименты с Flex Layout.

Заключение

В этом руководстве вы использовали Flex Layout с приложением Angular. Это позволило вам создать макет с использованием предварительно настроенных стилей CSS Flexbox без дополнительных стилей.

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

В этом примере вы жестко закодировали значения директивы. Также можно использовать привязку данных для привязки к значениям в классе компонента (например, [fxLayout]=direction). Это позволит вам создавать высокодинамичные макеты, которыми пользователь может управлять и изменять.

Flex Layout также можно использовать в сочетании с компонентами Angular Material for Material Design.