Небулярная корпоративная тема не работает из коробки

Я создал проект, используя ng new, а затем следовал инструкциям, чтобы добавить nebular в существующее приложение. Я дефолт к космическому. Это приводит к следующим файлам. Поэтому, когда я устанавливаю тему на космический или по умолчанию в NbThemeModule.forRoot(), он работает, а "корпоративный" - нет. Получившийся экран все разбит вверху.

Может кто-нибудь сказать мне, что мне нужно сделать, чтобы заставить "корпоративный" работать? Если вы знаете какие-либо хорошие учебники по темам для nebular, это было бы здорово. Я совершенно невежественен.

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 { HomeScreenComponent } from './home-screen/home-screen.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule, NbSidebarModule } from '@nebular/theme';

@NgModule({
  declarations: [
    AppComponent,
    HomeScreenComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'cosmic' }),
    NbLayoutModule,
    NbSidebarModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

theme.scss:

    @import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/cosmic';

$nb-themes: nb-register-theme((
  // add your variables here like:
  // color-bg: #4ca6ff,
), cosmic, cosmic);

angular.json:

            "styles": [
          "src/styles.scss"
        ],
Источник

2 ответа

Оберните компоненты внутрь nb-layout и nb-layout-column

например

<nb-layout>
  <nb-layout-column>
  <input type="text" nbInput fullWidth status="basic" placeholder="Default">
</nb-layout-column>
</nb-layout>
Источник

Я наконец получил "корпоративный" для работы, как указано ниже. У меня есть так много, чтобы узнать об этом материале. Я надеюсь, что это может быть новичкам, как я. Я изменил themes.scss следующим образом:

   $nb-themes: nb-register-theme((
  // add your variables here like:
  // color-bg: #4ca6ff,
), cosmic, cosmic);

$nb-themes: nb-register-theme((
  // add your variables here like:
  // color-bg: #4ca6ff,
), default , default);

$nb-themes: nb-register-theme((
  // add your variables here like:
  // color-bg: #4ca6ff,
), corporate , corporate);

и я добавил это в файл angular.json:

            "styles": [
          "src/styles.scss",
          "node_modules/@nebular/theme/styles/prebuilt/corporate.css",
          "node_modules/@nebular/theme/styles/prebuilt/cosmic.css",
          "node_modules/@nebular/theme/styles/prebuilt/default.css"
        ],
Источник

Вы можете просто изменить тему, изменив строку 85 файла ngx-admin/src/app/@theme/theme.module.ts

..NbThemeModule.forRoot(
      {
        name: 'corporate', // change here it can be default, corporate, cosmic or dark
      },
      [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
    ).provider

Для получения дополнительной информации посетите здесь https://akveo.github.io/nebular/docs/design-system/changing-theme. Он работает с более поздней версией.

Источник

Исходя из вашего исходного вопроса, единственное, что нужно сделать, это переименовать cosmic упоминание corporate во всех частях кода, которые вы разместили. Вот рабочий пример: https://stackblitz.com/edit/github-updvbd?file=src/themes.scss

Источник
Другие вопросы по тегам