2.3 Listview Markup (SASS Framework)

##Markup de una lista

Las listas deben incorporar el data-type="listview" y los li de su interior pueden contener o no una etiqueta a. Esto no alterará el posicionamiento interno de los elementos. El siguiente es un ejemplo de la estructura de lista:

HTML

<ul data-type="listview">
  <li>
    <a>
    </a>
  </li>
</ul>  

HAML

%ul{"data-type" => "listview"}
  %li
    %a

##Listas con margen

Si deseas agregar un margen a la lista como en el estilo iOS, la lista debe tener la clase inset como se muestra a continuación:

FOTO ACA

HTML

<ul class="inset" data-type="listview">
  <li>-</li>
</ul>  

##Markup dentro de un li

El contenido de los li está posicionado con la técnica CSS del Boxflex lo que le permite una recursividad para cualquier ancho de pantalla. Básicamente todo se construye con tres tipos de contenedores:

###1. div class="content"

Es el contenedor principal y ocupará el ancho de su contenido sumado al espacio que quede libre. Los elementos que estén en su interior se agruparán de manera vertical.

Un buen ejemplo de su uso son las listas que contienen un título y una descripción. Estas deben ser envueltas en este contenedor. La estructura de esto sería la siguiente (Recuerda que la a es opcional):

FOTO ACA

HTML

<ul data-type="listview">
  <li>
    <a>
      <div class="content">
        <h1>Title of Item</h1>
        <p>Description for this item</p>
      </div>
    </a>
  </li>
</ul>   

IMPORTANTE: Si tuvieses que construir un ítem de lista exactamente como el del ejemplo, el contenedor no es necesario, ya que puedes utilizar directamente h1 y p sueltos o dos div en reemplazo de las dos etiquetas recién nombradas.

###2. div class="nested"

Muy similar al contenedor anterior, la diferencia es que este contenedor agrupa sus elementos hijos de manera horizontal.

Es ideal para cuando los ítems de lista agregan informaciones como fecha u hora.

A continuación un ejemplo utilizando content y nested:

FOTO ACA

HTML

<ul data-type="listview">
  <li>
    <a>
      <div class="content">
        <div class="nested">
          <h1>Title of Item</h1>
          <div class="aside">5 Jun 2012</div>
        </div>
        <p>Description for this item</p>
      </div>
    </a>
  </li>
</ul>  

Puedes apreciar que se utilizó una clase aside en el reciente ejemplo. Este es nuestro tercer tipo de contenedor y lo explicamos a continuación.

###3. div class="aside"

Como su nombre lo dice, este contenedor reúne elementos que deban estar agrupados en los extremos laterales de un ítem de lista, como por ejemplo un avatar o una flecha de navegación. También se puede utilizar dentro de un contenedor nested como se aprecia en el ejemplo anterior.

Este sólo tendrá el ancho de los elementos que contenga y le entrega la prioridad de ancho a los elementos hermanos en jerarquía.

A continuación un ejemplo con los tres tipos de contenedores:

FOTO ACA:

HTML

<ul data-type="listview">
  <li>
    <a>
      <div class="aside">
        <div class="picture up"><img srv="img/avatar.jpg" /></div>
      </div>
      <div class="content">
        <div class="nested">
          <h1>Title of Item</h1>
          <div class="aside">5 Jun 2012</div>
        </div>
        <p>Description for this item</p>
      </div>
      <div class="aside">
        <i class="icon-chevron-right"></i>
      </div>
    </a>
  </li>
</ul> 

NOTA 1: Como se puede apreciar en el reciente ejemplo, los contenedores aside funcionan a ambos lados.

NOTA 2: El contenido de un aside se centra verticalmente. En caso de que no se quiera este posicionamiento y se desee que el contenido parta en el top de la caja, como suele ocurrir con los avatares, se debe agregar al aside la clase up como se muestra en el ejemplo.

NOTA 3: En el aside del lado derecho se muestra la integración de Coolstrap con Font Awesome.

Diferentes tipos de listviews

Lo visto recientemente son los principios estructurales para el contenido de los ítems de lista, pero las posibilidades no quedan acá. Siguiendo esto hay muchísimas y variadas formas de construir listviews sin que se pierda la estructura organizada y recursiva.

Para ver más ejemplos de listviews haz click aquí.

List dividers

Existen separadores de sección en las listas y para conseguirlos en Coolstrap sólo debes agregarle al li la clase list-divider como se muestra en el ejemplo:

FOTO ACA:

HTML

<ul data-type="listview">
  <li class="list-divider">
    <a>
    </a>
  </li>
</ul>