# Sistema di progettazione Ionic Framework ## Anteprima dell'interfaccia del sistema di progettazione sistema di design Ionic Framework Cambia il carattere tipografico, modifica la dimensione del testo con la tastiera, attiva la carta calda e salva lo snapshot locale delle preferenze. ## 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. ### Ruoli semantici dei colori chiari predefiniti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ion-color-primary | #0054e9 | Controlli nativi principali. | | --ion-color-primary-rgb | 0, 84, 233 | Canali RGB per calcoli basati sull'opacità. | | --ion-color-primary-contrast | #fff | Contrasto del testo e delle icone sul colore primario. | | --ion-color-primary-shade | #004acd | Variante scurita del colore primario. | | --ion-color-primary-tint | #1a65eb | Variante schiarita del colore primario. | | --ion-color-secondary | #0163aa | Ruolo secondario. | | --ion-color-tertiary | #6030ff | Ruolo terziario. | | --ion-color-success | #2dd55b | Ruolo di successo. | | --ion-color-warning | #ffc409 | Ruolo di avviso. | | --ion-color-danger | #c5000f | Ruolo di pericolo. | ### Geometria nativa di Range per modalità | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | iOS --bar-height | 4px | Valore predefinito compilato di Range per iOS. | | iOS --knob-size | 26px | Dimensione compilata del cursore per iOS. | | MD --bar-height | 2px | Valore predefinito compilato della modalità Material Design. | | MD --knob-size | 18px | Dimensione compilata del cursore per Material Design. | | Application min / max / step | 16 / 26 / 1 | Dimensione del carattere di lettura intera; proprietà effettive di Range. | | snaps / ticks / pin | true / true / true | Passaggi visibili e feedback formattato sulla dimensione. | ### Scale originali di lettura e layout | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Reading font | Georgia, serif OR system-ui, sans-serif | Controllato dal segmento nativo; i caratteri sono già presenti sul dispositivo. | | Reading size | 16–26px; default 18px | Applicato direttamente all'articolo. | | Reading line-height | 1.65 | Lunghezza di riga originale e confortevole per il testo. | | Article heading | 1.9em / 1.15; 1.6em below 360px | Si ridimensiona in base alla dimensione del testo scelta dal lettore. | | Control/body font | system-ui, sans-serif | Scelta esplicita del carattere tipografico dell'applicazione. | | Spacing | 10 / 12 / 14 / 16 / 20 / 22 / 24 / 28 / 32px | Valori concreti del foglio di stile originale, non una scala Ionic dichiarata. | | Layout | 300px settings + flexible article; stack at 760px | Entrambe le colonne usano min-width:0. | | Paper roles | #fff9eb warm; #ffffff white; #24362e ink | Colori originali dei contenuti, distinti dai ruoli dei controlli nativi. | | Card radius | 16px | Geometria originale dei pannelli circostanti. | ## Guida completa al sistema di progettazione sistema di design Ionic Framework Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. 1. Seleziona il cursore Dimensione del testo e premi Freccia destra otto volte per raggiungere 26px. 2. Seleziona Sans e disattiva Carta calda. 3. Salva le preferenze e verifica l'esatto snapshot di carattere tipografico, dimensione e carta. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. ``` ``` Riferimento del codice - 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. ``` html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;color:#24362e;background:#f2f5f3}.reader-shell{max-width:1120px;margin:auto;padding:32px}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700;color:#52695c}h1{font-size:34px;line-height:1.15;max-width:660px;margin:12px 0}header>p:last-child{font-size:15px;line-height:1.6;max-width:660px;color:#56675e}.reader-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;margin-top:28px}.preferences{background:white;border:1px solid #dbe3de;border-radius:16px;padding:22px;align-self:start;min-width:0}.preferences h2{font-size:19px;margin:0 0 22px}.label{font-size:14px;font-weight:600;margin-bottom:10px}ion-segment{margin-bottom:20px}ion-range{padding:12px 0 0;--bar-height:4px}.scale{display:flex;justify-content:space-between;font-size:12px;color:#52695c;margin:0 0 24px}.paper-toggle{border-top:1px solid #e4e9e6;padding-top:20px;margin-bottom:20px}.paper-toggle ion-toggle{width:100%;font-size:14px}.paper-toggle p{font-size:12px;line-height:1.6;color:#5a6b61}.save-result{font-size:12px;line-height:1.6;color:#46614f;min-height:38px}.reading-paper{background:white;border:1px solid #dce3dd;border-radius:16px;padding:28px;line-height:1.65;min-width:0;overflow-wrap:anywhere;transition:background .2s}.reading-paper.warm{background:#fff9eb}.reading-paper h2{font-size:1.9em;line-height:1.15;margin:14px 0 24px;font-weight:400}.reading-paper p{margin:0 0 1.2em}.article-kicker{font-family:system-ui,sans-serif;font-size:10px;letter-spacing:.15em}.paper-art{height:112px;background:#dce8d9;border-radius:8px;position:relative;overflow:hidden;margin-bottom:24px}.paper-art span{position:absolute;width:150px;height:150px;background:#a4baa2;border-radius:50%;right:15%;top:35px}.paper-art i{position:absolute;width:130px;height:70px;background:#f3e0a8;border-radius:50% 50% 0 0;right:25%;top:48px}.paper-art b{position:absolute;width:60px;height:130px;transform:rotate(24deg);background:#64816b;left:15%;top:38px;border-radius:50% 50% 0 0}.reading-paper footer{font:11px/1.6 system-ui,sans-serif;border-top:1px solid #deded3;padding-top:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.reading-paper ion-chip{font-size:11px;margin:0}@media(max-width:760px){.reader-shell{padding:20px}.reader-layout{grid-template-columns:minmax(0,1fr)}h1{font-size:29px}}@media(max-width:360px){.reader-shell{padding:14px}.preferences,.reading-paper{padding:16px}.reader-layout{gap:18px}.reading-paper h2{font-size:1.6em}} ``` Riferimento del codice - Lo slider usa la proprietà personalizzata documentata --bar-height. - Tutte le illustrazioni testuali sono originali CSS e contrassegnate come decorative. ## 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. ``` // Start with: npm create vite@latest ionic-reader -- --template vue // cd ionic-reader && npm install // npm install @ionic/vue@9.0.6 @ionic/core@9.0.6 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: //
// Run: npm run dev ``` ### Un prompt per il tuo progetto ``` 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. ``` ## 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. - Integrazione Vue Plugin, importazioni dei componenti e struttura completa dell’applicazione. - Famiglie di colori Ruoli per colori di base, contrasto, ombra, tonalità e RGB. - Variabili CSS Proprietà personalizzate globali e dei componenti. - Segmento Modello di selezione ed eventi del segmento. - Range Etichette, passaggi, tacche, indicatori e struttura del valore dell’evento. - Interruttore Stato checked ed eventi di modifica. - Button Stati di espansione, riempimento e disattivazione. - Parti Shadow Limiti di stile supportati. ## Sistema di design Ionic Framework Risorse correlate del sistema di progettazione ### Kobalte Kobalte offre componenti headless per Solid, inclusi campi numerici con valori grezzi e formattati separati, l’anatomia composta delle checkbox e pulsanti con stato premuto. Questa guida collega le primitive ai segnali Solid attraverso uno scaler di ricette con quantità derivate e caselle degli ingredienti ripristinabili. ### Mantine Una guida di riferimento per Mantine 9, basata su una tabella nativa dei partecipanti e un drawer per la pianificazione. Esamina le scale effettive del tema, collega useForm a TextInput, Select, Checkbox e DatePickerInput e prova la convalida prima di aggiungere un record locale. ### Melt UI I builder di store e azioni di Melt UI aggiungono comportamenti accessibili al markup Svelte che gestisci direttamente. Questa guida usa @melt-ui/svelte 0.86.6 per collegare i builder radio, slider e switch tramite attributi, azioni e store scrivibili; è distinto dal più recente API basato sulle runes. - [Riferimento per l’implementazione](https://ionicframework.com/docs/vue/quickstart) - [Fonte](https://ionicframework.com/docs/theming/colors) - [Fonte](https://ionicframework.com/docs/api/range) - [Fonte](https://ionicframework.com/docs/theming/css-variables) - [Leggi la specifica di supporto](https://ionicframework.com/docs/vue/quickstart) - [Leggi la specifica di supporto](https://ionicframework.com/docs/theming/colors) - [Leggi la specifica di supporto](https://ionicframework.com/docs/theming/css-variables) - [Leggi la specifica di supporto](https://ionicframework.com/docs/api/segment) - [Leggi la specifica di supporto](https://ionicframework.com/docs/api/range) - [Leggi la specifica di supporto](https://ionicframework.com/docs/api/toggle) - [Leggi la specifica di supporto](https://ionicframework.com/docs/api/button) - [Leggi la specifica di supporto](https://ionicframework.com/docs/theming/css-shadow-parts) - [Riferimento del codice](https://ionicframework.com/docs/api/range) - [Riferimento del codice](https://ionicframework.com/docs/theming/css-variables) - [Integrazione Vue Plugin, importazioni dei componenti e struttura completa dell’applicazione.](https://ionicframework.com/docs/vue/quickstart) - [Famiglie di colori Ruoli per colori di base, contrasto, ombra, tonalità e RGB.](https://ionicframework.com/docs/theming/colors) - [Variabili CSS Proprietà personalizzate globali e dei componenti.](https://ionicframework.com/docs/theming/css-variables) - [Segmento Modello di selezione ed eventi del segmento.](https://ionicframework.com/docs/api/segment) - [Range Etichette, passaggi, tacche, indicatori e struttura del valore dell’evento.](https://ionicframework.com/docs/api/range) - [Interruttore Stato checked ed eventi di modifica.](https://ionicframework.com/docs/api/toggle) - [Button Stati di espansione, riempimento e disattivazione.](https://ionicframework.com/docs/api/button) - [Parti Shadow Limiti di stile supportati.](https://ionicframework.com/docs/theming/css-shadow-parts)