simulador-sulamerica-component v1.7.4

+

Using Component

To start this component using Stencil, clone this repo to a new directory:

git clone https://github.com/amandacoradini/web-component-simulator-form.git
cd simulador-sulamerica-component
git remote rm origin

and run:

npm install
npm start

yarn install
yarn run start

To build the component for production, run:

npm run build
yarn run build

To run the unit tests for the components, run:

npm test

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Integration

#Install the component via npm or yarn in your project:

npm install simulador-sulamerica-component
yarn add simulador-sulamerica-component

#Angular

• Include the CUSTOM_ELEMENTS_SCHEMA in the module. This code should be added into the AppModule and in every other modules that use your custom elements.

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

• The function that is used to load the components of the collection, defineCustomElements(), needs to be called once during your application initialization. In main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from 'simulador-sulamerica-component/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
defineCustomElements();

• For more details: https://stenciljs.com/docs/overview

Usage

• In your component's HTML file:

<div class="content" role="main">
  <sa-simulator color="orange" fontsize="medium" fontcolor="black" background="blue"></sa-simulator>
</div>

Style

• customizable variables
  • backgroud: string
  • color: string
  • fontcolor: string
  • padding: string
  • imgsize(image height): string
  • fontfamily: string
  • fontsize: "small" "medium" "large"