Тестовое задание на Angular. Создание UI kit для приложения.

Aleksandr Serenko

Published in

F.A.F.N.U.R

3 min readJul 5, 2021

В данной статье создадим общий UI kit для приложения.

В приложении пригодятся следующие компоненты:

контейнер (ContainerModule)
колонки (GridModule)
прелоадер (SpinnerModule)
карусель (CarouselModule)
набор общих пайпов (SharedModule)

Каждый модуль будем создавать отдельно согласно структуре:

app/
  ui/
    carousel/
    container/
    grid/
    spinner/
    shared/

Каждый из модулей будет не зависимым и может быть использован в любом месте приложения.

Создание GridModule

Добавим несколько UI компонентов для создания колонок.

Создадим RowComponent:

Данный компонент реализует аналог класса “row” в Bootstrap. Передаваемый параметр говорит с какого размера, необходимо применить стили.

Аналогично создадим ColumnComponent:

Данный компонент реализует аналог классов колонок в Bootstrap. Компонент принимает в качестве параметра объект, который добавит соответствующие стили компоненту.

Пример создания колонок:

<app-row mode="md">
  <app-column class="admin-menu" [modes]="{ md: 4, lg: 3, xl: 2 }">
    ...
  </app-column>
  <app-column [modes]="{ md: 8, lg: 9, xl: 10 }">
    ...
  </app-column>
</app-row>

В данном случае, мы получим колонки, начиная с размера md (подробнее о bootstrap grid’ах). Левая колонка будет иметь размеры:

при md левая 4, правая 8
при lg левая 3, правая 9
при xl, левая 2, правая 10

Создание ContainerModule

Добавим компонент, который будет иметь фиксированную ширину, а также выравнивать блок по центру.

Формально создадим аналог класса “container” из Bootstrap.

Создадим компонент ContainerComponent:

Как видно из реализации, компонент лишь добавляет отступы слева и справа. Также в компоненте есть ряд свойств, которые позволяют немного менять его логику. В частности выравнивать потомков в виде строки или столбцов, также задавать фиксированную высоту.

Примеры использования:

<app-container>
 ...
</app-container><app-container mode="fluid" height="max-height">
 ...
</app-container>

Создание SpinnerModule

В Angular Material уже есть стили для Spinner’а. Создадим компонент, который подключит в себе стандартный spinner, а также добавим немного стилей, чтобы спиннер выравнивался по середине и имел отступы сверху и снизу.

Пример использования:

<app-spinner></app-spinner>

Создание Icon Module

В Angular Material есть модуль для иконок Material. С помощью этого модуля можно вывести кастомные иконки.

Добавим иконки для соц. сетей:

В модуле формируется список иконок и передается в MatIconRegistry.

Создание Shared Module

Добавим BackgroundImagePipe, который получает на вход путь до изображения и отдает объект для вывода данного изображения:

Пример использования:

<div [ngStyle]="photo | backgroundImage"></div>

Создание Carousel Module

И создадим микро карусель для вывод изображений.

В карусели будут:

slides — список слайдов для отображения
dots — точки, при клике по которым будет переход к слайдам
navs — две стрелки, которые будут вести на предыдущий, следующий шаг

Создадим компонент карусели

Реализация компонента очень проста, и содержит лишь переходы к следующим и предыдущим слайдам.

Реализуем сам слайд:

Единственное назначение слайда это вывод слайда.

Добавим реализацию dots:

При клике на точку, происходит на

И navs:

Компонент добавляет две кнопки, которые позволяет переходить на предыдущий и следующий слайд.

Ссылки

Вернуться к оглавлению — Введение.

Следующая статья — Создание страницы бронирования.

Предыдущая статья — Создание State для бронирования варианта.

Все исходники на github/fafnur/barinb.

Fafnur/barinb

Barinb — пример “тестового” Angular приложения с использованием лучших практик. Проект представляет собой реализацию…

github.com

Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur