Arisman Webs - Diseño Web

Estamos cargando la página
sólo será un monento.

8 Feb 2019

Recursos WebPolymer 3

Form Elements Common - Polymer 3

Conjunto de elementos comunes de formularios Arisman Webs.

Instalación:
npm i aw-form-elements-common

Los componetes que se encuentran en este paqute son:

Añadir un checkbox de Arisman Webs se hace de la siguiente forma:

<script type="module" src="/node_modules/aw_form_elements_common/aw-checkbox.js"></script>

Este componente permite los siguientes atributos:

- `id`: El id del input.
- `name`: El nombre del input.
- `value`: El valor del input.
- `checked`: El checked del input.
- `label`: Pone una etiqueta al checkbox.
- `subtitle`: Pone un subtítulo al checkbox.
- `checkgroup`: Une un grupo de checkboxs para una validación conjunta.
- `disabled`: Un input desactivado.
- `novalidate`: Evita que el campo sea validado por el onchange o por el aw-form.
- `noregister`: Evita que el campo se registres en el aw-form o en un form normal.
- `connectedfunc`: Una función donde se retorna el componente para tratarlo fuera - del componente cuando conecta.
- `changefunc`: Una función donde se retorna el input para tratarlo fuera del componente cuando cambia.
- `clickfunc`: Una función donde se retorna el input para tratarlo fuera del componente cuando se hace click.
- `unresolved`: No muestra el campo hasta que haya cargado el componente.

El aw-checkbox tiene dos elementos que pueden ir en su interior, `label` y `subtitle`, lo que hará que tenga un texto principal y uno explicativo.

<aw-checkbox name="checkbox">
<label>Checkbox</label>
<subtitle>Este es el subtítulo del checkbox</subtitle>
</aw-checkbox>

El atributo checkgroup

Este atributo es el único que requiere una mención específica ya que agrupa los checkbox para poder hacer validaciones con el aw-form si por ejemplo que haya un máximo o un mínimo de checkboxs del grupo checkeados.

Este atributo no sirve de nada si al menos uno de los checkboxs del grupo no va acompañado de los atributos de validación `mincheck` o `maxcheck`.

<aw-form action="/scripts/my-script.php">
<aw-checkbox name="checkbox1" checkgroup="grupo_1" mincheck="1">
<label>Checkbox 1</label>
</aw-checkbox>
<aw-checkbox name="checkbox2" checkgroup="grupo_1">
<label>Checkbox 2</label>
</aw-checkbox>
</aw-form>

Para el ejemplo superior, el formulario dará error si no hay al menos uno de los checkbox activos.

Podemos modificar la apariencia de los checkbox a través de las siguientes variables CSS.

--aw-input-padding-bottom: 12px;            
--aw-checkbox-border-color: #333333;            
--aw-checkbox-checked-border-color: #1C7CDD;    
--aw-checkbox-checked-color: #1C7CDD;   
--aw-checkbox-disabled-color: #BBBBBB;  
--aw-checkbox-icon-color: white;    

--aw-checkbox-label-margin: 0px;    
--aw-checkbox-label-padding: 2px 0 0 6px;
--aw-checkbox-label-color: #333333;
--aw-checkbox-label-font-size: 16px;
--aw-checkbox-label-font-style: normal;
--aw-checkbox-label-font-weight: 300;

--aw-checkbox-subtitle-margin: 3px 0 0 0;   
--aw-checkbox-subtitle-padding: 5px 0 0 6px;
--aw-checkbox-subtitle-border: solid 1px #DDDDDD;
--aw-checkbox-subtitle-size: 12px;
--aw-checkbox-subtitle-color: #888888;  

aw-onoff

Este deslizable es prácticamente un aw-checkbox, es decir, tendrá prácticamente el mismo comportamiento a la hora de ser tratado en un formulario con algunas características menos.

Para añadir un deslizable on-off de Arisman Webs a la página tan solo tenemos que importar el siguiente elemento:

<script type="module" src="/node_modules/aw_form_elements_common/aw-onoff.js"></script>

Este componente permite los siguientes atributos:

- `id`: El id del input.
- `name`: El nombre del input.
- `value`: El valor del input.
- `checked`: El checked del input.
- `disabled`: Un input desactivado.
- `novalidate`: Evita que el campo sea validado por el onchange o por el aw-form.
- `noregister`: Evita que el campo se registres en el aw-form o en un form normal.
- `connectedfunc`: Una función donde se retorna el componente para tratarlo fuera - del componente cuando conecta.
- `changefunc`: Una función donde se retorna el input para tratarlo fuera del componente cuando cambia.
- `clickfunc`: Una función donde se retorna el input para tratarlo fuera del componente cuando se hace click.
- `unresolved`: No muestra el campo hasta que haya cargado el componente.

El uso del aw-onoff es muy simple, tan solo hay que tratarlo como un aw-checkbox sin poder añadir label ni subtitle.

<aw-onoff name="onoff"></aw-onoff>

Podemos modificar la apariencia de los aw-onoff a través de las siguientes variables CSS.

--aw-input-onoff-bg-off: #e0e0e0;   
--aw-input-onoff-bg-on: #98c298;    
--aw-input-onoff-bt-off: #BBBBBB;   
--aw-input-onoff-bt-on: #508050;    

aw-radio

El aw-radio tiene el mismo comportamiento que el input[type=radio] nativo, pero añadiendo las funcionalidades del aw-checkbox. Configurarlo es muy similar a éste último.

<script type="module" src="/node_modules/aw_form_elements_common/aw-radio.js"></script>

Este componente permite los siguientes atributos:

- `id`: El id del input.
- `name`: El nombre del input.
- `value`: El valor del input.
- `checked`: El checked del input.
- `label`: Pone una etiqueta al checkbox.
- `subtitle`: Pone un subtítulo al checkbox.
- `checkgroup`: Une un grupo de checkboxs para una validación conjunta.
- `disabled`: Un input desactivado.
- `novalidate`: Evita que el campo sea validado por el onchange o por el aw-form.
- `noregister`: Evita que el campo se registres en el aw-form o en un form normal.
- `connectedfunc`: Una función donde se retorna el componente para tratarlo fuera - del componente cuando conecta.
- `changefunc`: Una función donde se retorna el input para tratarlo fuera del componente cuando cambia.
- `clickfunc`: Una función donde se retorna el input para tratarlo fuera del componente cuando se hace click.
- `unresolved`: No muestra el campo hasta que haya cargado el componente.

El aw-radio tiene dos elementos que pueden ir en su interior, `label` y `subtitle`, lo que hará que tenga un texto principal y uno explicativo.

<aw-radio name="radio">
<label>Radio 1</label>
<subtitle>Este es el subtítulo del radio 1</subtitle>
</aw-radio>
<aw-radio name="radio">
<label>Radio 2</label>
<subtitle>Este es el subtítulo del radio 2</subtitle>
</aw-radio>

El aw-radio, tiene las mismas variables de configuración que el aw-checkbox.

aw-range

El aw-range es un input de rango de Arisman Webs. Añadirlo es muy sencillo:

<script type="module" src="/node_modules/aw_form_elements_common/aw-range.js"></script>

Las propiedades que puede tener este componente son:

- `id`: El id del input.
- `name`: El nombre del input.
- `value`: El valor del input.
- `min`: El valor mínimo del rango.
- `max`: El valor máximo del rango.
- `step`: El rango de paso.
- `label`: Pone una etiqueta al aw-range.
- `showvalue`: Muestra el valor del aw-range.
- `disabled`: Un input desactivado.
- `noregister`: Evita que el campo se registres en el aw-form o en un form normal.
- `connectedfunc`: Una función donde se retorna el componente para tratarlo fuera del componente cuando conecta.
- `changefunc`: Una función donde se retorna el input para tratarlo fuera del componente cuando cambia.
- `unresolved`: No muestra el campo hasta que haya cargado el componente. Usar si usamos preffix o suffix.

<aw-range name="range" label="Cantidad" min="0" max="100" step="5" showvalue></aw-range>

El ejemplo anterior crea un input con un mínimo de 0, un máximo de 100 que irá contando de 5 en 5. Además mostrará el valor y un label de cantidad.

Dando estilo al aw-range

--aw-input-range-bg-color: transparent;     
--aw-input-range-label-color: #888888;      
--aw-input-range-label-
--aw-input-range-label-font-size: 12px;     
--aw-input-range-label-font-weight: normal; 
--aw-input-range-label-color-focus: #1C7CDD;
--aw-input-range-disabled-color: #BBBBBB;   
--aw-input-range-line-color: #CCCCCC;       
--aw-input-range-bar-color: #1C7CDD;        
--aw-input-range-slider-color: #1C7CDD;     


aw-range-double

El funcionamiento del aw-range-double es prácticamente idéntico al del aw-range.

<script type="module" src="/node_modules/aw_form_elements_common/aw-range-double.js"></script>

Las propiedades que puede tener este componente son las mismas que el aw-range:

- `id`: El id del input.
- `name`: El nombre del input.
- `value`: El valor del input.
- `min`: El valor mínimo del rango.
- `max`: El valor máximo del rango.
- `step`: El rango de paso.
- `label`: Pone una etiqueta al aw-range.
- `showvalue`: Muestra el valor del aw-range.
- `disabled`: Un input desactivado.
- `noregister`: Evita que el campo se registres en el aw-form o en un form normal.
- `connectedfunc`: Una función donde se retorna el componente para tratarlo fuera del componente cuando conecta.
- `changefunc`: Una función donde se retorna el input para tratarlo fuera del componente cuando cambia.
- `unresolved`: No muestra el campo hasta que haya cargado el componente. Usar si usamos preffix o suffix.

<aw-range-double min="0" max="100" label="Rango de precios" value="20-60" showvalue></aw-range-double>


El ejemplo anterior muestra un aw-range-double con un mínimo de 0, un máximo de 100 que irá contando de uno en uno y con un valor predefinido de 20 en el rango mínimo y 50 en el máximo.