Угловая кнопка: многоразовый компонент из реального мира
Многоразовые компоненты - отличный подход, когда что-то становится больше.
Но если вы какое-то время работали с Angular, вы, вероятно, видели кучу негибких компонентов с бизнес-логикой и множеством вариантов использования. Теперь давайте создадим реальный многоразовый компонент.
Сказал, что давайте приступим к разработке нашего компонента. Перво-наперво, теперь вам нужно создать свой проект и компонент (вы также можете создать модуль для компонента, это хорошая практика при работе с libraries
). Я не собираюсь приводить здесь эти шаги, поскольку это очень простая реализация. Но вы можете следовать Быстрому запуску команды Angular.
После описанных выше шагов давайте создадим html-шаблон компонента.
Для шаблона HTML мы собираемся определить некоторые ключевые элементы.
В этом примере мы создаем гибкую инъекцию контента.
wrapper
: контейнер для инъекции содержимого кнопки;ng-content
: в основном для ввода текста;ng-content
: для вставки значков;
Вот стиль из шаблона кнопки.
Обратите внимание, что это простой компонент, который не содержит большого количества вариаций, вам нужно адаптировать его к вашим потребностям.
Варианты: primary/secondary/outline
@function rem
: выполнить преобразование из пикселя в rem. Хорошая практика измерения CSS.
Мы также можем абстрагировать его до файла _mixins / _functions и использовать модули sass для @forward
.
$colorMap
: Здесь мы создаем функцию сопоставления всех цветовых вариаций и групп.
Он будет использоваться для динамической генерации классов для цвета с помощью color-modifier
mixin.
@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: настраивайте и тестируйте с помощью шутки.
Надеюсь, вам понравилась статья, до скорой встречи!