Реализация Flex Layout в Angular: практическое руководство

Hark Labs2022-05-12 · 12 min read

Реализация Flex Layout в Angular: практическое руководство

Введение

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

Flex Layout использует Typescript, что делает его идеальным для приложений Angular. Внешние таблицы стилей не требуются, а для создания адаптивных макетов можно использовать различные директивы. В этом руководстве мы создадим простое приложение Angular и внедрим Flex Layout для компоновки наших компонентов.

Давайте начнем!

Предварительные требования

Приложения Angular используют Node.js в качестве среды выполнения. Для выполнения этого руководства вам понадобится установленный Node.js на вашем компьютере для разработки. У нас есть подробное руководство Как установить Node.js на Ubuntu 18.04, которое поможет вам легко настроить Node.js.
Вам также понадобится некоторое знакомство с использованием компонентов Angular и настройкой проекта Angular.

Настройка проекта

Здесь нам нужно выполнить два шага:

Нам нужно настроить новое приложение Angular.
Нам понадобится установить Flex Layout с помощью npx, чтобы мы могли импортировать и использовать его в нашем приложении.

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

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

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

Здесь мы создаем новое приложение Angular с использованием @angular/cli. Имя нашего приложения — angular-flex-example. В качестве стилизации мы будем использовать CSS, а не Sass или Less. Кроме того, мы укажем, что нам не нужна маршрутизация. Тесты нас также не интересуют, поэтому мы их тоже пропустим.

Теперь, когда ваше приложение готово, перейдите в каталог приложения и выполните команду ниже для установки Flex Layout:

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

1 2	cd angular-flex-example 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 { }

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

npm start

Ваше приложение по умолчанию будет запущено на localhost:4200 по умолчанию. Перейдите по этому URL-адресу в веб-браузере. Вы увидите сообщение: “angular-flex-example is running!. После завершения этой настройки давайте спроектируем наш шаблон с использованием Flex Layout.

Создание Flex Layout

Здесь мы добавим код в app.component.html, чтобы использовать Flex Layout с FlexLayoutModule. Наш конечный результат будет похож на рисунок ниже:

Чтобы достичь вышеуказанного результата, откройте 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;
}

.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">
    Элемент 1
    </div>
    
    <div class="item item-2">
    Элемент 2
    </div>
    
    <div class="item item-3">
    Элемент 3
    </div>

</div>

<div class="container">
    <div class="item item-4">
    Элемент 4
    </div>
    
    <div class="item item-5">
    Элемент 5
    </div>

</div>

Элемент 1

</div>

Элемент 2

</div>

Элемент 3

</div>

Элемент 4

</div>

Элемент 5

</div>

После этого скомпилируйте и запустите ваше приложение. Вы увидите пять div, расположенных друг над другом, так как до этого момента мы не задали никакой макет. Чтобы добавить fxLayout добавьте следующий код:

<div class="container" fxLayout>
    <div class="item item-1">
    Элемент 1
    </div>

    <div class="item item-2">
    Элемент 2
    </div>

    <div class="item item-3">
    Элемент 3
    </div>

</div>

<div class="container" fxLayout>

    <div class="item item-4">
    Элемент 4
    </div>
   
    <div class="item item-5">
    Элемент 5
    </div>

</div>

Элемент 1

</div>

Элемент 2

</div>

Элемент 3

</div>

Элемент 4

</div>

Элемент 5

</div>

В приведенном выше коде после применения этого fxLayout, CSS-свойства display:flex и flex-direction:row применяются к контейнеру divs. Теперь при запуске приложения у вас будет три div в первом ряду и два div в нижнем ряду.

Далее мы добавляем fxLayoutAlign и fxLayoutGap для улучшения нашего макета:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
    <div class="item item-1">
    Элемент 1
    </div>

    <div class="item item-2">
    Элемент 2
    </div>

    <div class="item item-3">
    Элемент 3
    </div>

</div>

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">  
    <div class="item item-4">
    Элемент 4
    </div>

    <div class="item item-5">
    Элемент 5
    </div>
</div>

Элемент 1

</div>

Элемент 2

</div>

Элемент 3

</div>

Элемент 4

</div>

Элемент 5

</div>

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

Теперь, когда мы применили fxLayout, пришло время сделать наш макет адаптивным:

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1">
    Элемент 1
    </div>
    
    <div class="item item-2">
    Элемент 2
    </div>

    <div class="item item-3">
    Элемент 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4">
    Элемент 4
    </div>

    <div class="item item-5">
    Элемент 5
    </div>
</div>

Элемент 1

</div>

Элемент 2

</div>

Элемент 3

</div>

Элемент 4

</div>

Элемент 5

</div>

Этот код установит контрольную точку для очень маленьких xs экранов. Экран изменит макет со строки по умолчанию на колонку, а размер отступа уменьшится с “10px” до “0px” на очень маленьких экранах. Вы можете протестировать это, запустив приложение и изменив размер окна до xs (менее 599px в ширину). Вы заметите, как меняется стилизация.

Для различных размеров экрана у нас есть разные суффиксы:

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

У нас также есть директивы для дочерних элементов. Добавьте fxFlex как в коде ниже:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1" fxFlex="15%">
        Элемент 1
    </div>

    <div class="item item-2" fxFlex="20%">
        Элемент 2
    </div>

    <div class="item item-3" fxFlex>
        Элемент 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div class="item item-4" fxFlex>
        Элемент 4
    </div>
    
    <div class="item item-5" fxFlex="200px">
        Элемент 5
    </div>

</div>

Элемент 1

</div>

Элемент 2

</div>

Элемент 3

</div>

Элемент 4

</div>

Элемент 5

</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%">
    Элемент 1
    </div>

    <div class="item item-2" fxFlex="20%" fxFlexOrder="3">
    Элемент 2
    </div>

    <div class="item item-3" fxFlex>
    Элемент 3
    </div>
</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4" fxFlex fxFlexOffset="30px" fxFlexOffset.xs="0">
    Элемент 4
    </div>

    <div class="item item-5" fxFlex="200px">
    Элемент 5
    </div>

</div>

Элемент 1

</div>

Элемент 2

</div>

Элемент 3

</div>

Элемент 4

</div>

Элемент 5

</div>

Используя этот код, мы применили order: 3 ко второму элементу. Это также установит margin-left: 50px для четвертого элемента. Теперь, если вы запустите приложение, вы увидите, что второй элемент находится на третьей позиции в строке, в то время как четвертый элемент получает отступ в 30px от начала.

Подведение итогов

В этом руководстве мы узнали, как реализовать Flex Layout в приложениях Angular. Это будет полезно, так как мы сможем использовать готовые макеты Flexbox CSS без необходимости писать стили самостоятельно. Если вам нужна дополнительная информация, обратитесь к Flex Layout Wiki на странице GitHub.

Чтобы упростить задачу в этом руководстве, мы не использовали связывание для привязки значений в классе компонента. Однако в классе компонента возможно как однонаправленное, так и двунаправленное связывание [fxLayout]="ваше направление макета". Это даст вам больше контроля при создании макетов и позволит обрабатывать динамические сценарии использования.

Приложения Angular используют Node.js в качестве среды выполнения. Если вы хотите узнать больше о Node.js и о том, как развертывать приложения Node.js в Docker, ознакомьтесь с нашим Как развернуть приложение Node.js (Express.js) с помощью Docker на Ubuntu 20.04Чтобы узнать больше об Angular, ознакомьтесь с нашим руководством Навигация с помощью RouterLink, Navigate и NavigateByUrl в Angular Router.

Приятного программирования!

Hark Labs

Автор · CloudSigma

Preslav Dobrev — креативный дизайнер в CloudSigma, сосредоточенный на формировании последовательного корпоративного образа с помощью традиционных и инновационных маркетинговых каналов. Он умело сочетает художественное видение со стратегическим маркетингом, создавая убедительные истории бренда.

Реализация Flex Layout в Angular: практическое руководство

Введение

Предварительные требования

Настройка проекта

Создание Flex Layout

Подведение итогов

Hark Labs

Комментарии