Угловая кнопка: многоразовый компонент из реального мира

Многоразовые компоненты - отличный подход, когда что-то становится больше.

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

Сказал, что давайте приступим к разработке нашего компонента. Перво-наперво, теперь вам нужно создать свой проект и компонент (вы также можете создать модуль для компонента, это хорошая практика при работе с libraries). Я не собираюсь приводить здесь эти шаги, поскольку это очень простая реализация. Но вы можете следовать Быстрому запуску команды Angular.

После описанных выше шагов давайте создадим html-шаблон компонента.

Для шаблона HTML мы собираемся определить некоторые ключевые элементы.

В этом примере мы создаем гибкую инъекцию контента.

  • wrapper: контейнер для инъекции содержимого кнопки;
  • ng-content: в основном для ввода текста;
  • ng-content: для вставки значков;

Вот стиль из шаблона кнопки.

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

Варианты: primary/secondary/outline

@function rem: выполнить преобразование из пикселя в rem. Хорошая практика измерения CSS.

Мы также можем абстрагировать его до файла _mixins / _functions и использовать модули sass для @forward.

$colorMap: Здесь мы создаем функцию сопоставления всех цветовых вариаций и групп.

Он будет использоваться для динамической генерации классов для цвета с помощью color-modifiermixin.

@mixin color-modifier: этот миксин помогает нам создать один класс для каждого набора правил в цветовой группе $colorMap.

Он использует @each из sass для выполнения итераций над функцией сопоставления.

У нас также есть стили для контуров и вариантов значков.

Я сделал это просто, используя значок в качестве элемента img, но вы можете увеличить этот пример, добавив поддержку svg libs и прочего.

Чтобы организовать наш код, я решил создать простой интерфейс для определения свойств компонента кнопки.

Здесь нам нужно изменить атрибут селектора в декораторе компонента.

Мы поместили это так, поэтому мы можем использовать компонент следующим образом:

<button customButton></button>
<a customButton></a>

@Input : Мы используем ввод для определения цвета / значка и типа контура. Во вводе схемы мы использовали функцию set для обработки самого ввода и обеспечения того, есть ли у нас входное значение или нет, поэтому мы можем использовать его следующим образом:

<a customButton outline></a>

@HostBinding : Декоратор, который отмечает свойство DOM как свойство привязки к хосту и предоставляет метаданные конфигурации. См. Документы здесь.

Здесь мы используем hostBinding для привязки правильного класса css к правильному типу кнопки.

Теперь воспользуемся разработанным нами компонентом.

Чтобы показать пример в хорошей форме, мы можем использовать следующее.

Визуализированный компонент должен выглядеть так:

Очень хорошо! Но как насчет unit testin g?

Здесь вы можете увидеть следующую статью, в которой мы тестируем компонент кнопки, который мы разработали в этой статье. Angular: настраивайте и тестируйте с помощью шутки.

Надеюсь, вам понравилась статья, до скорой встречи!