Как сделать согласованный интерфейс с использованием Angular 2 + включение
Если вы фронтенд-разработчик или дизайнер, экспериментирующий с Angular, вы могли столкнуться с некоторыми из следующих проблем при написании пользовательского интерфейса:
- Классы CSS могут выйти из-под контроля, а HTML может стать беспорядочным!
- Вы чувствуете боль, когда вам нужно очистить и реструктурировать свой CSS
- Расстановка интервалов между именами в CSS с помощью таких инструментов, как БЭМ кажется слишком сложным!
У меня есть несколько советов по решению этих проблем, а именно с помощью Angular 2 и концепции включения. Не пугайтесь этого слова включение, это не так сложно, как кажется. Перефразируя Scotch.io:
Включение позволяет определить фиксированный шаблон для данного элемента пользовательского интерфейса и в то же время позволяет определить слот для динамического содержимого.
Таким образом, вы можете легко заменять различные типы контента на элемент пользовательского интерфейса, такой как «карточка» - мы рассмотрим это подробнее в следующем разделе. Итак, без дальнейших выплат, пойдем.
Компонент - это ключевое слово
Angular 2 поставляется с компонентами, которые представляют собой изолированные элементы, которые включают настраиваемые html-селекторы. Используя их, мы можем назначать стили CSS любому селектору, не беспокоясь о утечке объявлений или неприятном запахе CSS. И это сила, которую мы рассмотрим в этой статье.
Как работает трансляция?
Прежде чем мы начнем, вы должны знать основы. Включение в Angular 2 позволяет нам размещать динамический контент в строго определенных областях, помещая тег
‹ng-content› в HTML-код наших включенных компонентов.
Практическое использование
Наша задача проста: мы хотим построить компонент панели:
Как видите, у него есть заголовок и раздел содержание. Так что давай сделаем это.
Шаг 1. Создайте компонент: panel.ts
Мы использовали здесь атрибут select, чтобы всегда помещать заголовок в одно и то же место с помощью настраиваемого тега html:
<ng-content select="panel-header"></ng-content>
Чтобы это работало, вам нужно импортировать и добавить
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]в файле модуля приложения. В противном случае вы получите ошибку шаблона.
Шаг 2. Добавьте новый компонент CSS: panel.sass
Импортируйте его в основной файл SASS / SCSS вашего проекта.
Шаг 3. Используйте компонент Panel где угодно
Вуаля. Вот и все, мы создали отдельный компонент пользовательского интерфейса, готовый к использованию везде.
Объяснение
Наша Panel Componen имеет строго определенную структуру, которая состоит из содержимого и заголовка, поэтому вы можете использовать ее многократно, не добавляя какие-либо классы CSS в html ваших основных страниц. Главное, чтобы все компоненты были разделены, чтобы вы могли создавать сложные атомарные интерфейсные системы на основе небольших блоков, таких как LEGO.
Этот подход также означает, что если вы хотите разместить контент где угодно, вы должны сначала создать определенные шаблоны, чтобы представить каждую новую часть интерфейса. Это не так просто для новичков, но в долгосрочной перспективе это сохранит ваш код чистым и аккуратным.
Выбрать атрибут
В нашем примере select использовался как тег html, но у него больше возможностей.
Тег HTML
<ng-content select="panel-header"></ng-content>
Вывод DOM:
<panel-header></panel-header>
Примечание. Чтобы использовать пользовательские теги HTML, необходимо добавить
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
в файле модуля приложения.
CSS-класс
<ng-content select=".panel-header"></ng-content>
Вывод DOM:
<div class="panel-header"></div>
Атрибут тега HTML
<ng-content select="[panel-header]"></ng-content>
Вывод DOM:
<div panel-header></div>
Атрибут тега HTML с определенным значением
<ng-content select="[type=panel-header]"></ng-content>
Вывод DOM:
<div type="panel-header"></div>
Спасибо за внимание!
Если у вас есть предложения, не стесняйтесь обращаться ко мне.
Ищете опытного разработчика? Посетите narloch.eu.
