# Дизайн-система Ionic Framework ## Предварительный просмотр интерфейса дизайн-системы Ionic Framework Меняйте шрифт, изменяйте размер текста с клавиатуры, переключайте тёплый оттенок бумаги и сохраняйте локальный снимок настроек. ## Справочник по дизайн-системе Ionic Framework Проверены Ionic Vue/Core 9.0.6. Основные цвета взяты из установленного core.css. В демонстрации явно выбран режим iOS. Типографика для чтения, цвета бумаги и окружающие отступы — авторские решения приложения, а не значения по умолчанию Ionic. ### Стандартные семантические роли светлой темы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ion-color-primary | #0054e9 | Нативные основные элементы управления. | | --ion-color-primary-rgb | 0, 84, 233 | Каналы RGB для расчётов с прозрачностью. | | --ion-color-primary-contrast | #fff | Контраст текста и значков на основном цвете. | | --ion-color-primary-shade | #004acd | Затемнённый вариант основного цвета. | | --ion-color-primary-tint | #1a65eb | Осветлённый вариант основного цвета. | | --ion-color-secondary | #0163aa | Вторичная роль. | | --ion-color-tertiary | #6030ff | Роль третичного цвета. | | --ion-color-success | #2dd55b | Роль успешного состояния. | | --ion-color-warning | #ffc409 | Роль предупреждения. | | --ion-color-danger | #c5000f | Роль опасности. | ### Геометрия нативного диапазона по режимам | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | iOS --bar-height | 4px | Скомпилированное значение диапазона по умолчанию для iOS. | | iOS --knob-size | 26px | Скомпилированный размер ползунка для iOS. | | MD --bar-height | 2px | Скомпилированное значение по умолчанию для режима Material Design. | | MD --knob-size | 18px | Скомпилированный размер ползунка для Material Design. | | Application min / max / step | 16 / 26 / 1 | Целочисленный размер шрифта для чтения; фактические свойства диапазона. | | snaps / ticks / pin | true / true / true | Видимые деления и форматированное отображение размера. | ### Авторские шкалы для чтения и структуры страницы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Reading font | Georgia, serif OR system-ui, sans-serif | Управляется нативным сегментом; используются шрифты, уже установленные на устройстве. | | Reading size | 16–26px; default 18px | Непосредственно применяется к статье. | | Reading line-height | 1.65 | Авторская удобная ширина текстовой колонки. | | Article heading | 1.9em / 1.15; 1.6em below 360px | Масштабируется в соответствии с выбранным читателем размером основного текста. | | Control/body font | system-ui, sans-serif | Явно заданный выбор шрифта приложения. | | Spacing | 10 / 12 / 14 / 16 / 20 / 22 / 24 / 28 / 32px | Конкретные значения авторской таблицы стилей, а не заявленная шкала Ionic. | | Layout | 300px settings + flexible article; stack at 760px | Для обоих столбцов задано min-width:0. | | Paper roles | #fff9eb warm; #ffffff white; #24362e ink | Авторские цвета содержимого, отдельно от ролей нативных элементов управления. | | Card radius | 16px | Авторская геометрия окружающей панели. | ## Полное руководство по дизайн-системе Ionic Framework Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система 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. 1. Установите фокус на ползунок «Размер текста» и нажмите клавишу Right Arrow восемь раз, чтобы установить значение 26px. 2. Выберите Sans и отключите переключатель «Тёплая бумага». 3. Сохраните настройки и проверьте точное значение снимка: шрифт, размер и цвет бумаги. Прочитать вспомогательную спецификацию ## Дизайн-система 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. Прочитать вспомогательную спецификацию ## Дизайн-система Ionic Framework Примеры компонентов ### Полный SFC с настройками чтения Нативные IonSegment, IonRange, IonToggle и IonButton управляют оригинальным коротким эссе. ``` ``` Справочник по коду - Значение диапазона применяется через ionChange; e.detail.value преобразуется в число. - Любое изменение настройки сбрасывает сохранённый снимок. - Сохранение использует локальное реактивное состояние, а не память устройства и не запрос к серверу. ### Полная исходная таблица стилей макета Встраивание с высотой по содержимому, узкая компоновка со стеками элементов и типографика, выбранная читателем, без обращения к корневым элементам Shadow DOM компонентов. ``` 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}} ``` Справочник по коду - В ползунке используется документированное пользовательское свойство --bar-height. - Все иллюстрации к тексту созданы специально для этого примера CSS и помечены как декоративные. ## Дизайн-система Ionic Framework Настройка агента ### Отправная точка для реализации Проверено на Ionic Vue/Core 9.0.6. Полный SFC и таблица стилей приведены выше; vue-router установлен как зависимость интеграции, хотя в предпросмотре нет страниц с маршрутизацией. ``` // 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 ``` ### Запрос для вашего проекта ``` Используйте Ionic Vue/Core 9.0.6 в явном режиме iOS, чтобы собрать предоставленный пример настроек чтения. Свяжите нативные Segment для выбора шрифта, Range для размера текста, Toggle для оформления бумаги и действия Button с фактическими стилями статьи. Сохраните диапазон 16–26px и отражайте изменения в локальном снимке настроек. Добавьте настройку IonicVue и необходимые CSS и peer-зависимость vue-router; сохраните композицию с высотой по содержимому, не добавляя внутрь встроенного компонента полноэкранную оболочку. Загрузка данных для проверки и удалённое изменение учётной записи не выполняются. ``` ## Ionic Framework Источники и область применения дизайн-системы Ionic Vue/Core 9.0.6, режим iOS. Оригинальные эссе, иллюстрации, шкала размера текста и цвета тёплой бумаги. Сохранение выполняется в локальном реактивном состоянии и не переживает перезагрузку. Этот встроенный пример компонента не является полноценным приложением Ionic с маршрутизацией или поддержкой нативного устройства. - Интеграция с Vue Плагин, импорты компонентов и полная структура приложения. - Семейства цветов Роли базового цвета, контраста, оттенков и значений RGB. - Переменные CSS Глобальные и компонентные пользовательские свойства. - Segment Модель выбора и события сегмента. - Ползунок Подписи, шаги, деления, метки и структура значения события. - Toggle Состояние checked и события изменения. - Button Состояния развёртывания, заливки и отключения. - Части Shadow DOM Поддерживаемые границы стилизации. ## Дизайн-система Ionic Framework Связанные ресурсы ### Kobalte Kobalte предоставляет headless-компоненты для Solid, включая числовые поля с отдельными исходными и форматированными значениями, составную анатомию флажка и кнопки с состоянием нажатия. В руководстве эти примитивы связаны с сигналами Solid на примере масштабатора рецепта с вычисляемыми количествами и сбрасываемыми флажками ингредиентов. ### Mantine Справочник по Mantine 9 с нативной таблицей участников и боковой панелью планирования. Изучите настоящие шкалы темы, подключите useForm к TextInput, Select, Checkbox и DatePickerInput и проверьте валидацию перед добавлением локальной записи. ### Melt UI Конструкторы хранилищ и действий Melt UI добавляют доступное поведение к разметке Svelte, которой вы управляете. В руководстве @melt-ui/svelte 0.86.6 связывает конструкторы radio, slider и switch через их атрибуты, действия и доступные для записи хранилища; это решение отличается от более нового варианта на runes API. - [Справочник по реализации](https://ionicframework.com/docs/vue/quickstart) - [Источник](https://ionicframework.com/docs/theming/colors) - [Источник](https://ionicframework.com/docs/api/range) - [Источник](https://ionicframework.com/docs/theming/css-variables) - [Прочитать вспомогательную спецификацию](https://ionicframework.com/docs/vue/quickstart) - [Прочитать вспомогательную спецификацию](https://ionicframework.com/docs/theming/colors) - [Прочитать вспомогательную спецификацию](https://ionicframework.com/docs/theming/css-variables) - [Прочитать вспомогательную спецификацию](https://ionicframework.com/docs/api/segment) - [Прочитать вспомогательную спецификацию](https://ionicframework.com/docs/api/range) - [Прочитать вспомогательную спецификацию](https://ionicframework.com/docs/api/toggle) - [Прочитать вспомогательную спецификацию](https://ionicframework.com/docs/api/button) - [Прочитать вспомогательную спецификацию](https://ionicframework.com/docs/theming/css-shadow-parts) - [Справочник по коду](https://ionicframework.com/docs/api/range) - [Справочник по коду](https://ionicframework.com/docs/theming/css-variables) - [Интеграция с Vue Плагин, импорты компонентов и полная структура приложения.](https://ionicframework.com/docs/vue/quickstart) - [Семейства цветов Роли базового цвета, контраста, оттенков и значений RGB.](https://ionicframework.com/docs/theming/colors) - [Переменные CSS Глобальные и компонентные пользовательские свойства.](https://ionicframework.com/docs/theming/css-variables) - [Segment Модель выбора и события сегмента.](https://ionicframework.com/docs/api/segment) - [Ползунок Подписи, шаги, деления, метки и структура значения события.](https://ionicframework.com/docs/api/range) - [Toggle Состояние checked и события изменения.](https://ionicframework.com/docs/api/toggle) - [Button Состояния развёртывания, заливки и отключения.](https://ionicframework.com/docs/api/button) - [Части Shadow DOM Поддерживаемые границы стилизации.](https://ionicframework.com/docs/theming/css-shadow-parts)