Семантический интерфейс с Angular 6
Некоторое время я использовал Semantic UI для создания пользовательских интерфейсов с приложением angular и хотел поделиться некоторыми основами о том, как включить их в приложение angular.
Как включить семантический интерфейс в проект angular с помощью webpack.
1. Установите семантический интерфейс и JQuery.
npm install jquery semantic-ui –save
2. Установите определения типа для семантического пользовательского интерфейса и JQuery.
npm install @ types / jquery @ types / semantic-ui - save-dev
3. Установите загрузчик URL-адресов и загрузчик файлов, чтобы загружать файлы в виде URL-адресов.
npm install file-loader url-loader –save-dev
4. Обновите tsconfig.json, чтобы включить jquery и семантический интерфейс во время компиляции.
5. Обновите конфигурацию веб-пакета, добавив подключаемый модуль, чтобы JQuery загружался автоматически, а не загружал их для каждого модуля.
6. Теперь нам нужно импортировать таблицу стилей, связанную с семантическим пользовательским интерфейсом, в styles.css.
7. Теперь нам нужно импортировать модули, предоставляемые семантическим пользовательским интерфейсом, в main.ts, как показано ниже.
8. Мы готовы использовать функции, предоставляемые Semantic UI, в приложении angular.
9. Допустим, вы хотите отобразить три кнопки с заголовками «Сохранить», «Отмена» и «Сброс».
10. Допустим, вы хотите реализовать раскрывающийся список с возможностью поиска, в котором можно выбрать только два параметра.
а. Добавьте раскрывающийся список в шаблон компонента с соответствующим классом css
б. Прикрепите поведение для раскрывающегося списка к ngAfterViewInit ()
11. Как установить выбранное значение раскрывающегося компонента
Я рассмотрел основы настройки семантического пользовательского интерфейса в приложении angular. Надеюсь это поможет.
