Master Sherpa Ui Kit

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-ms@latest

Esto descarga la biblioteca principal @genniuxapps/components-ms.

Importar MastersherpaUiKitModule

Luego importe MastersherpaUiKitModule al modulo raiz (normalmente llamado AppModule) de su aplicación angular.

import {MastersherpaUiKitModule} from '@genniuxapps/components-ms';

imports: [
   BrowserModule,
   MastersherpaUiKitModule,
],

Esto cargará todos los componentes y caracteristicas de @genniuxapps/components-ms 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 ms-*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. Actualmente utilizamos font-family: Poppins en nuestros componentes. 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-ms/css/mastersherpa.css';

¡Estamos listos!

@genniuxapps/components-ms se ah instalado completamente. ¡Diviértete con los componentes!

Usando componentes

@genniuxapps/components-ms proporciona varios componentes: (ver todos los componentes en la lista). Cada componente comienza con la ms-*etiqueta.

Por ejemplo, pongamos un botón.

<ms-button [text]="'Click Me'"></ms-button>

Si desea insertar un icono dentro del botón. Consulta FontAwesome , IonIcons , MaterialDesign para seleccionar el icono a mostrar.

<ms-button [text]="'Click Me'" [icon]="'fa-book'"></ms-button>

Si desea establecer una acción activada cuando se hace clic en el botón, puede usar el enlace de evento angular .

<ms-button [text]="'Click Me'" (click)="clickElement()"></ms-button>

Si desea saber qué eventos puede usar en cada componente, consulte cada página de referencia de ellos.