Botão iônica
Button é parte integrante do aplicativo móvel, estilos de aplicativos diferentes, diferentes botões estilo necessário.
Por padrão, o estilo de exibição botãocomo: display: inline-block.
<button class="button"> Default </button> <button class="button button-light"> button-light </button> <button class="button button-stable"> button-stable </button> <button class="button button-positive"> button-positive </button> <button class="button button-calm"> button-calm </button> <button class="button button-balanced"> button-balanced </button> <button class="button button-energized"> button-energized </button> <button class="button button-assertive"> button-assertive </button> <button class="button button-royal"> button-royal </button> <button class="button button-dark"> button-dark </button>
botão de estilo de botão-block éexibida: display: block, ele vai encher completamente a largura do elemento pai, contido dentro do estofamento propriedades de margem.
<button class="button button-block button-positive"> Block Button </button>
Use tipo botão cheio, você pode fazer o botão para exibir toda a largura, e não inclui preenchimento preenchimento.
<button class="button button-full button-positive"> Full Width Block Button </button>
Diferentes tamanhos de botões
button-grande para grandes botões, botão pequeno para pequenos botões.
<button class="button button-small button-assertive"> Small Button </button> <button class="button button-large button-positive"> Large Button </button>
Nenhum botão de fundo
botão-contorno definido fundo transparente.
<button class="button button-outline button-positive"> Outlined Button </button>
Nenhum botão de fundo e Fronteiras
Botão-clara para definir um fundo transparente e nenhuma fronteira.
<button class="button button-clear button-positive"> Clear Button </button>
botão de ícone
Podemos adicionar um ícone no botão.
<button class="button"> <i class="icon ion-loading-c"></i> Loading... </button> <button class="button icon-left ion-home">Home</button> <button class="button icon-left ion-star button-positive">Favorites</button> <a class="button icon-right ion-chevron-right button-calm">Learn More</a> <a class="button icon-left ion-chevron-left button-clear button-dark">Back</a> <button class="button icon ion-gear-a"></button> <a class="button button-icon icon ion-settings"></a> <a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
Cabeça / inferior do botão Adicionar
Cabeçalho / rodapé pode adicionar botões, estilo de botão de acordo com o chefe / inferior está definido, assim você não precisa adicionar estilo extra para o botão.
<div class="bar bar-header"> <button class="button icon ion-navicon"></button> <h1 class="title">Header Buttons</h1> <button class="button">Edit</button> </div>
classe button-clara não pode definir o botão do fundo ea beira cabeçalho / rodapé.
<div class="bar bar-header"> <button class="button button-icon icon ion-navicon"></button> <div class="h1 title">Header Buttons</div> <button class="button button-clear button-positive">Edit</button> </div>
botão Bar
Podemos usar a barra de botões para definir a barra de botões da classe. O exemplo a seguir, nós adicionamos uma barra de botões no cabeçalho e conteúdo.<div class="button-bar"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div>