O Ionic é um kit de ferramentas de interface do usuário de código aberto para criar aplicativos móveis e de desktop de alta qualidade e desempenho usando tecnologias da Web — HTML, CSS e JavaScript — com integrações para estruturas populares como Angular , React e Vue .
Ionic é um framework HTML front-end construído sobre Angular, React, Vue Js, Capacitor e Cordova. De acordo com o documento oficial, a definição deste Ionic Open Source Framework é a seguinte: Ionic é uma estrutura de desenvolvimento de aplicativos móveis HTML5 voltada para a criação de aplicativos móveis híbridos. Pense no Ionic como a estrutura de interface do usuário de front-end que lida com toda a aparência e as interações de interface do usuário que seu aplicativo precisa para ser atraente. Mais ou menos como “Bootstrap for Native”, mas com suporte para uma ampla gama de componentes móveis nativos comuns, animações elegantes e um design bonito.
Recursos da estrutura do Ionic
A seguir estão as características mais importantes do Ionic:
Com base no aplicativo que construímos na aula anterior vamos fazer algumas modificações para mostrar um lista a partir de um array estático.
O termo componentes é um pouco usado em demasia no desenvolvimento front-end, pois muitos frameworks têm sua própria noção descrevendo um componente. Na verdade, Web Components como um padrão HTML oficial pode complicar ainda mais o conceito, então vamos definir claramente o que é um componente no Ionic.
Em um sentido geral, um componente é uma implementação de um conjunto de recursos que são encapsulados por alguma forma de convenção de codificação. Em outras palavras, você pode pensar em um componente como uma maneira de isolar um recurso específico do restante do aplicativo. Você pode pensar em como em HTML existem diferentes tipos de entradas de formulário e cada uma delas é um tipo de componente que possui características específicas.
No Ionic, existem dois tipos de componentes, SCSS e Typescript. Os componentes CSS são implementados como um conjunto de classes SCSS que modificam um elemento para dar a ele uma aparência específica, como uma barra de cabeçalho.
Agora vamos usar o componente tab2 para criar uma lista e mostrar a mesma através da diretiva *ngFor agora vamos modificar o componente e adicionar uma lista no formato Json para a variável itens.
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-tab2’,
templateUrl: ‘tab2.page.html’,
styleUrls: [‘tab2.page.scss’]
})
export class Tab2Page {
items: any;
constructor() {
this.items = [
{
title: ‘Posto Cidade’,
subTitle: ‘Gasolina R$4,80’,
image: ‘[<https://images.emojiterra.com/google/android-11/512px/26fd.png>](<https://images.emojiterra.com/google/android-11/512px/26fd.png>)’
},
{
title: ‘Posto Expresso’,
subTitle: ‘Alcool R$3,80’,
image: ‘[<https://images.emojiterra.com/google/android-11/512px/26fd.png>](<https://images.emojiterra.com/google/android-11/512px/26fd.png>)’
},
{
title: ‘Central dos Combustíveis’,
subTitle: ‘Gasolina Super R$5,30’,
image: ‘[<https://images.emojiterra.com/google/android-11/512px/26fd.png>](<https://images.emojiterra.com/google/android-11/512px/26fd.png>)’
},
{
title: ‘Posto Rio’,
subTitle: ‘Alcool R$3,90’,
image: ‘[<https://images.emojiterra.com/google/android-11/512px/26fd.png>](<https://images.emojiterra.com/google/android-11/512px/26fd.png>)’
},
{
title: ‘Posto BH’,
subTitle: ‘Gas natural R$2,60’,
image: ‘[<https://images.emojiterra.com/google/android-11/512px/26fd.png>](<https://images.emojiterra.com/google/android-11/512px/26fd.png>)’
}]
}
}
Agora vamos modificar nosso HTML do componente para mostrar a lista, vamos usar a diretiva *ngFor para listar o items que são postos de gasolina.