Кроссплатформенный и мобильный интерфейс · Новый ресурс
Дизайн-система Ionic Framework.
Нативный интерфейс Ionic для настройки чтения с проверенными цветовыми ролями, геометрией диапазонов iOS и Material, настоящим поведением сегментов и переключателей и статьёй, которая реагирует на выбор шрифта, размера и фона.
Ionic Vue/Core 9.0.6, Vue 3, режим iOS задан явно. Нативные веб-компоненты включены локально. · Справочник по реализации
02
Справочник по дизайн-системе Ionic Framework
Проверены Ionic Vue/Core 9.0.6. Основные цвета взяты из установленного core.css. В демонстрации явно выбран режим iOS. Типографика для чтения, цвета бумаги и окружающие отступы — авторские решения приложения, а не значения по умолчанию Ionic.
Дизайн-система Ionic Framework — обдуманный выбор режима отображения
Обдуманно выбирайте режим отображения
Ionic предоставляет веб-компоненты через интеграции с фреймворками. В этом примере используются Ionic Vue 9.0.6, а в конфигурации IonicVue задан режим ios. Благодаря этому сегмент, переключатель, диапазон и кнопки оформлены согласованно с выбранной платформой независимо от того, в каком настольном браузере открыта страница. Режим определяет способ отображения компонентов; он не превращает страницу в нативное мобильное приложение.
В примере намеренно используется обычный элемент main вместо полноэкранной оболочки IonApp/IonContent. Так демонстрационный компонент занимает нужное ему место во встроенном ресурсе. В настоящем маршрутизируемом приложении Ionic следует придерживаться структуры страниц и маршрутизатора фреймворка, включая IonPage там, где он нужен для переходов.
Дизайн-система Ionic Framework — цвета Ionic образуют семейство связанных переменных
Цвета Ionic образуют семейство связанных переменных
Установленная основная таблица стилей задаёт для primary цвет #0054e9, а также отдельные значения каналов RGB, контраста, оттенения и высветления. Компоненты могут использовать эти связанные значения в разных состояниях. Если заменить только базовый шестнадцатеричный цвет, остальные состояния могут перестать ему соответствовать; для пользовательского фирменного цвета следует задать всё семейство.
В этом примере для нативных элементов управления сохранён цвет primary по умолчанию. Тёплая бумага — отдельная поверхность приложения с цветом #fff9eb, а текст статьи остаётся цвета #24362e. Переключение страницы на белый фон меняет только поверхность для чтения. Палитра элементов управления при этом не изменяется и полная тёмная палитра Ionic не имитируется.
Дизайн-система Ionic Framework — сделайте выбор шрифта для чтения заметным
Сделайте выбор шрифта для чтения заметным
Сегмент переключает шрифт статьи между Georgia и system-ui. Для самих элементов управления остаётся system-ui, чтобы настройка меняла именно текст для чтения, не влияя неожиданным образом на подписи и размеры элементов управления. Внешние шрифты не загружаются: пример использует соответствующие локальные стеки шрифтов.
Размер текста — целое число от шестнадцати до двадцати шести пикселей. Заголовок статьи масштабируется пропорционально, а высота строки остаётся равной 1.65. При ширине менее 360px соотношение размера заголовка уменьшается до 1.6em, поэтому даже максимальный размер остаётся читаемым в узкой встроенной колонке. Это авторские значения приложения, отдельно от значений компонентов Ionic по умолчанию.
Дизайн-система Ionic Framework — сегмент с управляемым выбором и нативной семантикой
Сегмент с управляемым выбором и нативной семантикой
IonSegment получает текущее значение шрифта и два дочерних элемента IonSegmentButton. Событие ionChange обновляет модель на основе event.detail.value. Каждой кнопке присвоено своё постоянное значение — serif или sans, а видимая подпись поясняет выбор. Абзац связывает подпись со всем элементом управления с помощью aria-labelledby.
В фактическом дереве доступности этот элемент представлен как tablist с выбранными вкладками, а не как группа обычных кнопок. Поэтому локальный тест взаимодействия выбирает нативную вкладку Sans и проверяет, что шрифт текста для чтения меняется. Одного оформления двух кнопок в виде сегмента недостаточно, чтобы обеспечить такое же поведение выбора.
Дизайн-система Ionic Framework — используйте события диапазона и ограничения как единый контракт
Используйте события диапазона и ограничения как единый контракт
Для IonRange явно заданы min, max и step: диапазон по умолчанию от нуля до ста не подходит для выбора удобного размера текста. Фиксированные шаги и деления показывают доступные значения, а форматтер pin добавляет к отображаемому при взаимодействии значению px. Постоянная подпись с размером под элементом управления остаётся читаемой и после завершения перетаскивания.
Обработчик использует ionChange и преобразует значение в число. Это подходит для одного ползунка; диапазон с двумя ползунками возвращает значение другой формы и требует отдельной обработки. В скомпилированном диапазоне для iOS используется ползунок размером двадцать шесть пикселей и полоса шириной четыре пикселя, а для Material — восемнадцать и два соответственно. Эти различия зафиксированы, а не сведены к вымышленному универсальному токену Ionic.
Установите фокус на ползунок «Размер текста» и нажмите клавишу Right Arrow восемь раз, чтобы установить значение 26px.
Выберите Sans и отключите переключатель «Тёплая бумага».
Сохраните настройки и проверьте точное значение снимка: шрифт, размер и цвет бумаги.
Дизайн-система Ionic Framework: выбор варианта бумаги должен сразу менять поверхность
Переключатель цвета бумаги должен сразу менять интерфейс
IonToggle получает значение checked из модели warm. Событие передаёт detail.checked, которое напрямую присваивается этому логическому состоянию. Видимая надпись «Тёплая бумага» относится к встроенному переключателю, а пояснение рядом сообщает, что он меняет поверхность статьи.
Класс warm меняет фон статьи, не убирая рамку и не изменяя текст эссе. Благодаря этому сравнение остаётся наглядным. Это также позволяет не смешивать настройку оттенка бумаги с системным режимом светлой или тёмной темы, для которого пришлось бы согласованно менять гораздо больше переменных поверхностей и текста Ionic.
Дизайн-система Ionic Framework: отделяйте применённые настройки от сохранённого снимка
Разделяйте применённые настройки и сохранённый снимок
Каждая настройка сразу применяется к статье. Кнопка «Сохранить настройки» сохраняет читаемый снимок в локальном реактивном состоянии и отключается, пока этот снимок актуален. Наблюдатель за всеми тремя моделями сбрасывает сообщение после любого изменения, чтобы устаревшее подтверждение не относилось к новой комбинации настроек.
Кнопка «Восстановить значения по умолчанию» задаёт шрифт с засечками, размер 18 пикселей и тёплую бумагу, а затем сбрасывает сообщение о сохранении. Статус явно сообщает, что настройки применяются только в этом предпросмотре. Действие не использует localStorage, настройки учётной записи или нативный плагин предпочтений; после перезагрузки возвращаются значения по умолчанию.
Дизайн-система Ionic Framework: сохраняйте нативные элементы управления в Shadow DOM, оформляя композицию
Сохраняйте нативные элементы управления в Shadow DOM, оформляя композицию
У ползунка есть видимая подпись «Размер текста», переключатель содержит собственную текстовую подпись, а сегмент подписан «Гарнитура». Исходная иллюстрация скрыта от средств доступности с помощью aria-hidden. Для подтверждения сохранения используется role=status, а статья остаётся обычным семантическим элементом HTML: её заголовок и абзацы доступны при стандартной навигации по документу.
Компоненты Ionic инкапсулируют внутреннюю разметку в Shadow DOM. В примере используются общедоступные свойства, события и документированные CSS пользовательские свойства вместо обращения к закрытым внутренним классам. Для внешней страницы задана высота по содержимому и нулевая минимальная ширина; проверка при 280px выявляет проблемы с шириной встроенного компонента, которые могут остаться незаметными на отдельном снимке экрана телефона.
Сохраняйте связи с подписями на нативных компонентах.
Используйте общедоступные свойства и события, не меняя внутреннюю структуру Shadow DOM.
Проверьте одновременное изменение размера текста и обновление статьи.
Дизайн-система Ionic Framework: установите интеграцию с Vue и подключите базовые CSS
Установите интеграцию Vue и подключите Ionic Core CSS
Полный пример входной точки регистрирует IonicVue и импортирует @ionic/vue/css/core.css перед исходной таблицей стилей. Установленный пакет Vue также разрешает vue-router, поэтому в воспроизводимую команду установки зависимостей включён vue-router, хотя в этом встроенном примере навигация не настраивается. Без этой peer-зависимости локальная сборка не могла разрешить модуль.
В двух полных примерах приведены App.vue и style.css. Стандартный проект Vue на Vite компилирует SFC и импорты нативных компонентов. Отдельный предпросмотр ресурсов локально собирает итоговые JavaScript и CSS, включая реализации компонентов, поэтому для изменения элементов управления не нужен внешний запрос к CDN.
Нативные IonSegment, IonRange, IonToggle и IonButton управляют оригинальным коротким эссе.
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>
Значение диапазона применяется через ionChange; e.detail.value преобразуется в число.
Любое изменение настройки сбрасывает сохранённый снимок.
Сохранение использует локальное реактивное состояние, а не память устройства и не запрос к серверу.
Полная исходная таблица стилей макета
Встраивание с высотой по содержимому, узкая компоновка со стеками элементов и типографика, выбранная читателем, без обращения к корневым элементам Shadow DOM компонентов.
В ползунке используется документированное пользовательское свойство --bar-height.
Все иллюстрации к тексту созданы специально для этого примера CSS и помечены как декоративные.
04
Дизайн-система Ionic Framework Настройка агента
Отправная точка для реализации
Проверено на Ionic Vue/Core 9.0.6. Полный SFC и таблица стилей приведены выше; vue-router установлен как зависимость интеграции, хотя в предпросмотре нет страниц с маршрутизацией.
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
Запрос для вашего проекта
Промпт для AI-агента
Используйте Ionic Vue/Core 9.0.6 в явном режиме iOS, чтобы собрать предоставленный пример настроек чтения. Свяжите нативные Segment для выбора шрифта, Range для размера текста, Toggle для оформления бумаги и действия Button с фактическими стилями статьи. Сохраните диапазон 16–26px и отражайте изменения в локальном снимке настроек. Добавьте настройку IonicVue и необходимые CSS и peer-зависимость vue-router; сохраните композицию с высотой по содержимому, не добавляя внутрь встроенного компонента полноэкранную оболочку. Загрузка данных для проверки и удалённое изменение учётной записи не выполняются.
05
Ionic Framework Источники и область применения дизайн-системы
Ionic Vue/Core 9.0.6, режим iOS. Оригинальные эссе, иллюстрации, шкала размера текста и цвета тёплой бумаги. Сохранение выполняется в локальном реактивном состоянии и не переживает перезагрузку. Этот встроенный пример компонента не является полноценным приложением Ionic с маршрутизацией или поддержкой нативного устройства.
