Ion-button e ion-card

 

    Vamos a mais dois componentes visuais do framework Ionic, o ion-button e o ion-card, são componentes essencialmente HTML, portanto, sua implementação é mais fácil.

ion-button

    O ion-button é como o próprio diz um "botão" uma simples TAG já cria um botão. Vamos então iniciar a implementação propriamente dita. Vamos deixar o projeto limpo como na imagem abaixo para colocar o botão:

    Com o código "limpo" coloque o código como abaixo:

    E a saída dele será esta:

    E pronto tão fácil quanto isto, óbvio que existem personalizações como tamanho, troca de cor etc. e que veremos melhor estas mudanças em diversos componentes para a elaboração de layout de telas em post's posteriores.

ion-card

    O ion-card podemos considerá-lo para um melhor entendimento como se fosse uma postagem em uma rede social, sim, aquele layout clássico que começa com um cabeçalho com o avatar do usuário seguido do seu nome, logo abaixo uma frase de "impacto" e a cereja do bolo a imagem que pode ser uma selfie ou outra imagem qualquer, logo depois da imagem botões de "gostei" ou "like", compartilhe, comentários e etc., enfim, um post padrão. 

    Mas a idealização do ion-card, é mais uma referência à algo mais cultural estadunidense, você já deve ter visto filmes em que algum personagem vai discursar ou falar algo importante para alguém e este personagem leva "cartões" para não se perder no que vai falar. E o ion-card, tem esta "cara" de cartão, você consegue perceber pela sombra que o envolve. 

    Muito bem vamos ao que interessa a implementação! Vamos implementá-lo logo abaixo do ion-button que fizermos anteriormente, ok?! Então é só copiar o código mostrado na imagem abaixo:

 

    E vamos ver como ele vai ficar renderizado no celular:

 

    Vamos agora discutir algumas lacunas: perceba que toda estrutura é sustentada pela TAG ion-card, e temos outras 4 TAG's dentro dela: 

• ion-card-header: que delimita a região dentro do ion-card que será para o cabeçalho do mesmo.
• ion-card-subtitle: que é reservado para subtítulos já com super própria personalização padrão.
• ion-card-title: que é reservado para título do ion-card que também possui seu próprio padrão.
• ion-card-content: que é a região que conterá aquilo que queremos que o usuário realmente veja, dê a atenção, o conteúdo que o componente mostrará para o usuário.

    Concluindo, temos o ion-button, que não há muito segredo em colocá-lo em seu projeto, e usamos muitos botões em nossos projetos de todas as formas e tamanhos, já o ion-card utilizaremos quando queremos separar determinada coisa na tela, por exemplo se estivermos desenvolvendo um aplicativo de vendas poderemos colocar cada produto em um ion-card, dando a sensação ao usuário de separação e organização. 

    Espero que tenham gostado, qualquer dúvida deixe nos comentários, terei prazer em ajudá-los, grande abraço e fiquem com Deus!!!