npm package: @genniuxapps/components-ms
Description: Master Sherpa Library
Author: Jesus Sanchez
Latest version: 2.6.3

# Master Sherpa Ui Kit

[![N|Solid](https://genniux.net/app/auth/img/genniux.png)](https://gestor.genniux.net/ms/home)

###### 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-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.
```bash
import {MastersherpaUiKitModule} from '@genniuxapps/components-ms';
```
```bash
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).

```bash
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
```
```bash
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.
```bash
@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](https://gestor.genniux.net/ms/home)). Cada componente comienza con la ms-*etiqueta.

Por ejemplo, pongamos un botón.
```bash
<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.
```bash
<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 .
```bash
<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.

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