Master Sherpa Library
npm install @empowerlabs/components-ms
###### 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+.
#
#
bash
npm install @empowerlabs/components-ms@latest
`###### Esto descarga la biblioteca principal @empowerlabs/components-ms.
#
##### Importar MastersherpaUiKitModule
#
Luego importe MastersherpaUiKitModule al modulo raiz (normalmente llamado AppModule) de su aplicación angular.
`bash
import {MastersherpaUiKitModule} from '@empowerlabs/components-ms';
`
`bash
imports: [
BrowserModule,
MastersherpaUiKitModule,
],
`
Esto cargará todos los componentes y caracteristicas de @empowerlabs/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/@empowerlabs/components-ms/css/mastersherpa.css';
`##### ¡Estamos listos!
#
@empowerlabs/components-ms se ah instalado completamente. ¡Diviértete con los componentes!
#### Usando componentes
@empowerlabs/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.
`bash
`
Si desea insertar un icono dentro del botón.
Consulta [FontAwesome] , [IonIcons] , [MaterialDesign] para seleccionar el icono a mostrar.
`bash
`
Si desea establecer una acción activada cuando se hace clic en el botón, puede usar el enlace de evento angular .
`bash
``[FontAwesome]:
[IonIcons]:
[MaterialDesign]: