Nebular 4.0 migration questions and support #1524

nnixaa · 2019-05-29T12:36:46Z

This issue is created to collect and discuss the most common question during migration to Nebular 4.0.

Ungolim · 2019-05-29T19:20:09Z

with Angular 8 stable released, would you suggest waiting for the release of Nebular 4 stable as well, if starting a new project (within a week)?
Nebular 4 seems to bring visual changes to components (as well as an upgrade, or overhaul, of the theming system); if so, when can we expect an updated live documentation to reflect all these changes?

nnixaa · 2019-05-29T19:28:59Z

@RicardoVaranda what version of Nebular are you on? Seems as 3.5.0, which is not related to this issue. If so, please open a new issue, I would appreciate a more detailed description of your env (angular, nebular versions at least).

nnixaa · 2019-05-29T19:31:24Z

@lepidotteri

yes, I would totally suggest starting with Nebular 4 and Angular 8.
We will be releasing rc.7 version later today and updating the next version of the docs, so the new docs and changes will be available there
We expect Nebular 4 stable next Monday.

RicardoVaranda · 2019-05-29T20:22:45Z

@nnixaa You're right I was trying to use 3.5 with Angular 8. After switching to rc version it's now fixed :)

RicardoVaranda · 2019-05-29T21:08:36Z

Hi @nnixaa , Sorry not sure this is the best place to ask but I'm currently trying to use the corporate color scheme on the new 4.0 but it does not seem to apply.

On ngx-admin corporate theme has a nav bar of color: #111218 where as when I try to apply the corporate theme it has a background of #fff.

I've follow the docs on the theming but I'm aware that they have changed in 4.0 so just want to confirm that I'm still doing them the correct way.

Theme.scss:

// import Nebular Theme System and the default theme
@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/corporate';

// and change the variables you need, 
// or simply leave the map empty to use the default values
// let's make it blue-ish instead of the default white color
$nb-enabled-themes: (corporate);

$nb-themes: nb-register-theme((
      // app wise variables for each theme
  sidebar-header-gap: 2rem,
  sidebar-header-height: initial,
  layout-content-width: 1400px,
  font-main: Roboto,
  font-secondary: Exo,
  switcher-background: #2b2d34,
  switcher-background-percentage: 14%,
  drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
  list-item-border-width: 1px,
  slide-out-container-width: 30%,
  slide-out-background: 	linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
  slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
  slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
  chart-panel-summary-box-shadow: none,
  chart-panel-summary-background-color: #f7fafb,
  chart-panel-summary-border-color: #ebeff1,
  chart-panel-summary-border-width: 1px,
  ecommerce-card-border-width: 1px,
  progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),

  ), corporate, corporate); // let's leave it as default

Style scss:

// this is your created themes.scss file, make sure the path to the file is correct
@import 'theme';

// framework component styles which will use your new theme
@import '~@nebular/theme/styles/globals';


// install the framework
@include nb-install() {
  @include nb-theme-global();
};

App module:

@NgModule({
  declarations: [... ],
  imports: [
...
    NbThemeModule.forRoot({ name: 'corporate' }),
    NbLayoutModule,
...
  ],

app-component:

<nb-layout>
  <nb-layout-header>
    <div class="header-container">
      <div class="logo-containter">
        <a href="#" class="navigation"><i class="nb-menu"></i></a>
        <div class="logo">ngx-<span>admin</span></div>
      </div>
    </div>
  </nb-layout-header>
  <nb-layout-footer></nb-layout-footer>
  <nb-layout-column></nb-layout-column>
</nb-layout>

nnixaa · 2019-05-29T21:26:45Z

@RicardoVaranda try following https://akveo.github.io/nebular/next, these are the docs for the new 4.0 version.

Btw, we have just release rc.7.

RicardoVaranda · 2019-05-29T21:48:56Z

Thanks @nnixaa The differences I'm seeing in color seem to be due to the theme variables are now defined as different shades. Out of curiosity, do you guys have a timeline as to when ngx-admin will be updated to the latest version?

P.S Great work on this amazing theme <3

nnixaa · 2019-05-30T09:38:54Z

Out of curiosity, do you guys have a timeline as to when ngx-admin will be updated to the latest version?

We hope to update it upcoming 2 weeks.

ugodelafosse · 2019-06-04T16:20:31Z

Hi, I would like to ask if it is still possible to use FontAwesome icons in components such as tabs and menus ? I updated to version 4.0.0 but now components are not recognizing "fas fa-icon" in their parameters and it throws an error. I tried to put fontAwesome as default pack instead of nebular-icons but it's not working as well...

Thanks.

nnixaa · 2019-06-05T11:42:21Z

Hi, I would like to ask if it is still possible to use FontAwesome icons in components such as tabs and menus ? I updated to version 4.0.0 but now components are not recognizing "fas fa-icon" in their parameters and it throws an error. I tried to put fontAwesome as default pack instead of nebular-icons but it's not working as well...

Thanks.

Answered here #1579

ugodelafosse · 2019-06-05T12:53:06Z

Thanks !

alfredott · 2019-06-06T12:27:42Z

Hello,

I'm migrating my app from Nebular 3.1 to Nebular 4. Thanks for your migration doc, I'm almost done with the migration. (FYI, we're using a custom theme.)

However, I've got a problem with the old layout-bg CSS variable in version 3.x, which became layout-background-color in version 4.

As I understand, in 3.x it was a background: ... property, and it became a background-color: .... We use a linear-gradient CSS property, which is not compatible with the latter way.

I didn't see anything about it in the migration docs, what is your opinion about that ?

Thanks in advance,
Bye !

Edit : I think some properties of the "header" component also changed. (header-bg --> header-background-color). Do you have a more complete list of all changes ?

Ungolim · 2019-06-06T13:09:47Z

Hello,

I'm migrating my app from Nebular 3.1 to Nebular 4. Thanks for your migration doc, I'm almost done with the migration. (FYI, we're using a custom theme.)

However, I've got a problem with the old layout-bg CSS variable in version 3.x, which became layout-background-color in version 4.

As I understand, in 3.x it was a background: ... property, and it became a background-color: .... We use a linear-gradient CSS property, which is not compatible with the latter way.

I didn't see anything about it in the migration docs, what is your opinion about that ?

Thanks in advance,
Bye !

Edit : I think some properties of the "header" component also changed. (header-bg --> header-background-color). Do you have a more complete list of all changes ?

Same issue, if this was changed intentionally then it would be completely unacceptable

nnixaa · 2019-06-06T13:37:17Z

Same issue, if this was changed intentionally then it would be completely unacceptable

Unfortunately, this is a limitation for now, but it has a very quick fix:
In your styles.scss:

@include nb-install() {

  nb-layout .layout {
    background-image: ...;
  }

  @include nb-theme-global();
};

alfredott · 2019-06-06T14:06:20Z

Thanks for the quick fix, and thanks for taking the feature request into account.

Bye !

alfredott · 2019-06-11T10:23:48Z

Hi, I would like to ask if it is still possible to use FontAwesome icons in components such as tabs and menus ? I updated to version 4.0.0 but now components are not recognizing "fas fa-icon" in their parameters and it throws an error. I tried to put fontAwesome as default pack instead of nebular-icons but it's not working as well...

Thanks.

Hello,
I'm facing a similar problem.
I managed to use font-awesome icons in my menu, with the packClass: 'fas' parameter of NbIconLibraries.registerFontPack, but then, how can I use NbIconLibraries to use different icon packs in my menu ? (e.g. font-awesome and nebular)

For now, if I try and use a nebular icon with defaultPack being font-awesome, the nebular one gets the fas class and isn't rendered.
On the opposite, if I set nebular as my defaultPack, the font-awesome icon doesn't have the fas class and isn't rendered either.

Thanks in advance,
Bye !

KennBro · 2019-11-01T15:43:11Z

Same issue, if this was changed intentionally then it would be completely unacceptable

Unfortunately, this is a limitation for now, but it has a very quick fix:
In your styles.scss:
@include nb-install() {

  nb-layout .layout {
    background-image: ...;
  }

  @include nb-theme-global();
};

|

Same issue, if this was changed intentionally then it would be completely unacceptable

Unfortunately, this is a limitation for now, but it has a very quick fix:
In your styles.scss:
@include nb-install() {

  nb-layout .layout {
    background-image: ...;
  }

  @include nb-theme-global();
};

When I use this quick fix, I get the following error

@include nb-theme-global();
^
Undefined mixin.
╷
9 │ @include nb-theme-global();
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/app/@theme/styles/themes.scss 9:3 @content
node_modules/@nebular/theme/styles/core/theming/_install.scss 149:7 @content
node_modules/@nebular/theme/styles/core/theming/_install.scss 135:7 nb-install-global-with-scss-vars()
node_modules/@nebular/theme/styles/core/theming/_install.scss 148:5 nb-install()
src/app/@theme/styles/themes.scss 7:1 @import
stdin 4:9 root stylesheet

nnixaa added the faq label May 29, 2019

nnixaa mentioned this issue May 29, 2019

Nebular 4.0 will get an update to Theme System, we need your help. #1331

Closed

3 tasks

nnixaa mentioned this issue Jun 6, 2019

Eva: ability to have gradients on backgrounds eva-design/eva#7

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nebular 4.0 migration questions and support #1524

Nebular 4.0 migration questions and support #1524

nnixaa commented May 29, 2019

Ungolim commented May 29, 2019

nnixaa commented May 29, 2019

nnixaa commented May 29, 2019

RicardoVaranda commented May 29, 2019

RicardoVaranda commented May 29, 2019

nnixaa commented May 29, 2019 •

edited

Loading

RicardoVaranda commented May 29, 2019

nnixaa commented May 30, 2019 •

edited

Loading

ugodelafosse commented Jun 4, 2019

nnixaa commented Jun 5, 2019

ugodelafosse commented Jun 5, 2019

alfredott commented Jun 6, 2019 •

edited

Loading

Ungolim commented Jun 6, 2019

nnixaa commented Jun 6, 2019

alfredott commented Jun 6, 2019

alfredott commented Jun 11, 2019

KennBro commented Nov 1, 2019

Nebular 4.0 migration questions and support #1524

Nebular 4.0 migration questions and support #1524

Comments

nnixaa commented May 29, 2019

Ungolim commented May 29, 2019

nnixaa commented May 29, 2019

nnixaa commented May 29, 2019

RicardoVaranda commented May 29, 2019

RicardoVaranda commented May 29, 2019

nnixaa commented May 29, 2019 • edited Loading

RicardoVaranda commented May 29, 2019

nnixaa commented May 30, 2019 • edited Loading

ugodelafosse commented Jun 4, 2019

nnixaa commented Jun 5, 2019

ugodelafosse commented Jun 5, 2019

alfredott commented Jun 6, 2019 • edited Loading

Ungolim commented Jun 6, 2019

nnixaa commented Jun 6, 2019

alfredott commented Jun 6, 2019

alfredott commented Jun 11, 2019

KennBro commented Nov 1, 2019

nnixaa commented May 29, 2019 •

edited

Loading

nnixaa commented May 30, 2019 •

edited

Loading

alfredott commented Jun 6, 2019 •

edited

Loading