Angular и CSS Grid: динамические свойства сетки

Angular и CSS Grid: динамические свойства сетки

От автора: цель статьи: изучить один из способов динамического изменения свойств CSS Grid с помощью Angular @HostBindingDecorator.

Исходный код / демо-версия: StackBlitz

Наше приложение

CSS Grid (контейнер и элементы)

Наша CSS Grid будет состоять из двух компонентов Angular. Родитель / контейнер и дочерний элемент. CSS Grid — это относительно новое соглашение для написания CSS, которое позволяет создавать реактивные сетки для размещения и выравнивания элементов.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

app.component.html

С помощью селектора :host, компоненты Angular могут сами выполнять выбор. Мы можем использовать эту концепцию для обработки компонентов, таких как grid-контейнер или grid-элементы, и избегать использования оболочки div.

container.component.css

display: grid: определяет элемент как grid-контейнер

grid-template-rows: определяет максимальное количество строк и размер строки

grid-auto-flow: column: указывает сетке создать новый столбец (вместо новой строки), когда ему не хватает места по вертикали.

gap: определяет зазор между каждым элементом.

В нашем примере каждая строка будет занимать 1 часть пространства. Поскольку в нашем случае мы указали 3 строки repeat(3, 1fr), каждая строка будет занимать 1/3 высоты элемента div. Столбцы будут занимать место в зависимости от размера контекста.

Советы по CSS Grid

Хотите центрировать что-то в грид-элементах? Сделайте сами элементы сетки контейнерами сетки и используйте justify-items и align-items.

Привязка хоста

Теперь, когда у нас есть базовое понимание таблицы, мы можем получить доступ к свойствам CSS в Angular Component Class.

container.component.ts

Привязка хоста позволяет нам получать доступ и применять стили и классы CSS к компоненту. Мне нравится думать об этом, как об обновлении свойств селектора :host с помощью TypeScript.

container.component.ts

Обновление переменной HostBinding изменит значение свойства CSS для компонента. Мы можем подключить это к событию, чтобы дать возможность пользователю обновлять сетку.

Советы по Angular

Мы также можем добавлять и удалять классы, используя @HostBinding:

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Обработка событий

Теперь, когда Angular и CSS Grid объединены с помощью HostBinding. Мы предоставим пользователю возможность (с ограничением) обновлять grid-template-columns и gap.

Использование Angular Directive — это простой способ, позволяющий родственным компонентам связываться друг с другом. При нажатии кнопки мы отправим событие в контейнер для обновления привязки хоста.

container.component.ts

Приведенный выше код выполняет следующее:

Подписывается на обновления зазора, изменяя зазор на 5px, что увеличивает или уменьшает зазор между элементами сетки

Подписывается на обновления рядов, изменяя первый параметр repeat() на 1, что увеличивает или уменьшает количество рядов в сетке.

Проверяет зазоры и ряды, чтобы убедиться, что мы не опустились ниже предела 1 для рядов или 0 для зазора.

Использует DOM Sanitizer, чтобы дать нам возможность передавать стиль как String.

Исходный код для кнопок и директивы вы можете найти на StackBlitz; они просты. Всю тяжелую работу выполняет контейнер.

Советы по Angular

Если родитель содержит директиву, все дочерние элементы родителя могут внедрить этот экземпляр директивы в свой класс Typescript.

Очистка DOM

Существует множество статей и ресурсов, посвященных изучению Angular’s DOM Sanitizer.

Без использования bypassSecurityTrustStyle

Вот вкратце мое мнение. Если мы фиксируем, где пользователь может отправлять входные данные и какие входные данные пользователь может отправлять, это можно считать «безопасным» для обхода Angular DOM Sanitizer.

container.component.ts

Мы разрешаем пользователю обновить первый параметр в функции CSS repeat(). Мы ограничиваем ввод пользователя нажатием кнопки; мы контролируем значение, которое генерирует клик.

Окончательное приложение

Заключение

Селектор Angular :host позволяет нам работать с такими компонентами, как css-grid или css-grid-items

Angular @HostBindingDecorator позволяет получать доступ и обновлять классы и стили CSS

Angular защищает потенциально опасные обновления DOM. Мы должны подумать о том, где и что мы разрешаем пользователям обновлять, минуя этот функционал.

Спасибо за чтение!

Автор: Erxk Verduin

Источник: https://itnext.io

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий