CODE/
IONIC
58
button>
<a class="button icon-right
ion-chevron-right button
calm">Saiba Mais</a>
<a class="button icon-left
ion-chevron-left button
clear button-dark">Voltar<
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">Reordenar</a>
É possível juntar esses
elementos, por exemplo,
FoloFanGo Eot·es espeFííFos
no header do aplicativo. Este
cµdiJo insere o Eot¥o padr¥o de
menu de naveJa©¥o ¢ esTuerda
do header e um Eot¥o de edi©¥o ¢
direita do header:
<div class="bar bar-header">
<button class="button icon
ion-navicon"></button>
<h1 class="title">Header
Buttons</h1>
<button
class="button">Edit</button>
</div>
Existem muitos elementos de
CSS para usar rapidamente com o
,onic. ,nIeli]mente, n¥o « possível
mostrar todos neste tutorial. Eles
s¥o muito simples de entender
e, principalmente, de usar para
gerar uma interface atrativa e
agradável rapidamente. (Há ainda
uma documenta©¥o Eem clara no
site do desenvolvedor). A seguir,
alguns dos mais comuns em uso
de aplicativos móveis.
List
É uma forma simples e
rápida de apresentar uma lista
de elementos na tela. Pode ser
dinâmica (alimentada por base
de dados) ou estática. Basta criar
primeiro a listagem e, em seguida,
deínir os valores por código ou
acesso à base de dados externa.
Este código gera duas
listas na tela, com um divisor no
meio. Ele apresenta os elementos
delas, como se pode ver a seguir.
<div class="list">
<div class="item item
divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
...
<div class="item item
divider">
Hard Candy
</div>
<a class="item" href="#">
Jolly Rancher
</a>
...
</div>
Lista de avatares
Este é um elemento muito
útil e bastante usado em
aplicativos para redes sociais.
É extremamente simples de
implementar com o Ionic.
<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>
Formulários
Elementos para criar e
manipular formulários s¥o
fundamentais para aplicativos de
comunica©¥o. 2 Ionic tem recursos
muito práticos para isso. Este código
cria dois inputs de texto e seu bot¥o
de envio. Note que ele usa uma
ÛlistÜ para facilitar a exibi©¥o na tela:
<div class="list">
<label class="item item
input">
<input type="text"
placeholder="First Name">
</label>
<label class="item item-
input">
<input type="text"
placeholder="Last Name">
</label>
<label class="item item-
input">
<textarea
placeholder="Comments"></
textarea>
</label>
</div>
Elementos CSS
e JavaScript
Além de ser um excelente
framework CSS, o Ionic também
tem um repositório de código e
fun©·es em -avaScript (librar\), que
pode ser rapidamente acessado e
utilizado no desenvolvimento de
aplicativos. Há uma enorme lista de
componentes para serem utilizados.
Como exemplo, pode-se citar o Ionic
PopUp, um componente que cria
por programa©¥o mensagens de
alerta no estilo pop up interativo.
Ou seja: ele age de forma a
receber a resposta do usuário e
dar continuidade às tarefas do
aplicativo em quest¥o.
O processo é bastante
simples e prático. Inicia-se com
uma chamada à fun©¥o e aos
parâmetros a serem utilizados
pelo código.
[
EXISTEMMUITOS ELEMENTOS CSS PARA USAR COM O IONIC.
]
REVISTA LOCAWEB
