Modificações Simples em projeto Ionic.

    Faaaaala galerinha! Hoje vamos fazer modificações simples com HTML e CSS, caso você não conheça o básico de HTML ou CSS, sugiro que dê uma olhada neles e depois volte aqui pois é necessário saber o básico destas duas tecnologias para que se possa absorver o conhecimento passado neste artigo, combinado? Ok, vamos lá!

    Já faça o que se tornou o clássico, abra o prompt entre na pasta do seu projeto (vou usar o anterior "teste001") e dê um ionic serve para subi-lo, logo depois já abra o Visual Studio Code na pasta do seu projeto e vamos codificar.

    Com o arquivo home.page.html, que discutimos no artigo passado, vamos fazer algumas TAG`s básicas HTML para que você possa perceber que várias TAG`s HTML funcionam plenamente aqui no ionic.  

    Antes da TAG DIV vamos colocar uma H1 com o texto "Teste de Título". Seguindo as imagens abaixo.

código antes da alteração

código com a alteração

tela após a alteração

    Virão como é fácil, coloque você mesmo mais TAG`s HTML para ver como elas reagem neste ambiente de app mobile. 

    Desta vez vamos um pouco mais longe, vamos agora colocar uma TAG P com uma frase: "Blog mais sensacional do universo!!!" e vamos colocar uma class CSS nele para promovermos algumas personalizações com CSS. Siga as telas abaixo:

 

aplicação da tag P no código

 


A tag P renderizada no app.


 Abrindo o arquivo home.page.scss e aplicando a class teste ao final do arquivo trocando a cor

A renderização com a cor trocada


 Agora colocando negrito com font-weight

E ela finalizada com a troca da cor e o negrito

      Lembrando que cada modificação só é efetuada depois que você salva o arquivo!!!

    Com isso percebemos que podemos utilizar as TAG`s HTML como desenvolvemos páginas de internet e utilizar as técnicas de CSS também da mesma forma, faça mais TAG`s e mais personalizações com CSS por sua conta e veja como vai ficando, qualquer coisa deixe no comentário sua dúvida que terei o prazer de responder suas dúvidas assim que possível!!! Grande abraço e fique com Deus!!!

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Ion-button e ion-card

Imagem
      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
Leia mais

Ion-badge e ion-breadcrumbs

Imagem
      Olá galerinha, como estes dois componentes são de fácil entendimento e de fácil implementação resolvemos, os dois componentes são ion-badge e ion-breadcrumbs. Lembrando que para os exemplos utilizamos o modelo blank, pelo simples fato de ser o modelo em branco, sem nada, se você não entendeu sugiro a leitura deste artigo .   ion-badge     O ion-badge geralmente aparecem próximos a outro elemento. Normalmente, eles contêm um número ou outros caracteres que podem ser usados como uma notificação de que há itens adicionais ou indicam quantos itens existem daquela determinada coisa.     Já dê aquele "ionic serve" maroto e com o projeto aberto, limpe o ion-content como na imagem abaixo:       Para a implementação dele é só colocar no HTML seguindo apenas o exemplo abaixo.      E agora como ele fica no app:     Agora você consegue perceber que é necessário que ele esteja com algum outro elemento que "diga" o que é aquele dado mostrado, pois um "quadradinho&
Leia mais

O AWT: Ninguém tá usando o AWT?

Imagem
     Os programadores java e os usuários java utilizam a AWT e nem percebem! Tudo bem, você vai me dizer que os programadores atuais java nem mesmos programam com AWT mas pelo menos utilizam SWING que originou de AWT, portanto, usam sim! Vamos desenterrar o AWT para conhecer a origem da parte visual do java... O que é o AWT?      O AWT (Abstract Windowing Tool) foi a primeira, por assim dizer, biblioteca visual feito para java. Pensando neste quesito visual na época de sua origem, a Sun Microsystens, pensou em fazer algo que funcionasse em qualquer sistema operacional. O Java em si já o fazia e como a parte visual estava sendo pensada fazia-se necessário tal onipresença visual, assim eles quiseram colocar os componentes mais básicos que são: Button Label TextField TextArea Checkbox Choice List     Pois estes componentes povoam basicamente todos os sistemas operacionais visuais, assim é por isso que o AWT é tomado como código nativo em se tratando de programação visu
Leia mais