Кроссплатформенный и мобильный интерфейс · Новый ресурс
Дизайн-система Framework7.
Нативный альбом эскизов Framework7 с настоящими действиями swipeout, явными значениями темы iOS, доступным с клавиатуры открытием меню действий и отфильтрованным списком, в котором завершённые исследования остаются до сброса.
Framework7 Core/Vue 9.2.0 в проверенном режиме iOS; пример отдельного приложения с высотой по содержимому. · Справочник по реализации
02
Справочник по дизайн-системе Framework7
Framework7 Core/Vue 9.2.0 с явно заданным режимом iOS. Приведённые ниже цвета темы проверены по отрисованному документу после инициализации; значения списков и типографики взяты из поставляемой таблицы стилей iOS. Оригинальные иллюстрации заметок и внешняя компоновка указаны отдельно.
Дизайн-система Framework7 задаёт не только компоненты, но и поведение приложения
Framework7: дизайн-система задаёт не только компоненты, но и поведение приложения
Интеграция Vue в Framework7 построена на базовой среде выполнения приложений. Точка входа устанавливает Framework7Vue в Framework7 до монтирования Vue, а f7-app инициализирует приложение, которому принадлежит поведение swipeout. Одного импорта нескольких стилизованных Vue-обёрток недостаточно для реализации этого нативного уровня взаимодействия.
В локальном примере область действия намеренно ограничена: три оригинальные темы для зарисовок, нативные действия списка, фильтр выполненных и сброс. Здесь не настроены маршрутизатор, мост к устройству, карта или постоянное хранилище заметок. Такие более широкие возможности приложения следует добавлять осознанно, а не подразумевать их наличие по мобильному виду предварительного просмотра.
Дизайн-система Framework7: убедитесь, что тема для нужной платформы действительно применена
Убедитесь, что тема для нужной платформы действительно применена
Эта версия принимает theme="ios" непосредственно в f7-app. Объект params в старом формате не являлся равнозначным рабочим свойством проверенного компонента, и изначально оставлял автоматическое определение платформы в режиме Material для настольных устройств. В исправленном примере проверяются класс html.ios после отрисовки и разрешённые значения темы, прежде чем они описываются как настройки iOS.
В проверенном режиме iOS значение --f7-theme-color равно #007aff, оттенок — #0066d6, а тон — #298fff. Начальное значение темы, режим отрисовки платформы и сгенерированные цветовые роли Material — разные понятия. Чтение вычисленного значения после инициализации позволяет не описывать цвет, который пример на самом деле не отображает.
Дизайн-система Framework7: используйте нативные строки с медиаконтентом и отмечайте локальные переопределения типографики
Используйте нативные строки с медиаконтентом и отмечайте локальные переопределения типографики
В списке используется f7-list media-list с выразительными поверхностями и разделителями iOS. Каждая строка задаёт заголовок, подзаголовок и текст через нативный API list-item; в области медиаконтента размещены небольшие оригинальные иллюстрации. Минимальная высота нативной строки iOS составляет пятьдесят два пикселя, однако строки с несколькими строками медиаконтента естественным образом становятся выше.
Стандартный размер текста подзаголовка и описания — пятнадцать пикселей. В примере для коротких карточек исследования намеренно используются вспомогательные подписи размером одиннадцать и двенадцать пикселей; заголовки и описания при этом могут переноситься. Эти локальные настройки указаны отдельно от официальных переменных, чтобы читатель мог воспроизвести как стандартный вариант, так и пример.
Дизайн-система Framework7: Swipeout — это настройка элемента списка с контейнером действий
Swipeout — это настройка элемента списка с контейнером действий
Для строки включён swipeout, а справа расположены f7-swipeout-actions. f7-swipeout-button задаёт поверхность действия и закрывает открытую область после активации. Вместо свойства delete приложение переключает флаг done у заметки: выполнение можно отменить, а запись должна оставаться доступной.
Нативное ядро может показывать те же действия с помощью жеста. Видимый элемент управления Actions также вызывает f7.swipeout.open для строки со стабильным идентификатором. Благодаря этому команда доступна пользователям настольных устройств и клавиатуры — им не нужно самостоятельно обнаруживать скрытый горизонтальный жест.
Для River steps нажмите Actions и выберите Mark sketched.
Переключитесь на Sketched и убедитесь, что осталась только River steps.
Снова откройте действие, чтобы отменить отметку, или сбросьте весь список.
Дизайн-система Framework7: храните состояние выполнения в модели, а не в удалённом элементе
Храните состояние выполнения в модели, а не в удалённом элементе
Все три объекта заметок остаются в массиве Vue. Вычисляемая коллекция фильтрует их, только когда выбран сегмент «Наброски», а другое вычисляемое значение подсчитывает завершённые исследования. Стабильные идентификаторы связывают каждый встроенный элемент управления с нужной строкой даже после фильтрации.
Для завершённой заметки метка действия меняется с «Отметить как набросок» на «Отменить отметку». Нет жеста долгого смахивания, который неожиданно выполняет действие, и нет автоматического удаления элемента без обновления модели приложения. Та же запись может вернуться в активный список, не будучи созданной заново из неполных данных.
Дизайн-система Framework7: объясните следующий шаг в пустом состоянии фильтра
В пустом состоянии фильтра укажите, что делать дальше
Если в разделе «Наброски» нет записей, панель сообщает, что ни одно исследование не отмечено, и предлагает показать все исследования. Эта кнопка изменяет ту же модель фильтра, что и сегментированные кнопки. Это реальный способ продолжить работу, а не декоративная иллюстрация пустого состояния без дальнейших действий.
Кнопка «Сбросить» снимает все отметки о завершении, возвращает режим «Все исследования» и сообщает, что все три исследования снова доступны. После отдельного действия текст состояния указывает точную заметку. При перезагрузке также восстанавливаются исходные примеры данных, поскольку этот предпросмотр не сохраняет блокнот на устройстве или сервере.
Дизайн-система Framework7: адаптируйте фреймворк приложения для встраивания с высотой по содержимому
Адаптируйте фреймворк приложения для встраивания с высотой по содержимому
Framework7 обычно используется для полноэкранных приложений и контейнеров страниц. В этом примере нет маршрутизируемых страниц; высота корневого документа и переполнение намеренно переопределены, чтобы высота содержимого определяла высоту iframe. Если задать минимальную высоту по размеру области просмотра, возникнет цикл обратной связи: родительский документ меняет размер iframe по высоте дочернего документа.
Встроенный список остаётся внутри инициализированного корня приложения. Исходная компоновка с набросками и советами в две колонки перестраивается в одну при ширине 780px, а в более узких строках уменьшается ширина миниатюр, сохраняя переносы в описаниях. Эти решения для встраивания не следует целиком переносить в обычное маршрутизируемое мобильное приложение, использующее модель прокрутки страниц Framework7.
Дизайн-система Framework7: сочетайте действия по жесту с явным элементом управления
Сочетайте действия по жесту с явным элементом управления
Видимая кнопка открытия действий указывает строку, например «Действия для River steps». Для сегментированных вариантов доступно состояние нажатия, результат выводится в области статуса, а исходная иллюстрация считается декоративной. Пользователь может выбрать то же действие без жеста касания и затем услышать, какая заметка изменилась.
При локальном тестировании видимая кнопка открытия действий показывала настоящую встроенную область смахивания; для River steps отметили завершение, отфильтровали список и проверили, что осталась одна строка, связанная с моделью. Также проверили тему iOS и макет шириной 280px. Само наличие swipeout в CSS не гарантировало бы ни одного из этих результатов.
Добавьте к кнопке открытия действий метку с названием записи.
Используйте обратимое действие модели, а не удаляйте только DOM-элемент.
Проверьте отфильтрованную коллекцию и статус после встроенного действия.
Дизайн-система Framework7: установите совместимые версии Core и Vue
Установите совместимые версии Core и Vue
В точке входа импортируются Framework7 из framework7/bundle, Framework7Vue из framework7-vue и таблица стилей пакета. Пакет включает модуль Swipeout, необходимый в этом примере. Framework7.use(Framework7Vue) вызывается до монтирования полного SFC с помощью createApp.
Оба пакета закреплены на версии 9.2.0. Полный SFC и исходная таблица стилей приведены выше, а корневой HTML в настройке Vite монтирует приложение должным образом. Для исходных иллюстраций не нужен пакет значков: встроенный CSS фреймворка содержит собственный небольшой внутренний шрифт значков.
Полноценный альбом набросков со встроенным смахиванием
f7App, сегментированные кнопки, строки медиасписка и встроенные действия смахивания с сохранением состояния модели Vue.
vue
<script setup>
import {ref,computed} from 'vue';
import {f7App,f7List,f7ListItem,f7SwipeoutActions,f7SwipeoutButton,f7Button,f7Segmented,f7} from 'framework7-vue';
const filter=ref('all'),message=ref('');
const notes=ref([{id:'river',title:'River steps',place:'North bank · 12-minute study',description:'Look for the rhythm between the stone edges and reflected lines.',done:false},{id:'market',title:'Market awning',place:'Old square · 8-minute study',description:'Use three values to separate canvas, shade and open sky.',done:false},{id:'window',title:'Window shadows',place:'Library wall · 10-minute study',description:'Follow the long diagonal before adding the smaller window shapes.',done:false}]);
const visible=computed(()=>notes.value.filter(n=>filter.value==='all'||n.done));const done=computed(()=>notes.value.filter(n=>n.done).length);
function actions(id){f7.swipeout.open('#note-'+id,'right')}
function toggle(note){note.done=!note.done;message.value=`${note.title} ${note.done?'marked as sketched':'returned to your sketch list'}.`}
function reset(){notes.value.forEach(n=>n.done=false);filter.value='all';message.value='All three studies are ready to sketch again.'}
</script>
<template><f7-app name="Field sketchbook" theme="ios"><main class="sketch-shell"><header><p class="eyebrow">FIELD SKETCHBOOK · THREE SMALL STUDIES</p><h1>A walk worth looking at.</h1><p>Keep a short list of things to draw. Swipe a study left, or use its Actions button, to mark it as sketched.</p></header><div class="sketch-layout"><section class="sketch-list"><div class="list-heading"><h2>Today's studies</h2><span>{{done}} / 3 sketched</span></div><f7-segmented strong><f7-button type="button" :active="filter==='all'" @click="filter='all'" :aria-pressed="filter==='all'">All studies</f7-button><f7-button type="button" :active="filter==='done'" @click="filter='done'" :aria-pressed="filter==='done'">Sketched</f7-button></f7-segmented><f7-list media-list strong dividers-ios class="study-list"><f7-list-item v-for="note in visible" :id="'note-'+note.id" :key="note.id" swipeout :title="note.title" :subtitle="note.place" :text="note.description"><template #media><div class="study-art" :class="note.id" aria-hidden="true"><i></i><b></b></div></template><template #after><f7-button type="button" small @click="actions(note.id)" :aria-label="'Actions for '+note.title">Actions</f7-button></template><f7-swipeout-actions right><f7-swipeout-button role="button" @keydown.space.prevent="$event.currentTarget.click()" close color="green" @click="toggle(note)">{{note.done?'Undo sketch':'Mark sketched'}}</f7-swipeout-button></f7-swipeout-actions></f7-list-item></f7-list><div v-if="!visible.length" class="empty"><strong>No studies marked yet.</strong><p>Return to All studies and mark one after you finish drawing.</p><f7-button type="button" @click="filter='all'">Show all studies</f7-button></div><p class="result" role="status">{{message||'Your list changes only in this local preview.'}}</p><f7-button type="button" outline @click="reset">Reset sketch list</f7-button></section><aside><div class="route-art" aria-hidden="true"><i></i><b></b><span></span><em></em></div><p class="eyebrow">A SIMPLE DRAWING ROUTINE</p><h2>Look. Reduce. Draw.</h2><ol><li><strong>Look for one relationship.</strong><span>Choose an edge, a shadow or a repeated shape.</span></li><li><strong>Reduce the scene.</strong><span>Keep only three values before adding detail.</span></li><li><strong>Stop at the time limit.</strong><span>A small finished study teaches more than an unfinished page.</span></li></ol><p class="aside-note">Original sample locations and prompts. No map, location service or real-world itinerary is connected.</p></aside></div></main></f7-app></template>
Этот сброс предназначен для встроенного примера, а не для полноэкранной оболочки приложения с маршрутизацией.
Переопределения подзаголовков и описаний списка заданы явно.
04
Дизайн-система Framework7: настройка агента
Отправная точка для реализации
Проверены совместимые версии Framework7/Core Vue 9.2.0. Это инициализированный пример компонента с переопределениями высоты по содержимому, а не полноценное маршрутизируемое мобильное приложение.
javascript
// npm create vite@latest field-sketchbook -- --template vue
// cd field-sketchbook && npm install
// npm install [email protected][email protected]
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import Framework7 from 'framework7/bundle';
import Framework7Vue from 'framework7-vue';
import 'framework7/css/bundle';
import './style.css';
import App from './App.vue';
Framework7.use(Framework7Vue);
createApp(App).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
Запрос для вашего проекта
Промпт для AI-агента
Используйте Framework7 Core/Vue 9.2.0 с предоставленным альбомом набросков Field, явно задайте theme="ios" и примените структуру встроенных действий смахивания для медиасписка. Сохраните три наброска исследований, их обратимые отметки выполнения и фильтрацию «Все»/«Наброски». Видимые кнопки Actions должны вызывать f7.swipeout.open; завершение должно переключать состояние модели, а не удалять строку. Сохраните type="button" у f7-button и семантику кнопки команды swipeout с поддержкой пробела. Оставьте CSS для встраивания с высотой по содержимому, возможность выйти из пустого фильтра и сброс. Маршрутизация и службы геолокации не требуются.
05
Дизайн-система Framework7: источники и область применения
Framework7 Core/Vue 9.2.0 с проверенным режимом iOS. Исходные задания для набросков и декоративные иллюстрации. Завершение — обратимое локальное состояние; карта, служба геолокации, хранилище устройства и маршрутизируемое приложение не подключены.
