UNPKG

lamb-web-lib

Version:

LambWebLib. Es un proyecto angular de tipo Librería. que contiene una Suit de componentes reutilizables para el proyecto [Lamb Financial](https://lamb.upeu.edu.pe).

137 lines (103 loc) 3.49 kB
# LambWebLib LambWebLib. Es un proyecto angular de tipo Librería. que contiene una Suit de componentes reutilizables para el proyecto [Lamb Financial](https://lamb.upeu.edu.pe). ## Demo [Demo](https://lamb.upeu.edu.pe) ## 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. ```shell npm install --save @nebular/theme ``` Luego instalamos Bootstrap. ```shell npm i -save bootstrap ``` Ahora instalamos Font-awesome. ```shell npm i --save font-awesome ``` Finalmente instalamos el paquete con el siguiente comando. ```shell npm install lamb-web-lib ``` ## Configuración de los estilos. Modificamos nuestro archivo `angular.json` de nuestro proyecto. Debe quedar asi. ```json "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. ```typescript 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. ```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. ```scss /* 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: ```scss @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](https://akveo.github.io/nebular/docs/guides/enable-theme-system#basic-setup) ## Colaboradores. * * ## Autores * [Vitmar J. Aliaga Cruz](https://github.com/valiaga). * [Guido L. Calsina Tipo](https://github.com/tiposaurio). ## Licencia Este proyecto esta bajo la licencia MIT.