La dernière fois, j'ai écrit un article concernant la création initiale d'un projet avec ionic et un framework de notre choix. Passons à présent à la création aux composants utilisateurs avec le framework angular sur Android. Il y a une grande [documentation](https://ionicframework.com/docs/components) à ce sujet et des exemples assez clairs sur leur site web et leur équivalent sur iOS. Jetons sur quelques unes de ces composantes et le code nécessaire pour les créer dans le projet.
Structure d'une page
Rappelons nous que pour démarrer l'application dans un navigateur, la commande est:
ionic serve
Commençons du début avec un exemple de la structure d'une page:
tab2.page.html
<ion-header>
<ion-toolbar>
<ion-title> Entête </ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Intelligence artificielle</h1>
<p>Aujourd'hui, l'intelligence artificielle aide grandement dans plusieurs domaines.</p>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title> Pied de page </ion-title>
</ion-toolbar>
</ion-footer>
On constate que les balises de structure ne sont pas exactement les mêmes que ceux de HTML utilisé de manière typique. Par contre, il existe toujours les balises de base telles que celle du paragraphe et celle du titre.
Boîte de dialogue d'alerte et bouton
Afin de créer une boîte de dialogue d'alerte qui apparaît lorsqu'on appuie sur un bouton, voici un exemple d'un code:
tab1.page.html
<ion-button (click)="setOuvert(true)">Bienvenue</ion-button>
<ion-alert [isOpen]="AlerteOuverte" header="Bonjour" subHeader="" message="Bienvenue dans cette application" [buttons]="alertButtons" (didDismiss)="setOpen(false)"></ion-alert>
tab1.page.ts
export class Tab1Page {
AlerteOuverte = false;
alertButtons = ['Fermer'];
setOuvert(estOuvert: boolean) {
this.AlerteOuverte = estOuvert;
}
}
Le code précédent a permis de créer un bouton qui contient le mot de Bienvenue avec une boîte de dialogue qui s'affiche lorsqu'on appuie dessus. La boîte de dialogue contient un entête, un message et un bouton de fermeture. Il est possible de personnaliser le contenu de la boîte de dialogue telle que la couleur, l'ajout des boutons radios au lieu d'un message, l'ajout de plusieurs boutons et plusieurs autres possibilités.
Case à cocher et liste
Voici un exemple de code pour la création de deux cases à cocher dans une liste et avec un emplacement différent de l'étiquette entre les deux cases à cocher:
tab1.page.html
<ion-list>
<ion-item>
<ion-checkbox alignment="end" labelPlacement="start">J'accepte les termes et conditions</ion-checkbox>
</ion-item>
<ion-item>
<ion-checkbox label-placement="stacked" alignment="end">J'accepte de recevoir des courriels des nouveautés de l'application</ion-checkbox>
</ion-item>
</ion-list>
Entrées de données
Ceci est un exemple de saisi d'entrée de données dans une liste avec plusieurs étiquettes différentes:
tab2.page.html
<ion-list>
<ion-item>
<ion-input label="Entrée par défaut"></ion-input>
</ion-item>
<ion-item>
<ion-input label="Valeur temporaire" placeholder="Saisir votre nom"></ion-input>
</ion-item>
<ion-item>
<ion-input label="Entrée contenant un texte" value="Collège de Rosemont"></ion-input>
</ion-item>
<ion-item>
<ion-input label="Entrée désactivée" value="Impossible de modifier" [disabled]="true"></ion-input>
</ion-item>
</ion-list>
Voici un survol rapide de quelques composants utilisateurs, vous pouvez continuer à lire la documentation à ce sujet. Il y a plusieurs d'autres composantes intéressantes à explorer.
Références :
- IONIC, *UI Components | User Interface Application Building Components*, https://ionicframework.com/docs/components (Page consultée le 23 mars 2024).
- IONIC, *ion-alert: Ionic Alert Buttons with Custom Message Prompts*, https://ionicframework.com/docs/api/content (Page consultée le 23 mars 2024).
- IONIC, *ion-content: Scrollable Component for Ionic App Content*, https://ionicframework.com/docs/api/alert (Page consultée le 23 mars 2024).
- IONIC, *ion-checkbox: Ionic App Checkbox to Select Multiple Options*, https://ionicframework.com/docs/api/checkbox (Page consultée le 23 mars 2024).
- IONIC, *ion-input: Custom Input With Styling and CSS Properties*, https://ionicframework.com/docs/api/input (Page consultée le 23 mars 2024).
Commentaires