Documentación

Componentes

Listado de componentes del toolkit.

Componentes

El DDO de cada directiva, por defecto, deberá estar restringido a atributo restrict: 'A'. Si no se indica lo contrario, también incluya replace: true.

Íconos directive

<we-icon icon="cog"></i>

Sidebar

Se registra para abrirse, cerrarse o togglearse usando guardianes.

<div we-sidebar id="sidebar">
  ...
</div>

Header directive

<a we-sidebar-header logo="/static/images/logo.png" isotype="/static/images/isotype.png"></a>

Sidebar list

<ul class="sidebar-list">
  <li><a we-sidebar-link icon="cog">{{ text }}</a></li>
  <li><a we-sidebar-link icon="cog">{{ text }}</a></li>
  ..
</div>

Sidebar link

<a we-sidebar-link icon="cog">{{ text }}</a></li>

Opciones y atributos

• icon: incluye un ícono en el link, este atributo es obligatorio.
• position default|bottom: si es bottom, agrega la clase sidebar-bottom-action

Guardianes

Estas directivas están diseñadas para manipular eventos en distintos tipos de elementos. Para ello, de alguna manera las directivas abribles y cerrables deben registrarse, para que estas directivas puedan trabajar con ellas. La idea es programarlas de manera genérica, de tal manera que puedan existir distintos tipos de directivas con las que puedan interactuar (ejemplo: popups, alertas, sidebar, etcétera).

Open

<a we-open=”#identificador”>Abrir elemento</a>

Close

<a we-close=”#identificador”>Cierra elemento</a>
<a we-close>Cierra todos</a>

Toggle

<a we-toggle=”#identificador”>Cierra / abre elemento</a>

Close all

<a we-close-all=”#identificador”>Cierra todos los elementos abiertos</a>

Popup

Popup genérico. Actualmente definiremos su comportamiento para inline html, pero luego lo extenderemos para que funcione con ajax. Esta directiva debe registrar sus eventos onOopen y onClose, o exponerlos públicamente para ser consumido por las directivas guardianes.

<div we-popup id=”#identificador”>
  <div we-popup-title type="simple">{{ text }}</div>
  <div we-popup-content paddings="true">Algún contenido</div>
  <div we-popup-actions position="center">
    <a we-button>{{ text }}</a>
    <a we-button>{{ text }}</a>
  </div>
</div>

Popup title

<div we-popup-title type="simple">{{ text }}</div>

Atributos

• type simple|dual: este atributo cambia el despliegue de una a dos líneas.

Popup content

<div we-popup-content paddings="true">{{ text }}</div>

Atributos

• paddings true|false: este atributo cambia agrega o elimina el padding del contenido del popup.

Popup actions

<div we-popup-actions position="right">
  <a we-button>{{ text }}</a>
  <a we-button>{{ text }}</a>
</div>

Atributos

• position left|center|right: este atributo modifica la alineación de los botones que contiene.

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>

Tabs

Incluye una directiva wrapper (tabset) que contendrá una o más tabs. El comportamiento por defecto incluye título e ícono en el tab.

<div we-tabset>
  <div we-tab icon="cog" heading="Título tab 1">
    Contenido 1
  </div>

  <div we-tab icon="bell" heading="Título tab 2">
    Contenido 2
  </div>
</div>

Tab con ícono en posición vertical

<div we-tabset icon-position="above">
  <div we-tab icon="cog" heading="Título tab 1">
    Contenido 1
  </div>

  <div we-tab icon="bell" heading="Título tab 2">
    Contenido 2
  </div>
</div>

Tab sin título

<div we-tabset>
  <div we-tab icon="cog">
    Contenido 1
  </div>

  <div we-tab icon="bell">
    Contenido 2
  </div>
</div>

The Greed

Sistema de rejillas para maquetar. Para la documentación completa visita FlexBox Grid. La sintaxis varía levemente, para definir columnas se utiliza:

<div class="col xs-12 m-6 l-4"></div>

Es decir, el prefijo col- se eliminó de las clases responsivas.