Интегрируйте тему Nebular с приложением Angular 8

Nebular - это библиотека пользовательского интерфейса Angular, основанная на спецификациях Eva Design System, с более чем 40 компонентами пользовательского интерфейса, 4 визуальными темами, модулями аутентификации и безопасности.

В этой статье я хочу поделиться с вами тем, как интегрировать тему nebular в ваше приложение angular 8.

Сначала создайте новый проект с помощью angular CLI. Используйте следующую команду для создания нового проекта.

ng new a8Theme

Как только ваш проект будет успешно создан. Затем установите тему с помощью интерфейса командной строки.

Nebular поддерживает конфигурацию инициализации с помощью Angular Schematics. Это означает, что вы можете просто добавить его в свой проект, а Angular Schematics сделает все остальное:

ng add @nebular/theme

После установки темы следующий файл будет обновлен

theme.scss файл, подобный этому

@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/default';
$nb-themes: nb-register-theme((
  // add your variables here like:
   color-primary-100: #f2f6ff,
   color-primary-200: #d9e4ff,
   color-primary-300: #a6c1ff,
   color-primary-400: #598bff,
   color-primary-500: #3366ff,
   color-primary-600: #274bdb,
   color-primary-700: #1a34b8,
   color-primary-800: #102694,
   color-primary-900: #091c7a,
), default, default);

Ваш app.component.html файл обновлен. Новый код вроде

<nb-layout>
  <nb-layout-header fixed>
  <!-- Insert header here -->
  </nb-layout-header>
  <nb-layout-column>
    <!--The content below is only a placeholder and can be replaced.-->
    <div style="text-align:center">
      <h1>
        Welcome to {{ title }}!
      </h1>
      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    </div>
    <h2>Here are some links to help you start: </h2>
    <ul>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
      </li>
    </ul>
    
    <router-outlet></router-outlet>
    
  </nb-layout-column>
  <nb-layout-footer fixed>
  <!-- Insert footer here -->
  </nb-layout-footer>
</nb-layout>

Код вашего app.module.ts файла обновлен следующим образом

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'default' }),
    NbLayoutModule,
    NbEvaIconsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

style.scss файлов обновлено таким образом

@import 'themes';
@import '~@nebular/theme/styles/globals';
@include nb-install() {
  @include nb-theme-global();
};
/* You can add global styles to this file, and also import other style files */

Эти изменения выполняются автоматически.

Создайте и запустите приложение, используя следующую команду интерфейса командной строки.

ng serve

Вы используете все компоненты, которые хотите, в своем приложении.

Для получения дополнительной информации посетите https://ramsatt.com

Интегрируйте тему Nebular с приложением Angular 8

Похожие вопросы