Як використовувати Semantic UI в Angular додатку
Що таке Semantic UI
Semantic UI це фреймворк, який дозволяє швидко створювати красивий інтерфейс для сайту або програми, використовуючи просту HTML структуру та зрозумілі CSS селектори.
Semantic UI в Angular
Дуже часто в додатках на 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
потрібно перезапустити програму, щоб зміни набули чинності.