Що таке 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 потрібно перезапустити програму, щоб зміни набули чинності.





Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.