Interface multiplateforme et mobile · Nouvelle ressource
Système de design Ionic Framework.
Une interface native Ionic de préférences de lecture, avec des rôles de couleur vérifiés, la géométrie des curseurs iOS et Material, le comportement réel des segments et des interrupteurs, ainsi qu’un article qui s’adapte aux choix de police, de taille et de papier.
Ionic Vue/Core 9.0.6, Vue 3, mode iOS explicite. Composants Web natifs intégrés localement. · Référence de mise en œuvre
02
Ionic Framework Référence de conception du système de design
Ionic Vue/Core 9.0.6 vérifié. Les couleurs Core proviennent du fichier core.css installé. La démo sélectionne explicitement le mode iOS. Les choix de typographie, de couleurs du papier et d’espacement environnant sont propres à l’application, et non des valeurs par défaut d’Ionic.
Système de design Ionic Framework : choisir délibérément le mode de rendu
Choisissez délibérément le mode de rendu
Ionic expose des composants Web par l’intermédiaire d’intégrations de frameworks. Cet exemple utilise Ionic Vue 9.0.6 et définit le mode sur ios dans la configuration d’IonicVue. Le segment, le bouton à bascule, le curseur et les boutons adoptent ainsi un style cohérent avec la plateforme, quel que soit le navigateur de bureau utilisé pour inspecter la page. Le mode est un choix de rendu des composants ; il ne transforme pas la page en application mobile native.
L’exemple utilise délibérément un élément main standard plutôt qu’une structure plein écran IonApp/IonContent. Un exemple de composants peut ainsi adapter son contenu à une page de ressources intégrée. Une véritable application Ionic avec routage doit respecter la structure des pages et du routeur du framework, notamment utiliser IonPage lorsque les transitions l’exigent.
Système de design Ionic Framework : une couleur Ionic est une famille de variables associées
Une couleur Ionic est une famille de variables associées
La feuille de style principale installée définit primary sur #0054e9, ainsi que des valeurs distinctes pour les canaux RVB, le contraste, la nuance et la teinte. Les composants peuvent utiliser ces valeurs associées selon les états. Remplacer uniquement le code hexadécimal de base peut rendre les autres états incohérents ; une couleur de marque personnalisée doit définir toute la famille.
Cet exemple conserve la couleur primary par défaut des contrôles natifs. Le papier chaud est une surface distincte de l’application, définie sur #fff9eb, et le texte de l’article reste en #24362e. Passer la page au blanc ne change que la surface de lecture. Cela ne modifie pas implicitement la palette des contrôles et ne prétend pas implémenter l’ensemble de la palette sombre d’Ionic.
Système de design Ionic Framework : rendre visible le choix typographique du lecteur
Rendez observable le choix de police de l’utilisateur
Le segment permet de choisir entre Georgia et system-ui pour l’article. Les contrôles restent en system-ui afin que la préférence porte sur le contenu destiné à la lecture, sans modifier de façon inattendue les libellés ni les dimensions des contrôles. Aucune police externe n’est chargée ; l’exemple s’appuie sur les piles de polices locales correspondantes.
La taille du texte est un entier compris entre seize et vingt-six pixels. Le titre de l’article est proportionnel à cette taille et l’interligne reste à 1.65. Sous 360px de largeur, le rapport du titre passe à 1.6em : la taille maximale reste ainsi lisible dans une colonne intégrée étroite. Ces valeurs propres à l’application sont clairement distinctes des valeurs par défaut des composants Ionic.
Système de design Ionic Framework : un segment offre une sélection contrôlée et une sémantique native
Un segment offre une sélection contrôlée et des sémantiques natives
IonSegment reçoit la valeur actuelle de face et deux éléments enfants IonSegmentButton. Son événement ionChange met à jour le modèle à partir de event.detail.value. Chaque bouton a une valeur stable distincte, serif ou sans, et son libellé visible explique le choix. Un paragraphe associe un libellé à l’ensemble du contrôle à l’aide de aria-labelledby.
Dans l’arborescence d’accessibilité réelle, le contrôle apparaît comme une tablist avec des onglets sélectionnés, et non comme un groupe de boutons ordinaires. Le test d’interaction local cible donc l’onglet natif Sans et vérifie que la police de lecture change. Donner simplement à deux boutons l’apparence d’un segment ne garantit pas le même comportement de sélection.
Système de design Ionic Framework : considérer les événements et contraintes du curseur comme un contrat unique
Utilisez les événements et les contraintes de plage comme un seul contrat
IonRange définit explicitement min, max et step ; sa plage par défaut, de zéro à cent, ne permettrait pas de choisir une taille de texte adaptée à la lecture. L’accrochage aux paliers et les graduations montrent les incréments disponibles, et le formateur de l’indicateur ajoute px à la valeur affichée pendant l’interaction. Le libellé permanent de la taille, sous le contrôle, reste lisible une fois le curseur relâché.
Le gestionnaire utilise ionChange et convertit sa valeur en nombre. Cette approche convient à un curseur simple ; un curseur à deux poignées renverrait une valeur d’une autre forme et nécessiterait un traitement distinct. Le curseur iOS compilé utilise une poignée de vingt-six pixels et une barre de quatre pixels, tandis que le mode Material utilise respectivement dix-huit et deux pixels. Ces différences sont consignées au lieu d’être ramenées à un prétendu jeton Ionic universel.
Placez le focus sur le curseur Taille du texte, puis appuyez huit fois sur la flèche droite pour atteindre 26px.
Sélectionnez Sans et désactivez Papier chaud.
Enregistrez les préférences, puis vérifiez la police, la taille et l’instantané du papier exacts.
Système de design Ionic Framework : un choix booléen de papier doit mettre à jour immédiatement la surface
Un choix de papier booléen doit immédiatement actualiser la surface
IonToggle reçoit la valeur checked du modèle warm. Son événement fournit detail.checked, directement affecté à cet état booléen. Le libellé visible Papier chaud est associé au commutateur natif, et l’explication à proximité précise qu’il modifie la surface de l’article.
La classe warm modifie l’arrière-plan de l’article sans supprimer sa bordure ni changer le texte. La comparaison reste ainsi pertinente. Cela évite aussi de confondre une préférence de teinte du papier avec un réglage clair/sombre à l’échelle de la plateforme, qui nécessiterait de coordonner bien d’autres variables de surface et de texte Ionic.
Système de design Ionic Framework : séparer les préférences appliquées de l’instantané enregistré
Séparez les préférences appliquées de l’instantané enregistré
Chaque réglage s’applique immédiatement à l’article. Enregistrer les préférences consigne un instantané lisible dans l’état réactif local et désactive le bouton tant que cet instantané est à jour. Un observateur des trois modèles efface le message à chaque changement, afin qu’une confirmation obsolète ne décrive pas une nouvelle combinaison.
Restaurer les valeurs par défaut rétablit la police avec empattements, la taille de dix-huit pixels et le papier chaud, puis efface le message de sauvegarde. Le statut précise explicitement que les préférences s’appliquent uniquement à cet aperçu. L’action ne s’appuie ni sur la persistance dans localStorage, ni sur un paramètre de compte, ni sur un plug-in de préférences natif ; un rechargement rétablit les valeurs par défaut.
Système de design Ionic Framework : préserver les contrôles natifs du Shadow DOM tout en stylisant la composition
Préserver les contrôles natifs du Shadow DOM tout en stylisant la composition
Le curseur possède un libellé visible « Taille du texte », l’interrupteur comporte son propre libellé textuel et le segment est intitulé « Police ». L’illustration d’origine est masquée aux technologies d’assistance avec aria-hidden. Le retour de sauvegarde utilise role=status, tandis que l’article reste un HTML sémantique ordinaire afin que son titre et ses paragraphes s’inscrivent dans la navigation habituelle du lecteur.
Les composants Ionic encapsulent leur balisage interne dans le Shadow DOM. L’exemple utilise des propriétés publiques, des événements et des propriétés personnalisées CSS documentées au lieu de rechercher des classes internes privées. La page environnante utilise une hauteur adaptée au contenu et des largeurs minimales nulles ; la vérifier à 280px permet de détecter les problèmes de largeur dans un composant intégré qu’une simple capture d’écran de téléphone autonome peut laisser passer.
Conserver les associations de libellés sur les composants natifs.
Utiliser les propriétés et événements publics plutôt que modifier les éléments internes du Shadow DOM.
Vérifier conjointement les changements de taille au clavier et l’article dynamique.
Système de design Ionic Framework : installer l’intégration Vue et inclure Core CSS
Installez l’intégration Vue et incluez Core CSS
Le point d’entrée complet enregistre IonicVue et importe @ionic/vue/css/core.css avant la feuille de style d’origine. Le paquet Vue installé résout également vue-router ; la commande de dépendances reproductible inclut donc vue-router, même si cet exemple intégré ne configure pas la navigation. L’omission de cette dépendance requise par les pairs empêchait la résolution du bundle local.
Les deux exemples complets fournissent App.vue et style.css. Un projet Vue standard créé avec Vite compile le SFC et ses imports de composants natifs. L’aperçu autonome des ressources regroupe localement le JavaScript et le CSS obtenus, y compris les implémentations des composants ; modifier les contrôles ne nécessite donc aucune requête à un CDN externe.
Ionic Framework Exemples de composants du système de design
SFC complet des préférences de lecture
IonSegment, IonRange, IonToggle et IonButton natifs contrôlent un court essai original.
vue
<script setup>
import {ref,computed,watch} from 'vue';
import {IonSegment,IonSegmentButton,IonLabel,IonRange,IonToggle,IonButton,IonChip} from '@ionic/vue';
const face=ref('serif'),size=ref(18),warm=ref(true),saved=ref('');
const family=computed(()=>face.value==='serif'?'Georgia, serif':'system-ui, sans-serif');
watch([face,size,warm],()=>saved.value='');
function save(){saved.value=`Saved locally: ${face.value}, ${size.value}px, ${warm.value?'warm':'white'} paper.`}
function reset(){face.value='serif';size.value=18;warm.value=true;saved.value=''}
</script>
<template>
<main class="reader-shell">
<header><p class="eyebrow">A QUIETER READING SPACE</p><h1>Make room for the words.</h1><p>Adjust this short essay to your reading preferences. The sample changes as you move the controls.</p></header>
<div class="reader-layout"><section class="preferences" aria-labelledby="preferences-title"><h2 id="preferences-title">Reading settings</h2><p class="label" id="face-label">Typeface</p>
<IonSegment :value="face" @ionChange="face=$event.detail.value" aria-labelledby="face-label"><IonSegmentButton value="serif"><IonLabel>Serif</IonLabel></IonSegmentButton><IonSegmentButton value="sans"><IonLabel>Sans</IonLabel></IonSegmentButton></IonSegment>
<IonRange :value="size" @ionChange="size=Number($event.detail.value)" :min="16" :max="26" :step="1" :snaps="true" :ticks="true" :pin="true" label="Text size" label-placement="stacked" :pin-formatter="v=>`${v}px`"/><p class="scale"><span>16px</span><strong>{{size}}px</strong><span>26px</span></p>
<div class="paper-toggle"><IonToggle :checked="warm" @ionChange="warm=$event.detail.checked" justify="space-between">Warm paper</IonToggle><p>Soft ivory or a white page. The controls keep their own contrast.</p></div>
<IonButton expand="block" @click="save" :disabled="!!saved">Save preferences</IonButton><IonButton expand="block" fill="clear" @click="reset">Restore defaults</IonButton><p class="save-result" role="status">{{saved||'Preferences apply to this preview only.'}}</p></section>
<article class="reading-paper" :class="{warm}" :style="{fontFamily:family,fontSize:size+'px'}"><div class="paper-art" aria-hidden="true"><span></span><i></i><b></b></div><p class="article-kicker">FIELD NOTES · 03</p><h2>The useful pause</h2><p>There is a small garden between the library and the river. Its benches face away from the busiest path, toward a row of young trees.</p><p>On an ordinary afternoon, the place asks very little. You can read a paragraph twice, let a conversation settle, or watch the shadow of a leaf move across the page.</p><p>Good reading spaces leave that choice with the reader. A comfortable line, a familiar letterform, and a little breathing room can make a page easier to return to.</p><footer><IonChip outline>Original sample essay</IonChip><span>{{size}}px · {{face==='serif'?'Georgia':'System sans'}} · 1.65 line height</span></footer></article></div>
</main>
</template>
La valeur est validée via ionChange ; e.detail.value est converti en nombre.
Toute modification d’une préférence efface l’instantané sauvegardé.
La sauvegarde repose sur un état réactif local, et non sur le stockage de l’appareil ou une requête au serveur.
Feuille de style complète de la mise en page d’origine
Intégration adaptée à la hauteur du contenu, mise en page étroite empilée et typographie choisie par le lecteur, sans accéder aux racines Shadow DOM des composants.
Le curseur utilise la propriété personnalisée documentée --bar-height.
Toutes les illustrations accompagnant le texte sont originales CSS et marquées comme décoratives.
04
Ionic Framework Configuration de l’agent du système de design
Point de départ de l’implémentation
Ionic Vue/Core 9.0.6 vérifié. Le SFC complet et la feuille de style figurent ci-dessus ; vue-router est installé comme dépendance d’intégration, bien que l’aperçu ne comporte aucune page avec routage.
javascript
// Start with: npm create vite@latest ionic-reader -- --template vue
// cd ionic-reader && npm install
// npm install @ionic/[email protected] @ionic/[email protected] vue-router@4
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {IonicVue} from '@ionic/vue';
import '@ionic/vue/css/core.css';
import './style.css';
import App from './App.vue';
createApp(App).use(IonicVue, {mode:'ios'}).mount('#app');
// The Vite index.html must contain:
// <div id="app"></div><script type="module" src="/src/main.js"></script>
// Run: npm run dev
Un prompt pour votre projet
Prompt pour l’agent IA
Utiliser Ionic Vue/Core 9.0.6 en mode iOS explicite pour créer l’exemple fourni de préférences de lecture. Relier le Segment natif au choix de la police, le Range à la taille du texte, le Toggle à l’apparence du papier et les actions du Button aux styles réels de l’article. Conserver la plage de 16–26px et refléter les modifications dans l’instantané local des préférences sauvegardées. Inclure la configuration IonicVue, la dépendance requise CSS et la dépendance requise par les pairs vue-router ; conserver une composition adaptée à la hauteur du contenu plutôt que d’ajouter une coquille plein écran dans le composant intégré. Aucune donnée d’inspection n’est téléversée et aucun compte distant n’est modifié.
05
Ionic Framework Sources et périmètre du système de design
Ionic Vue/Core 9.0.6, mode iOS. Essai, illustrations, échelle de lecture et couleurs de papier chaud d’origine. La sauvegarde repose sur un état réactif local et n’est pas conservée après rechargement. Cet exemple intégré de composant n’est pas une application Ionic complète avec routage ou destinée à un appareil natif.
