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

Utilitzant Botons i Icones Ionic

Següent ►
►

Introducció

En aquest tema, aprendrem a utilitzar botons i icones en Ionic, dos components essencials per a la interacció de l'usuari en qualsevol aplicació mòbil. Els botons permeten als usuaris realitzar accions, mentre que les icones ajuden a millorar la comprensió visual de les funcionalitats.

Objectius

  • Entendre com crear i estilitzar botons en Ionic.
  • Aprendre a utilitzar icones en els botons i altres components.
  • Explorar les diferents opcions de personalització disponibles per a botons i icones.

  1. Creant Botons en Ionic

Tipus de Botons

Ionic proporciona diversos tipus de botons que es poden utilitzar segons les necessitats de la teva aplicació. A continuació es mostren alguns dels tipus més comuns:

  • Botó Bàsic: Un botó senzill amb estil per defecte.
  • Botó Outline: Un botó amb contorn.
  • Botó Clear: Un botó transparent sense fons.
  • Botó Round: Un botó amb vores arrodonides.
  • Botó Block: Un botó que ocupa tota l'amplada del contenidor.

Exemple de Codi

<ion-button>Botó Bàsic</ion-button>
<ion-button fill="outline">Botó Outline</ion-button>
<ion-button fill="clear">Botó Clear</ion-button>
<ion-button shape="round">Botó Round</ion-button>
<ion-button expand="block">Botó Block</ion-button>

Explicació

  • <ion-button>: Crea un botó bàsic.
  • fill="outline": Aplica un estil de contorn al botó.
  • fill="clear": Fa que el botó sigui transparent.
  • shape="round": Arrodoneix les vores del botó.
  • expand="block": Fa que el botó ocupi tota l'amplada del contenidor.

  1. Utilitzant Icones en Ionic

Afegint Icones

Ionic utilitza la biblioteca d'icones Ionicons, que proporciona una àmplia gamma d'icones que es poden utilitzar fàcilment en la teva aplicació.

Exemple de Codi

<ion-icon name="home"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="heart"></ion-icon>

Explicació

  • <ion-icon name="home">: Afegeix una icona de casa.
  • <ion-icon name="star">: Afegeix una icona d'estrella.
  • <ion-icon name="heart">: Afegeix una icona de cor.

Icones en Botons

Les icones es poden combinar amb botons per millorar la seva funcionalitat i aparença.

Exemple de Codi

<ion-button>
  <ion-icon slot="start" name="home"></ion-icon>
  Inici
</ion-button>

<ion-button>
  <ion-icon slot="end" name="star"></ion-icon>
  Favorits
</ion-button>

Explicació

  • slot="start": Col·loca la icona a l'inici del botó.
  • slot="end": Col·loca la icona al final del botó.

  1. Personalització de Botons i Icones

Estilització de Botons

Els botons es poden personalitzar utilitzant classes CSS o SCSS per adaptar-los a l'estil de la teva aplicació.

Exemple de Codi

.custom-button {
  --background: #3880ff;
  --color: white;
  --border-radius: 12px;
}
<ion-button class="custom-button">Botó Personalitzat</ion-button>

Explicació

  • --background: Defineix el color de fons del botó.
  • --color: Defineix el color del text del botó.
  • --border-radius: Defineix el radi de les vores del botó.

Estilització d'Icones

Les icones també es poden personalitzar utilitzant propietats CSS.

Exemple de Codi

.custom-icon {
  --color: #ff5722;
  --font-size: 24px;
}
<ion-icon class="custom-icon" name="heart"></ion-icon>

Explicació

  • --color: Defineix el color de la icona.
  • --font-size: Defineix la mida de la icona.

Exercicis Pràctics

Exercici 1: Creant un Botó amb Icona

Crea un botó que contingui una icona de "home" a l'inici i el text "Inici".

Solució

<ion-button>
  <ion-icon slot="start" name="home"></ion-icon>
  Inici
</ion-button>

Exercici 2: Personalitzant un Botó

Crea un botó amb un color de fons blau (#3880ff), text blanc i vores arrodonides de 12px.

Solució

.custom-button {
  --background: #3880ff;
  --color: white;
  --border-radius: 12px;
}
<ion-button class="custom-button">Botó Personalitzat</ion-button>

Conclusió

En aquest tema, hem après a crear i personalitzar botons i icones en Ionic. Hem vist com utilitzar diferents tipus de botons, afegir icones i personalitzar-los per adaptar-los a l'estil de la nostra aplicació. Aquests components són fonamentals per a la interacció de l'usuari i la millora de l'experiència d'usuari en les aplicacions mòbils.

En el següent tema, explorarem com crear i utilitzar pàgines en Ionic, un altre component essencial per a la navegació i l'organització del contingut en la teva aplicació.

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