npm package: @genniuxapps/components
Description: [![N|Solid](https://genniux.net/app/auth/img/genniux.png)](https://genniux.net/app/catalogo-componentes/inicio)
Author: Jesus Sanchez
Latest version: 0.1.3

# EmpowerLabs

[![N|Solid](https://genniux.net/app/auth/img/genniux.png)](https://genniux.net/app/catalogo-componentes/inicio)

###### El repositorio empowerlabs es un catalogo de componentes web desarrollados con angular 6+.
###### La biblioteca principal esta escrita en JavaScript puro (ademas de web Components) lo que significa que puede utilizarse en cualquier aplicativo que sea orientado a plataformas web con angular 6+.
#
#
### EMPEZANDO
##### Descargue la ultima version lanzada
Antes que nada debes tener instalado npm en tu equipo de desarrollo.
Tenemos un repositorio de distribucion en el cual se almacenan todos los cambios pertenecientes a la libreria.
```bash
npm install @genniuxapps/components@latest
```

###### Esto descarga la biblioteca principal @genniuxapps/components.
#
##### Importar EmpowerComponentsModule
#
Luego importe EmpowerComponentsModule al modulo raiz (normalmente llamado AppModule) de su aplicación angular.
```bash
import {EmpowerComponentsModule} from '@genniuxapps/components';
```
```bash
imports: [
   BrowserModule,
   EmpowerComponentsModule,
],
```
Esto cargará todos los componentes y caracteristicas de @genniuxapps/components en su aplicación.
##### Cargar CUSTOM_ELEMENTS_SCHEMA
#
Agregue schemas propiedad al módulo raíz y póngalo CUSTOM_ELEMENTS_SCHEMA en él. Esto es importante ya que los componentes de la interfaz de usuario de @empowerlabs son componentes web (elementos personalizados).

```bash
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
```
```bash
providers: [],
schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
],
```
Este paso suprime las advertencias causadas por las em-*etiquetas en las plantillas.

##### Cargar archivos CSS

Actualmente utilizamos los iconos desarrollados por [FontAwesome] , [IonIcons] y [MaterialDesign] por lo cual es importante importar el CDN de cada dependencia.
Abrimos nuestro el archivo styles.css principal de nuestro proyecto angular, ubicado en (src>style.css) e incorporamos la siguiente importacion.
```bash
@import '../node_modules/@genniuxapps/components/css/empowerlabs.css';
```

##### ¡Estamos listos!
#
@genniuxapps/components se ah instalado completamente. ¡Diviértete con los componentes!

#### Usando componentes
@genniuxapps/components proporciona varios componentes: ([ver todos los componentes en la lista](https://genniux.net/app/catalogo-componentes/inicio)). Cada componente comienza con la em-*etiqueta.

Por ejemplo, pongamos un botón.
```bash
<em-button [text]="'Click Me'"></em-button>
```
Si desea insertar un icono dentro del botón.
Consulta [FontAwesome] , [IonIcons] , [MaterialDesign] para seleccionar el icono a mostrar.
```bash
<em-button [text]="'Click Me'" [icon]="'fa-book'"></em-button>
```
Si desea establecer una acción activada cuando se hace clic en el botón, puede usar el enlace de evento angular .
```bash
<em-button [text]="'Click Me'" (click)="clickElement()"></em-button>
```
Si desea saber qué eventos puede usar en cada componente, consulte cada página de referencia de ellos.

[FontAwesome]: <https://fontawesome.com/icons>
[IonIcons]: <https://ionicons.com/>
[MaterialDesign]: <http://zavoloklom.github.io/material-design-iconic-font/icons.html>