lista iônica

Lista é um elementos de interface amplamente utilizados, quase sempre para usar em todos os app móvel.

A lista pode ser um texto básico, botões, interruptores e outros ícones em miniatura.

item da lista pode ser qualquer elemento HTML. elementos de contentores necessários lista de classe, cada item da lista é necessária categoria de item.

ionList ionItem e pode facilmente suportar uma variedade de maneiras interativas, tais como a edição de slides, arraste o tipo e excluir itens.

uso básico:

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

tente »

separador de lista

Podemos usar classe de item-divisor para criar um separador de lista, por padrão, a lista de itens de uma cor de fundo diferente e negrito para distinguir, mas você pode facilmente personalizar sua.

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

tente »

Com lista de ícones

Podemos especificar um ícone para o lado esquerdo ou direito dos itens da lista.

Use Ícone Item-icon-esquerda na esquerda, ícone de configurações-item-ícone da direita no lado direito. Se você precisar de ambos os lados do ícone, as duas classes são adicionados a.

Os exemplos a seguir, usamos <a> etiqueta no item da lista, de modo que cada clickable item da lista.

item da lista quando você usa <a> ou <> elemento, se não é adicionado à direita do ícone, ele será automaticamente adicionado ao flechas.

Exemplo, o primeiro item apenas ícones à esquerda, sobre o segundo ícone tem, há o terceiro ícone à direita (assim como Notas item a nota), o quarto tem um elementos emblema (Mark).

<div class="list">

  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>

</div>

tente »

lista de botões

Use o botão item de botão esquerdo item de botão direito do mouse ou sobre os itens da lista de classe.

<div class="list">

  <div class="item item-button-right">
    Call Ma
    <button class="button button-positive">
      <i class="icon ion-ios-telephone"></i>
    </button>
  </div>

  ...

</div>

tente »

Com Lista de Avatar

Use ponto-avatar criar avatar com uma lista:

<div class="list">

    <a class="item item-avatar" href="#">
      <img src="venkman.jpg">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </a>

    ...

</div>

tente »

Lista thumbnail

Miniatura de item-thumbnail-esquerdo classe para adicionar a classe alinhado à esquerda,-item-miniatura direito é usado para adicionar uma miniatura no alinhamento à direita.

<div class="list">

    <a class="item item-thumbnail-left" href="#">
      <img src="cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>

    ...

</div>

tente »

Lista incorporado (lista de inserção)

Podemos ser incorporado no recipiente entre uma lista, a lista não apresenta a largura total.

lista de estilo interno é: lista de lista inserir, com uma lista geral de diferença é que ele define a margem (marign), similar à guia.

listas incorporadas há sombras, o efeito será ainda melhor quando a rolagem.

<div class="list list-inset">

    <div class="item">
      Raiders of the Lost Ark
    </div>

    ...

</div>

tente »