Interfaccia utente multipiattaforma e mobile · Nuova risorsa
Sistema di progettazione Ionic Framework.
Un’interfaccia nativa Ionic per le preferenze di lettura, con ruoli cromatici verificati, geometrie degli intervalli per iOS e Material, comportamento effettivo di segmenti e interruttori e un articolo che si adatta alle scelte di font, dimensione e sfondo.
Riferimento di progettazione del sistema di progettazione sistema di design Ionic Framework
Ionic Vue/Core 9.0.6 verificato. I colori Core provengono dal file core.css installato. La demo seleziona esplicitamente la modalità iOS. Tipografia di lettura, colori della carta e spaziature circostanti sono scelte originali dell'applicazione, non impostazioni predefinite di Ionic.
Sistema di progettazione sistema di design Ionic Framework: scegli deliberatamente la modalità di rendering
Scegli deliberatamente la modalità di rendering
Ionic espone web component tramite integrazioni per i framework. Questo esempio usa Ionic Vue 9.0.6 e imposta la modalità ios nella configurazione di IonicVue. In questo modo segmento, interruttore, Range e pulsanti hanno un aspetto coerente con la piattaforma, indipendentemente dal browser desktop usato per visualizzare la pagina. La modalità è una scelta di rendering dei componenti; non trasforma la pagina in un'applicazione mobile nativa.
L'esempio usa deliberatamente un normale elemento main invece di una struttura a schermo intero IonApp/IonContent. In questo modo il campionario di componenti adatta il contenuto a una pagina di risorse incorporata. Un'applicazione Ionic effettiva con routing dovrebbe seguire la struttura delle pagine e del router del framework, includendo IonPage quando richiesto per le transizioni.
Sistema di progettazione sistema di design Ionic Framework: un colore Ionic è una famiglia di variabili correlate
Un colore Ionic è una famiglia di variabili correlate
Il foglio di stile Core installato definisce primary come #0054e9, con canali RGB, contrasto, shade e tint distinti. I componenti possono usare questi valori correlati nei diversi stati. Sostituire solo il valore esadecimale di base può rendere incoerenti gli altri stati; un colore personalizzato del brand dovrebbe definire l'intera famiglia.
Questo campionario mantiene il colore primario predefinito per i controlli nativi. La carta calda è una superficie applicativa distinta, con colore #fff9eb, mentre il testo dell'articolo resta #24362e. Passare allo sfondo bianco cambia solo la superficie di lettura. Non modifica in modo implicito la palette dei controlli né dichiara di implementare l'intera palette scura di Ionic.
Sistema di progettazione sistema di design Ionic Framework: rendi osservabile la scelta tipografica del lettore
Rendi osservabile la scelta tipografica del lettore
Il segmento alterna il carattere tipografico dell'articolo tra Georgia e system-ui. I controlli restano in system-ui, così la preferenza influisce sul contenuto di lettura previsto, senza modificare inaspettatamente le etichette e le dimensioni dei controlli. Non viene richiesto alcun font esterno: l'esempio si basa sulle corrispondenti famiglie di font locali.
La dimensione del testo è un numero intero compreso tra sedici e ventisei pixel. L'intestazione dell'articolo è proporzionale a tale dimensione e l'interlinea resta 1.65. Sotto i 360px di larghezza, il rapporto dell'intestazione scende a 1.6em, così la dimensione massima resta leggibile in una colonna incorporata stretta. Sono valori originali dell'applicazione, chiaramente distinti dalle impostazioni predefinite dei componenti Ionic.
Sistema di progettazione sistema di design Ionic Framework: un segmento ha una selezione controllata e semantica nativa
Un segmento ha una selezione controllata e semantica nativa
IonSegment riceve il valore corrente di face e due elementi IonSegmentButton. L'evento ionChange aggiorna il modello usando event.detail.value. Ogni pulsante ha un valore stabile distinto, serif o sans, e l'etichetta visibile chiarisce la scelta. Un paragrafo assegna un nome all'intero controllo tramite aria-labelledby.
L'albero di accessibilità effettivo espone un tablist con schede selezionate, non un gruppo di normali pulsanti. Il test locale dell'interazione individua quindi la scheda nativa Sans e verifica che il carattere tipografico di lettura cambi. Limitarsi a dare a due pulsanti un aspetto segmentato non garantirebbe lo stesso comportamento di selezione.
Sistema di progettazione sistema di design Ionic Framework: usa eventi e vincoli di Range come un unico contratto
Usa eventi e vincoli di Range come un unico contratto
IonRange imposta esplicitamente min, max e step; affidarsi all'intervallo predefinito da zero a cento non consentirebbe di definire una dimensione di lettura utile. Lo scatto e i segni di graduazione mostrano gli incrementi disponibili, mentre il formattatore pin aggiunge px al valore visualizzato durante l'interazione. L'etichetta persistente della dimensione sotto il controllo resta leggibile anche dopo aver rilasciato il cursore.
Il gestore usa ionChange e converte il valore in un numero. È appropriato per un singolo cursore; un Range a doppio cursore restituirebbe una forma di valore diversa e richiederebbe una gestione separata. Il Range iOS compilato usa un cursore da ventisei pixel e una barra da quattro, mentre la modalità Material ne usa rispettivamente diciotto e due. Queste differenze sono documentate, anziché appiattite in un token Ionic universale inventato.
Seleziona il cursore Dimensione del testo e premi Freccia destra otto volte per raggiungere 26px.
Seleziona Sans e disattiva Carta calda.
Salva le preferenze e verifica l'esatto snapshot di carattere tipografico, dimensione e carta.
Sistema di design Ionic Framework Sistema di progettazione: una scelta booleana della carta deve aggiornare subito lo sfondo
Una scelta booleana per la carta dovrebbe aggiornare subito la superficie
IonToggle riceve il valore checked dal modello warm. Il relativo evento fornisce detail.checked, che viene assegnato direttamente allo stato booleano. L’etichetta visibile Carta avorio appartiene all’interruttore nativo, mentre la spiegazione accanto chiarisce che modifica lo sfondo dell’articolo.
La classe warm cambia lo sfondo dell’articolo senza rimuoverne il bordo né modificarne il testo. In questo modo il confronto resta significativo. Si evita inoltre di confondere la preferenza per la tinta della carta con un’impostazione di sistema chiaro/scuro, che richiederebbe di coordinare molte altre variabili Ionic per sfondi e testo.
Sistema di design Ionic Framework Sistema di progettazione: separa le preferenze applicate da un’istantanea salvata
Separa le preferenze applicate dallo snapshot salvato
Ogni impostazione si applica subito all’articolo. Salva preferenze registra un’istantanea leggibile nello stato reattivo locale e si disattiva mentre l’istantanea è aggiornata. Un osservatore su tutti e tre i modelli cancella il messaggio dopo ogni modifica, evitando che una conferma non più attuale descriva una nuova combinazione.
Ripristina le impostazioni predefinite imposta il carattere serif, diciotto pixel e la carta avorio, quindi cancella il messaggio di salvataggio. Lo stato indica esplicitamente che le preferenze si applicano solo a questa anteprima. L’azione non usa localStorage, impostazioni dell’account o plugin nativi per le preferenze: dopo un ricaricamento vengono ripristinati i valori predefiniti.
Sistema di design Ionic Framework Sistema di progettazione: mantieni i controlli nativi Shadow DOM e applica lo stile alla composizione
Mantieni i controlli nativi Shadow DOM e applica lo stile alla composizione
Lo slider ha l’etichetta visibile Dimensione del testo, l’interruttore contiene la propria etichetta testuale e il segmento è denominato Carattere. L’illustrazione originale è esclusa dall’albero di accessibilità tramite aria-hidden. La conferma di salvataggio usa role=status, mentre l’articolo resta un normale HTML semantico, così che il titolo e i paragrafi seguano la normale navigazione del documento.
I componenti Ionic racchiudono il markup interno nello Shadow DOM. L’esempio usa proprietà pubbliche, eventi e proprietà personalizzate CSS documentate, invece di interrogare classi interne private. La pagina circostante usa un’altezza adattata al contenuto e larghezze minime pari a zero; verificarla a 280px permette di individuare problemi di larghezza nei contenuti incorporati che potrebbero sfuggire in uno screenshot autonomo di un telefono.
Mantieni le relazioni tra le etichette sui componenti nativi.
Usa proprietà ed eventi pubblici invece di modificare gli elementi interni dello Shadow DOM.
Verifica insieme le modifiche alla dimensione del testo tramite tastiera e l’articolo aggiornato in tempo reale.
Sistema di design Ionic Framework Sistema di progettazione: installa l’integrazione Vue e includi il core CSS
Installa l'integrazione Vue e includi Core CSS
Il punto di ingresso completo registra IonicVue e importa @ionic/vue/css/core.css prima del foglio di stile originale. Il pacchetto Vue installato risolve anche vue-router, quindi il comando riproducibile per le dipendenze include vue-router, benché questo esempio incorporato non configuri la navigazione. L’assenza di questa dipendenza peer impediva la risoluzione del bundle locale.
I due esempi completi forniscono App.vue e style.css. Un normale progetto Vue con Vite compila l’SFC e le relative importazioni dei componenti nativi. L’anteprima autonoma delle risorse raggruppa localmente il risultato JavaScript e CSS, incluse le implementazioni dei componenti, perciò modificare i controlli non richiede richieste a CDN esterni.
Sistema di design Ionic Framework Esempi di componenti del sistema di progettazione
SFC completo delle preferenze di lettura
IonSegment, IonRange, IonToggle e IonButton nativi permettono di interagire con un breve saggio originale.
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>
L’intervallo viene confermato tramite ionChange; e.detail.value viene convertito in un numero.
Ogni modifica alle preferenze cancella l’istantanea salvata.
Il salvataggio è gestito dallo stato reattivo locale, non dalla memoria del dispositivo né da una richiesta al server.
Foglio di stile completo del layout originale
Incorporamento con altezza adattata al contenuto, layout stretto disposto in colonna e tipografia scelta dal lettore, senza accedere alle radici Shadow DOM dei componenti.
Lo slider usa la proprietà personalizzata documentata --bar-height.
Tutte le illustrazioni testuali sono originali CSS e contrassegnate come decorative.
04
Sistema di design Ionic Framework Configurazione dell’agent per il sistema di progettazione
Punto di partenza per l’implementazione
Ionic Vue/Core 9.0.6 verificato. L’SFC completo e il foglio di stile sono riportati sopra; vue-router è installato come dipendenza dell’integrazione, anche se l’anteprima non contiene pagine con routing.
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 per il tuo progetto
Prompt per l’agente
Usa Ionic Vue/Core 9.0.6 in modalità iOS esplicita per realizzare l’esempio fornito delle preferenze di lettura. Mantieni collegati agli stili effettivi dell’articolo il Segment nativo per la scelta del carattere, il Range per la dimensione del testo, il Toggle per l’aspetto della carta e le azioni del Button. Mantieni l’intervallo da 16 a 26px e rispecchia le modifiche nell’istantanea locale delle preferenze salvate. Includi la configurazione di IonicVue, la dipendenza peer richiesta CSS e vue-router; conserva la composizione adattata all’altezza del contenuto, senza aggiungere nell’incorporamento un contenitore a schermo intero. Non vengono caricati dati di ispezione né apportate modifiche a account remoti.
05
Sistema di design Ionic Framework Fonti e ambito del sistema di progettazione
Ionic Vue/Core 9.0.6, modalità iOS. Saggio, illustrazioni, scala di lettura e colori carta avorio originali. Il salvataggio usa lo stato reattivo locale e non persiste dopo un ricaricamento. Questo esempio incorporato di componenti non è un’app Ionic completa con routing o destinata a un dispositivo nativo.
