El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Introducció a l'Estilització Ionic

Següent ►
►

En aquest tema, aprendrem els conceptes bàsics de l'estilització en Ionic. Ens centrarem en com utilitzar les eines i tècniques proporcionades per Ionic per personalitzar l'aparença de les nostres aplicacions. Aquest mòdul és essencial per crear aplicacions atractives i coherents amb la identitat visual desitjada.

Objectius del Tema

  • Entendre els conceptes bàsics de l'estilització en Ionic.
  • Aprendre a utilitzar les eines d'estilització proporcionades per Ionic.
  • Conèixer les diferències entre CSS i SCSS en el context d'Ionic.
  • Aplicar estils bàsics a una aplicació Ionic.

Conceptes Clau

  1. CSS i SCSS en Ionic

Ionic permet utilitzar tant CSS com SCSS per estilitzar les aplicacions. SCSS és una extensió de CSS que afegeix funcionalitats com variables, mixins i nesting, que faciliten l'escriptura i manteniment del codi d'estil.

  1. Variables Globals

Ionic proporciona un conjunt de variables globals que es poden utilitzar per personalitzar fàcilment l'aparença de l'aplicació. Aquestes variables es defineixen en fitxers SCSS i permeten canviar colors, mides de font, espaiats, etc.

  1. Temes

Els temes en Ionic permeten definir un conjunt de colors i estils que es poden aplicar a tota l'aplicació. Això facilita la creació d'una aparença coherent i personalitzada.

Exemples Pràctics

Exemple 1: Utilitzant CSS per Estilitzar un Botó

<!-- fitxer: src/app/home/home.page.html -->
<ion-button class="custom-button">Click Me</ion-button>
/* fitxer: src/app/home/home.page.scss */
.custom-button {
  background-color: #3880ff;
  color: white;
  border-radius: 12px;
  padding: 10px 20px;
}

Explicació:

  • Hem creat un botó amb la classe custom-button.
  • Hem definit els estils per a aquesta classe en el fitxer SCSS corresponent.

Exemple 2: Utilitzant Variables Globals

/* fitxer: src/theme/variables.scss */
:root {
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #3dc2ff;
  --ion-color-tertiary: #5260ff;
}

Explicació:

  • Hem definit variables globals per als colors primari, secundari i terciari.
  • Aquestes variables es poden utilitzar a tota l'aplicació per mantenir una aparença coherent.

Exercicis Pràctics

Exercici 1: Personalitzar un Botó

Instruccions:

  1. Crea un botó en una pàgina de la teva aplicació Ionic.
  2. Utilitza CSS o SCSS per canviar el color de fons, el color del text i la mida del botó.

Solució:

<!-- fitxer: src/app/home/home.page.html -->
<ion-button class="my-button">Submit</ion-button>
/* fitxer: src/app/home/home.page.scss */
.my-button {
  background-color: #ff5733;
  color: white;
  font-size: 18px;
  padding: 12px 24px;
}

Exercici 2: Utilitzar Variables Globals per a Colors

Instruccions:

  1. Defineix variables globals per als colors primari, secundari i d'accent en el fitxer variables.scss.
  2. Aplica aquests colors a diferents elements de la teva aplicació.

Solució:

/* fitxer: src/theme/variables.scss */
:root {
  --ion-color-primary: #ff5733;
  --ion-color-secondary: #33ff57;
  --ion-color-accent: #3357ff;
}
<!-- fitxer: src/app/home/home.page.html -->
<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button color="secondary">Secondary Button</ion-button>
  <ion-button color="accent">Accent Button</ion-button>
</ion-content>

Resum

En aquest tema, hem après els conceptes bàsics de l'estilització en Ionic, incloent l'ús de CSS i SCSS, variables globals i temes. Hem vist exemples pràctics de com aplicar estils a elements de la nostra aplicació i hem realitzat exercicis per reforçar aquests conceptes. Amb aquests coneixements, estem preparats per aprofundir en l'estilització i tematització de les nostres aplicacions Ionic en els següents temes.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats