Installation · Koobiq

В этом руководстве описана настройка Angular-проекта для использования @koobiq/components.

Установка зависимостей

Установка с помощью Angular CLI:


ng add @koobiq/components

Ручная установка:


npm install @koobiq/cdk @koobiq/components @koobiq/icons @koobiq/design-tokens @koobiq/angular-luxon-adapter @koobiq/date-adapter @koobiq/date-formatter luxon @messageformat/core

Настройка стилей

После установки необходимо подключить стили библиотеки. Добавьте следующие файлы в массив styles вашего файла angular.json:


"styles": [
  "node_modules/@koobiq/icons/fonts/kbq-icons.css",
  "node_modules/@koobiq/design-tokens/web/css-tokens.css",
  "node_modules/@koobiq/design-tokens/web/css-tokens-light.css",
  "node_modules/@koobiq/components/prebuilt-themes/theme.css",
  "src/styles.css"
]

Настройка темы

Добавьте класс темы к элементу <body> в файле index.html:


<body class="kbq-light">
    <app-root></app-root>
</body>

Подробнее о настройке и переключении темы читайте в разделе темизация.

Настройка типографики

Для корректного отображения компонентов рекомендуется подключить шрифт Inter.

Подробнее читайте в разделе типографика.

Использование компонента

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


import { KbqButtonModule } from '@koobiq/components/button';
import { KbqIconModule } from '@koobiq/components/icon';
 
@Component({
    imports: [KbqButtonModule, KbqIconModule],
    template: `
        <button kbq-button>
            <i kbq-icon="kbq-plus_16"></i>
            Кнопка
        </button>
    `
})
export class AppComponent {}

Если у вас есть вопросы или вы хотите внести свой вклад в написание документации, пожалуйста, создайте issue в нашем репозитории на GitHub.

Установка зависимостей

Настройка стилей

Настройка темы

Настройка типографики

Использование компонента