КАСТОМИЗАЦИЯ ВНЕШНЕГО ВИДА ВЕБ-САЙТА НА ОСНОВЕ ФРЕЙМВОРКА ANT DESIGN

CUSTOMIZING WEBSITE APPEARANCE BASED ON ANT DESIGN FRAMEWORK

Maxim Beryanov

Student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

Фреймворк под названием Ant Design предоставляет множество компонентов пользовательского интерфейса для встраивания в веб-приложение. Для подобного рода фреймворков важна возможность изменения (кастомизации) цветового решения. В данной статье предлагается понять, каким образом Ant Design позволяет менять свою тему и цветовое оформление.

ABSTRACT

Ant Design framework provides many UI components to be embedded in a web application. For such kind of frameworks, the ability to change (customize) its color solution is important. This article proposes to understand how Ant Design allows us to change its theme and color scheme.

Ключевые слова: веб, Ant Design, цвет, тема, дизайн.

Keywords: web, Ant Design, color, theme, design.

Ant Design [1] позволяет настраивать токены графического интерфейса, чтобы разнообразить пользовательский интерфейс [2] в соответствии с необходимыми требованиями, включая основной цвет, степень сглаживания углов, цвет границ и многое другое. В версии 5.0 был представлен новый способ настройки тем – в отличие от less и CSS-переменных в версии 4.x, с использованием CSS в JS возможности для редактирования тем были также расширены, включая, помимо прочего, динамическое переключение тем, их множественность.

В версии 5.0 появляется базовый элемент, влияющий на тему – Design Token. Изменяя такие токены, мы можем прямым образом влиять на внешний вид компонентов из библиотеки.

Для того, чтобы настроить тему, необходимо в библиотечный компонент-обертку ConfigProvider передать атрибут theme. Простой пример использования представлен на рисунке 1 с соответствующим результатом на рисунке 2 в виде измененного основного цвета в рамках Ant Design.

Рисунок 1. Использование компонента-обертки ConfigProvider

Рисунок 2. Цветовое решение компонента Button

Можно установить заранее определенную тему оформления через свойство algorithm – по умолчанию определяется несколько наборов предустановленных алгоритмов: по умолчанию (theme.defaultAlgorithm), темная тема (theme.darkAlgorithm) и компактность (theme.compactAlgorithm), их можно комбинировать вместе.

В дополнение к Design Token каждый компонент также может иметь свой собственный Component Token для достижения возможности настройки стиля определенного компонента (рисунки 3 и 4). Компоненты-обертки ConfigProvider также можно вкладывать друг в друга, чтобы локально изменять тему оформления в определенных частях страницы, не влияя на дизайн в целом.

Рисунок 3. Изменение цветового токена для определенного компонента

Рисунок 4. Различное цветовое решение двух компонентов

Посмотрим, как работает изменение алгоритма построения темы в значение theme.darkAlgorithm (рисунок 5). Как мы видим, в примере использовались различные компоненты, в том числе таблица и крайнее меню, однако все из них автоматически перекрасились в темное цветовое представление.

Рисунок 5. Пример темного цветового решения

Таким образом, был исследован принцип изменения (кастомизации) темы в фреймворке под названием Ant Design. Всевозможные доступные к модификации Design Token’ы доступны к ознакомлению на официальном сайте Ant Design [3]. С помощью описанных выше решений можно быстро и удобно (а главное, динамическим образом) настраивать цветовое оформление веб-сайта и делать его менее похожим на другие, написанные на том же фреймворке в стандартной теме, сайты.

Список литературы:

1. Ant Design [Электронный ресурс] URL: https://ant.design (дата обращения: 19.12.2022).
2. Пользовательский интерфейс [Электронный ресурс] URL: https://practicum.yandex.ru/blog/chto-takoe-polzovatelskii-interfeys/ (дата обращения: 19.12.2022).
3. Ant Design | Customize Theme [Электронный ресурс] URL: https://ant.design/docs/react/customize-theme (дата обращения: 19.12.2022).