Lamb-web-lib NPM

LambWebLib

LambWebLib. Es un proyecto angular de tipo Librería. que contiene una Suit de componentes reutilizables para el proyecto Lamb Financial.

Demo

Requisitos

Angular versión 6.0.0
@nebular/theme Versión 2.0.0-rc.9
Bootstrap Versión 4.1.3
Font-awesome Versión 4.7.0

Instalación

Debemos instalar primero los requisitos con npm.

Primero instalaremos Nebular.

npm install --save @nebular/theme

Luego instalamos Bootstrap.

npm i -save bootstrap

Ahora instalamos Font-awesome.

npm i --save font-awesome

Finalmente instalamos el paquete con el siguiente comando.

npm install lamb-web-lib

Configuración de los estilos.

Modificamos nuestro archivo angular.json de nuestro proyecto. Debe quedar asi.

"styles": [
  "./node_modules/font-awesome/scss/font-awesome.scss",
  "./node_modules/bootstrap/dist/css/bootstrap.css",
  "./node_modules/@nebular/theme/styles/prebuilt/default.css", // or cosmic.css
],

Luego agregar el módulo del componente que deseas utilizar en el AppModule o xModule de tu aplicación.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonIconModule, LambWebLibModule } from 'lamb-web-lib';

// Importamos el tema de Nebular
import { NbThemeModule } from '@nebular/theme';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,

    // Importamos el dema `default` en nuestra aplicacíón.
     NbThemeModule.forRoot({ name: 'default' }), 

    LambWebLibModule,
    ButtonIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

y ya podras utilizarlo en tu componente html.

<lamb-lamb-web-lib></lamb-lamb-web-lib>

<lamb-button-icon></lamb-button-icon>

Pero aún falta configurar los estilos de los componentes deberas tener tu archivo styles.scss carpeta src y tener este código.

/* You can add global styles to this file, and also import other style files */
@import 'themes';

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

// Framework lamb
@import '~lamb-web-lib/lib/styles/globals';

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

Ademas deberas tener otro archivo themes.scss a la misma altura y tenerlo asi:

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

// Aqui podrás personalizar tus estilos. Gracias el framework de Nebular.
$nb-themes: nb-register-theme((
  separator: #ebeef2,
  color-primary: #7f264a,
//   header-bg: #611F3A,
  form-control-border-width: 1px,
), default, default);

Si deseas saber mas de como personalizar tus temas. ingresa a temas de Nebular