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
Markdown
# 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.