Forms

Distintos componentes para crear formularios.

Input

<input type="text" placeholder="Simple input">

Input sizes

<input type="text" placeholder="Standard size">
<input type="text" class="input-small" placeholder="Small size">
<input type="text" class="input-tiny" placeholder="Tiny size">

Input Wrapper

Esta directiva permite agregar componentes complejos a un input

Inputs with icons

<div we-input-wrapper component-position="left">
  <we-icon icon="search" class="input-mark"></we-icon>
  <input type="text" placeholder="With left icon">
</div>

Inputs with buttons

Los botones y los inputs tienen tamaños, ambos descritos por las mismas sizing classes (tiny, small, default). Si colocas un botón con la misma sizing class, se comporta como un tag:

<div we-input-wrapper component-position="left">
  <a we-button icon="bell" type="danger">Example</a>
  <input type="text" placeholder="With left icon">
</div>

<div we-input-wrapper size="small" component-position="right">
  <a we-button icon="bell" size="small" type="danger">Example</a>
  <input type="text" placeholder="With right icon">
</div>

<div we-input-wrapper size="tiny" component-position="left">
  <a we-button icon="bell" tiny="small" type="danger">Example</a>
  <input type="text" placeholder="With right icon">
</div>

Si colocas un botón con un sizing class menor que su input contenedor, el botón flotará dentro del contenedor:

<div we-input-wrapper component-position="left">
  <a we-button icon="bell" size="small" type="danger">Example</a>
  <input type="text" placeholder="With left icon">
</div>

<div we-input-wrapper size="small" component-position="right">
  <a we-button icon="bell" size="tiny" type="danger">Example</a>
  <input type="text" placeholder="With left icon">
</div>

Labels

Se elige la notación de labels como wrappers:

<label>
  {{ text }}
  <input type="text" placeholder="Nice">
</label>

Checkbox y radio buttons

<label>
  {{ text }}
  <input type="checkbox" placeholder="Nice">
</label>

<label>
  {{ text }}
  <input type="radio" placeholder="Nice">
</label>

<label>
  <input type="checkbox" placeholder="Nice">
  {{ text }}
</label>

<label>
  <input type="radio" placeholder="Nice">
  {{ text }}
</label>