Plattformübergreifende und mobile Benutzeroberflächen · Neue Ressource
Ionic Framework-Designsystem.
Eine native Ionic-Oberfläche für Leseeinstellungen mit überprüften Farbrollen, Geometrie der iOS- und Material-Bereichsregler, echtem Segment- und Schalterverhalten sowie einem Artikel, der auf Auswahl von Schriftart, Größe und Papier reagiert.
Ionic Vue/Core 9.0.6 verifiziert. Die Core-Farben stammen aus der installierten core.css. Das Beispiel wählt ausdrücklich den iOS-Modus. Lesetypografie, Papierfarben und umgebende Abstände sind eigene Anwendungsentscheidungen und keine Ionic-Standards.
Standardmäßige semantische Farbfunktionen im Light-Modus
Ionic stellt Webkomponenten über Framework-Integrationen bereit. Dieses Beispiel verwendet Ionic Vue 9.0.6 und setzt in der IonicVue-Konfiguration mode auf ios. Dadurch erhalten Segment, Umschalter, Schieberegler und Schaltflächen eine einheitliche Plattformdarstellung – unabhängig davon, mit welchem Desktopbrowser die Seite betrachtet wird. Der Modus ist eine Darstellungsentscheidung für Komponenten; er verwandelt die Seite nicht in eine native mobile Anwendung.
Das Beispiel verwendet bewusst ein gewöhnliches main-Element statt einer Vollbildstruktur aus IonApp/IonContent. So kann ein Komponentenbeispiel innerhalb einer eingebetteten Ressourcenseite an seinen Inhalt angepasst werden. Eine tatsächlich geroutete Ionic-Anwendung sollte der Seiten- und Routerstruktur des Frameworks folgen, einschließlich IonPage, sofern für Übergänge erforderlich.
Ionic Framework-Designsystem: Eine Ionic-Farbe ist eine Familie zusammengehöriger Variablen
Eine Ionic-Farbe ist eine Familie zusammengehöriger Variablen
Das installierte Core-Stylesheet definiert primary als #0054e9 und enthält separate Werte für RGB-Kanäle, Kontrast, Abdunklung und Aufhellung. Komponenten können diese zusammengehörigen Werte für verschiedene Zustände verwenden. Wird nur der Basis-Hexwert ersetzt, können andere Zustände inkonsistent bleiben; für eine eigene Markenfarbe sollte die vollständige Farbwertfamilie definiert werden.
Dieses Beispiel behält für native Steuerelemente die Standard-Primärfarbe bei. Die warme Papieroberfläche ist eine separate Anwendungsoberfläche mit dem Farbwert #fff9eb, und der Artikeltext bleibt #24362e. Beim Wechsel der Seite zu Weiß ändert sich nur die Leseoberfläche. Die Steuerungsfarbpalette wird dadurch nicht stillschweigend verändert und es wird auch nicht behauptet, die vollständige dunkle Ionic-Palette zu implementieren.
Ionic Framework-Designsystem: Die Schriftwahl für Lesende sichtbar machen
Die Schriftwahl für Lesende sichtbar machen
Das Segment schaltet den Artikel zwischen Georgia und system-ui um. Die Steuerelemente selbst bleiben bei system-ui, damit die Einstellung den vorgesehenen Lesetext betrifft und nicht unerwartet Beschriftungen und Abmessungen der Steuerelemente verändert. Es wird keine externe Schriftart angefordert; das Beispiel nutzt die entsprechenden lokalen Schriftstapel.
Die Textgröße ist eine Ganzzahl zwischen sechzehn und sechsundzwanzig Pixeln. Die Überschrift des Artikels ist proportional zu dieser Größe, und der Zeilenabstand bleibt bei 1.65. Bei Breiten unter 360px sinkt das Größenverhältnis der Überschrift auf 1.6em, damit die größte Schriftgröße auch in einer schmalen eingebetteten Spalte lesbar bleibt. Dies sind eigene Anwendungswerte, klar getrennt von den Ionic-Standardwerten der Komponenten.
Ionic Framework-Designsystem: Ein Segment hat eine kontrollierte Auswahl und native Semantik
Ein Segment hat eine kontrollierte Auswahl und native Semantik
IonSegment erhält den aktuellen Wert von face und zwei untergeordnete IonSegmentButton-Elemente. Sein Ereignis ionChange aktualisiert das Modell anhand von event.detail.value. Jede Schaltfläche hat einen eigenen stabilen Wert, serif oder sans, und die sichtbare Beschriftung erläutert die Auswahl. Ein Absatz kennzeichnet das gesamte Steuerelement über aria-labelledby.
Der tatsächliche Barrierefreiheitsbaum zeigt eine tablist mit ausgewählten Tabs und keine Gruppe gewöhnlicher Schaltflächen. Der lokale Interaktionstest wählt deshalb den nativen Tab Sans aus und überprüft, ob sich die Leseschrift ändert. Zwei Schaltflächen lediglich so zu gestalten, dass sie wie ein Segment aussehen, würde nicht dasselbe Auswahlverhalten gewährleisten.
Ionic Framework-Designsystem: Bereichsereignisse und Einschränkungen als einheitlichen Vertrag verwenden
Bereichsereignisse und Einschränkungen als einheitlichen Vertrag verwenden
IonRange legt min, max und step explizit fest. Der Standardbereich von null bis hundert würde keine sinnvolle Schriftgröße abbilden. Einrastpunkte und Teilstriche zeigen die verfügbaren Abstufungen an, und der Pin-Formatierer fügt dem während der Interaktion angezeigten Wert px hinzu. Die dauerhafte Größenangabe unter dem Steuerelement bleibt auch nach dem Loslassen lesbar.
Der Handler verwendet ionChange und wandelt den Wert in eine Zahl um. Für einen einzelnen Regler ist das passend; ein Bereich mit zwei Reglern würde einen anderen Wertetyp zurückgeben und eine separate Verarbeitung erfordern. Der kompilierte iOS-Bereich verwendet einen 26 Pixel großen Reglerknopf und einen vier Pixel breiten Balken, während der Material-Modus 18 beziehungsweise zwei Pixel verwendet. Diese Unterschiede werden dokumentiert, statt sie zu einem erfundenen, universellen Ionic-Token zusammenzufassen.
Fokussieren Sie den Schieberegler „Textgröße“ und drücken Sie achtmal die rechte Pfeiltaste, um 26px zu erreichen.
Wählen Sie Sans aus und deaktivieren Sie „Warmes Papier“.
Speichern Sie die Einstellungen und prüfen Sie die genaue Momentaufnahme von Schriftart, Größe und Papierfarbe.
Ionic Framework-Designsystem: Eine boolesche Papierauswahl sollte die Oberfläche sofort aktualisieren
Eine boolesche Papierauswahl sollte die Oberfläche sofort aktualisieren
IonToggle erhält den Wert checked aus dem Modell warm. Das Ereignis liefert detail.checked, das direkt diesem booleschen Zustand zugewiesen wird. Die sichtbare Bezeichnung „Warmes Papier“ gehört zum nativen Schalter, und die Erklärung daneben informiert darüber, dass sich dadurch die Oberfläche des Artikels ändert.
Die Klasse warm ändert den Hintergrund des Artikels, ohne dessen Rahmen zu entfernen oder den Text zu verändern. So bleibt der Vergleich aussagekräftig. Außerdem wird dadurch vermieden, eine Papiertönung mit einer plattformweiten Hell-/Dunkel-Einstellung gleichzusetzen, für die deutlich mehr Ionic-Variablen für Oberflächen und Text koordiniert werden müssten.
Ionic Framework-Designsystem: Angewendete Einstellungen von einem gespeicherten Stand trennen
Übernommene Einstellungen von einem gespeicherten Schnappschuss trennen
Jede Einstellung wird sofort auf den Artikel angewendet. „Einstellungen speichern“ hält eine lesbare Momentaufnahme im lokalen reaktiven Zustand fest und wird deaktiviert, solange diese Momentaufnahme aktuell ist. Ein Watcher für alle drei Modelle setzt die Meldung nach jeder Änderung zurück, damit eine veraltete Bestätigung nicht eine neue Kombination beschreibt.
„Standardeinstellungen wiederherstellen“ setzt Serif, 18 Pixel und warmes Papier und löscht anschließend die Speichermeldung. Der Status weist ausdrücklich darauf hin, dass die Einstellungen nur für diese Vorschau gelten. Hinter der Aktion stehen weder eine Speicherung in localStorage noch eine Kontoeinstellung oder ein natives Einstellungs-Plug-in; nach einem Neuladen gelten wieder die Standardeinstellungen.
Ionic Framework-Designsystem: Native Steuerelemente mit Shadow DOM bewahren und das Layout gestalten
Native Steuerelemente mit Shadow DOM bewahren und das Layout gestalten
Der Bereich hat die sichtbare Bezeichnung „Textgröße“, der Schalter enthält seine eigene Textbezeichnung und das Segment ist mit „Schriftart“ beschriftet. Die ursprüngliche Illustration ist mit aria-hidden ausgeblendet. Die Speicherbestätigung verwendet role=status, während der Artikel ein gewöhnliches semantisches HTML-Element bleibt, sodass Überschrift und Absätze der üblichen Dokumentnavigation folgen.
Ionic-Komponenten kapseln ihr internes Markup im Shadow DOM. Das Beispiel verwendet öffentliche Eigenschaften, Ereignisse und dokumentierte benutzerdefinierte CSS-Eigenschaften, statt private interne Klassen abzufragen. Die umgebende Seite nutzt eine inhaltsabhängige Höhe und eine minimale Breite von null. Ein Test bei 280px deckt Probleme mit eingebetteten Breiten auf, die in einem eigenständigen Smartphone-Screenshot möglicherweise nicht sichtbar sind.
Beziehungen zwischen Beschriftungen und nativen Komponenten beibehalten.
Öffentliche Eigenschaften und Ereignisse verwenden, statt interne Shadow-DOM-Elemente zu verändern.
Tastaturbedienung, Größenänderungen und den aktuellen Artikel gemeinsam überprüfen.
Ionic Framework-Designsystem: Vue-Integration installieren und das Core-CSS einbinden
Vue-Integration installieren und Core CSS einbinden
Der vollständige Einstiegspunkt registriert IonicVue und importiert @ionic/vue/css/core.css vor dem ursprünglichen Stylesheet. Das installierte Vue-Paket löst außerdem vue-router auf. Daher enthält der reproduzierbare Abhängigkeitsbefehl vue-router, obwohl dieses eingebettete Beispiel keine Navigation einrichtet. Ohne diese Peer-Abhängigkeit konnte das lokale Bundle nicht aufgelöst werden.
Die beiden vollständigen Beispiele enthalten App.vue und style.css. Ein standardmäßiges Vite-Vue-Projekt kompiliert die SFC und ihre nativen Komponentenimporte. Die eigenständige Ressourcenvorschau bündelt das resultierende JavaScript und CSS lokal einschließlich der Komponentenimplementierungen, sodass Änderungen an den Steuerelementen keine externe CDN-Anfrage erfordern.
Native IonSegment-, IonRange-, IonToggle- und IonButton-Komponenten steuern einen eigens verfassten kurzen Essay.
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>
Der Bereich übernimmt Änderungen über ionChange; e.detail.value wird in eine Zahl umgewandelt.
Jede Änderung einer Einstellung löscht die gespeicherte Momentaufnahme.
Das Speichern erfolgt im lokalen reaktiven Zustand, nicht im Gerätespeicher und nicht über eine Serveranfrage.
Vollständiges originales Layout-Stylesheet
Einbettung mit inhaltsabhängiger Höhe, ein schmales gestapeltes Layout und vom Leser gewählte Typografie, ohne auf die Shadow Roots der Komponenten zuzugreifen.
Der Bereich verwendet die dokumentierte benutzerdefinierte CSS-Eigenschaft --bar-height.
Sämtliche Illustrationen im Text sind eigens erstellt CSS und als dekorativ gekennzeichnet.
04
Ionic Framework-Designsystem: Agent-Einrichtung
Ausgangspunkt für die Implementierung
Ionic Vue/Core 9.0.6 verifiziert. Die vollständige SFC und das Stylesheet stehen oben; vue-router ist als Integrationsabhängigkeit installiert, obwohl die Vorschau keine Seiten mit Routing enthält.
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
Ein Prompt für dein Projekt
Agenten-Prompt
Verwenden Sie Ionic Vue/Core 9.0.6 im expliziten iOS-Modus, um das bereitgestellte Beispiel für Leseeinstellungen umzusetzen. Verbinden Sie das native Segment für die Schriftauswahl, Range für die Textgröße, Toggle für die Papierdarstellung und die Button-Aktionen mit den tatsächlichen Artikelstilen. Behalten Sie den Bereich von 16–26px bei und übernehmen Sie Änderungen in die lokal gespeicherte Momentaufnahme der Einstellungen. Richten Sie IonicVue ein und binden Sie die erforderliche CSS- sowie die vue-router-Peer-Abhängigkeit ein. Behalten Sie das Layout mit inhaltsabhängiger Höhe bei, statt innerhalb der Einbettung eine Vollbildhülle hinzuzufügen. Es werden keine Prüfdaten hochgeladen und keine Änderungen an entfernten Konten vorgenommen.
05
Ionic Framework-Designsystem: Quellen und Geltungsbereich
Ionic Vue/Core 9.0.6 im iOS-Modus. Originalessay, Illustrationen, Leseschriftgrößen und Farben für warmes Papier. Die Speicherfunktion verwendet lokalen reaktiven Zustand und bleibt nach einem Neuladen nicht erhalten. Dieses eingebettete Komponentenbeispiel ist keine vollständige Ionic-App mit Routing oder nativer Geräteintegration.
