dsl-webcomponents v0.1.3

DSL_WEBCOMPONENTS

Instalación

npm install --save dsl-webcomponents

Como crear un botón

1- Se importa el componente boton de lit

import  'dsl-webcomponents/lib/button';

2- Agregamos la etiqueta lit-boton al render para que el componente pueda ser renderizado desde un componente de React.

return(
  <div>
    <lit-button variant='conatined' label='Contained'><lit-button>
  </div>
);

Atributos componente lit-button

variant:

• contained
• outlined
• text

label:

• Atributo de tipo String el cual dara una referencia a la funcionalidad del boton

color:

• primary
• secondary

• info

disabled:

• true
• false

Ejemplos:

<div>
    <lit-button  variant='contained'  label='Contained'></lit-button>
	<lit-button  variant='outlined'  label='Outlined'></lit-button>
	<lit-button  variant='contained'  color='secondary'  label='Secondary'></lit-button>
	<lit-button  variant='contained'  color='info'  label='Secundario'></lit-button>
</div>

Como crear un input

1- Se importa el componente input de lit

import  'dsl-webcomponents/lib/input';

2- Agregamos la etiqueta lit-input al render para que el componente pueda ser renderizado desde un componente de React.

return(
  <div>
    <lit-input label='nombre' placeholder='Escribe tu nombre'><lit-input>
  </div>
);

Atributos componente lit-input

label:

• Atributo de tipo String el cual dará una referencia a la información que debe recibir el input.

  placeholder:

• Atributo de tipo String para dar informacion o ejemplo de como debe ser ingresada informacion al input.

  color:

• primary

• error

  disabled:

• true

• false

Ejemplos:

<div>
    <lit-input  label='Nombre'  placeholder="Escribe tu nombre"></lit-input>
    <lit-input  type='password'  label='Contraseña'></lit-input>
    <lit-input  type='email'  label='Correo'  error></lit-input>
</div>

Como crear un selector

1- Se importa el componente selector de lit

import  'dsl-webcomponents/lib/selector';

2- Agregamos la etiqueta lit-selector al render para que el componente pueda ser renderizado desde un componente de React.

return(
  <div>
    <lit-selector  active='Der'  elements={JSON.stringify(selectorList)}></lit-selector>
  </div>
);

Atributos componente lit-selector

active:

• Elemento de la lista que se desea renderizar como activo

  elements:

• Lista de elementos opciones a seleccionar en el componente

  Ejemplos:

  const list  = ["Izquierda","Centro","Derecha"];
  const activo = list[0]; 
   <div>

    </div>