EmpowerLabs

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.

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.

import {EmpowerComponentsModule} from '@genniuxapps/components';

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).

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

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.

@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). Cada componente comienza con la em-*etiqueta.

Por ejemplo, pongamos un botón.

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

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

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