Как использовать Semantic UI в Angular приложении

Что такое Semantic UI

Semantic UI это фреймворк который позволяет быстро создавать красивый интерфейс для сайта или приложения, используя простую HTML структуру и понятные CSS селекторы.

Semantic UI в Angular

Очень часто в приложениях на Angular используются библиотеки Material и Bootstrap, поэтому, казалось бы, что если хочется что-то новенького, то легко можно использовать элементы из Semantic UI. Но не тут-то было, если следовать инструкциям на официальном сейте и попробовать установить пакеты — вот так:

npm install --save semantic-ui

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

Установка Semantic UI

Самый простой способ решить эту проблему это установить упрощенную версию, которой не требуется Gulp, а именно только CSS. Это можно сделать с помощью следующей команды:

npm install --save semantic-ui-css

Команда выполнится без каких-либо проблем и установятся базовые стили из Semantic UI, что и требовалось, ведь весь смысл использования CSS фреймворков – это быстрая стилизация.

Добавление стилей Semantic UI в Angular

Все установилось, но, чтобы начать использовать классы и, соответственно стили, нужно подключить файл CSS к проекту Angular. Чтобы это сделать в файле angular.json в свойство styles нужно добавить путь к файлу CSS, а именно:

"styles": [
  "src/styles.css",
  "node_modules/semantic-ui-css/semantic.css"
],

Вместо semantic.css можно подключить минимизированную версию semantic.min.css или подключить стили только для нужных компонентов из папки components, например: "node_modules/semantic-ui-css/components/accordion.min.css".

После изменения файла angular.json нужно перезапустить приложение, чтобы изменения вступили в силу.