Plattformübergreifende und mobile Benutzeroberflächen · Neue Ressource
Framework7-Designsystem.
Ein natives Skizzenbuch für Framework7 mit echten Swipeout-Aktionen, expliziten iOS-Theme-Werten, einer per Tastatur bedienbaren Schaltfläche zum Öffnen der Aktionen und einer gefilterten Liste, in der abgeschlossene Studien bis zum Zurücksetzen erhalten bleiben.
Framework7 Core/Vue 9.2.0 im verifizierten iOS-Modus; eigenständiges App-Beispiel mit inhaltsabhängiger Höhe. · Implementierungsreferenz
02
Designreferenz für das Framework7-Designsystem
Framework7 Core/Vue 9.2.0 mit explizitem iOS-Modus. Die folgenden Theme-Farben wurden nach der Initialisierung anhand des gerenderten Dokuments überprüft; Listen- und Typografiewerte stammen aus dem mitgelieferten iOS-Stylesheet. Illustrationen der ursprünglichen Notizen und äußeres Layout sind separat gekennzeichnet.
Framework7 Designsystem liefert neben Komponenten auch das App-Verhalten
Framework7 liefert neben Komponenten auch das App-Verhalten
Die Vue-Integration von Framework7 basiert auf der Core-Laufzeitumgebung der Anwendung. Der Einstiegspunkt installiert Framework7Vue in Framework7, bevor Vue eingebunden wird, und f7-app initialisiert die Anwendung, die das Swipeout-Verhalten bereitstellt. Nur einige gestaltete Vue-Wrapper zu importieren, würde diese native Interaktionsebene nicht bereitstellen.
Das lokale Beispiel hält den Umfang bewusst klein: drei eigene Skizzenvorschläge, native Listenaktionen, ein Filter für abgeschlossene Einträge und eine Zurücksetzen-Funktion. Es konfiguriert weder einen Router noch eine Geräteanbindung, Karte oder dauerhaft gespeichertes Notizbuch. Solche umfassenderen App-Funktionen sollten bewusst ergänzt und nicht durch eine mobil wirkende Vorschau suggeriert werden.
Framework7-Designsystem: Prüfen, ob das angeforderte Plattform-Theme tatsächlich angewendet wurde
Prüfen, ob das angeforderte Plattform-Theme tatsächlich angewendet wurde
Diese Version akzeptiert theme="ios" direkt auf f7-app. Ein Objekt im älteren params-Format war in der untersuchten Komponente keine gleichwertige, funktionierende Prop und ließ die automatische Desktop-Erkennung zunächst im Material-Modus. Das korrigierte Beispiel überprüft die gerenderte Klasse html.ios und die aufgelösten Theme-Werte, bevor es sie als iOS bezeichnet.
Im verifizierten iOS-Modus ist --f7-theme-color auf #007aff gesetzt, mit dem dunkleren Farbton #0066d6 und dem helleren Farbton #298fff. Ein Theme-Ausgangswert, ein Plattform-Renderingmodus und generierte Material-Farbrollen sind unterschiedliche Konzepte. Wird der berechnete Wert nach der Initialisierung ausgelesen, lässt sich vermeiden, eine Farbe zu dokumentieren, die das Beispiel tatsächlich gar nicht anzeigt.
Framework7-Designsystem: Native Medienzeilen verwenden und lokale Typografieanpassungen kennzeichnen
Native Medienzeilen verwenden und lokale Typografieanpassungen kennzeichnen
Die Liste verwendet f7-list media-list mit markanten Oberflächen und iOS-Trennlinien. Jede Zeile gibt Titel, Untertitel und Text über das native list-item-API an; eigene kleine Illustrationen werden im Medien-Slot platziert. Die native Mindesthöhe einer iOS-Listenzeile beträgt zweiundfünfzig Pixel, durch mehrzeilige Medieninhalte werden diese Zeilen jedoch ganz natürlich höher.
Die nativen Standardwerte für Untertitel und Beschreibungen betragen fünfzehn Pixel. Das Beispiel verwendet für diese kurzen Studienkarten bewusst unterstützende Texte mit elf beziehungsweise zwölf Pixeln; Titelzeilen und Beschreibungen dürfen dabei umbrechen. Diese lokalen Anpassungen werden getrennt von den offiziellen Variablen angegeben, damit sich sowohl der Standard als auch das Beispiel nachbilden lässt.
Framework7-Designsystem: Ein Swipeout ist eine Listenelement-Konfiguration mit einem Aktionscontainer
Ein Swipeout ist eine Listenelement-Konfiguration mit einem Aktionscontainer
Für die Zeile ist Swipeout aktiviert; auf der rechten Seite enthält sie f7-swipeout-actions. f7-swipeout-button stellt die Aktionsfläche bereit und schließt den eingeblendeten Bereich nach der Aktivierung. Die Anwendung schaltet die done-Markierung der Notiz um, anstatt die delete-Prop zu aktivieren, da der Abschlussstatus umkehrbar sein soll und der Eintrag erhalten bleiben muss.
Der native Core kann dieselben Aktionen auch durch eine Geste einblenden. Ein sichtbares Steuerelement „Aktionen“ ruft für die Zeile mit stabiler ID außerdem f7.swipeout.open auf. So lässt sich der Befehl auch auf Desktopgeräten und für Tastaturnutzer leicht finden, ohne dass alle erst eine verborgene horizontale Geste entdecken müssen.
Aktiviere bei „Flussschritte“ die Aktion „Aktionen“ und wähle „Als skizziert markieren“.
Wechsle zu „Skizziert“ und prüfe, ob nur „Flussschritte“ sichtbar bleibt.
Öffnen Sie die Aktion erneut, um sie rückgängig zu machen, oder setzen Sie die gesamte Liste zurück.
Framework7-Designsystem: Den Abschluss im Modell statt in einem entfernten Element speichern
Den Abschlussstatus im Modell beibehalten, statt ihn an ein entferntes Element zu binden
Alle drei Notizobjekte bleiben im Vue-Array. Eine berechnete Sammlung filtert sie nur, wenn das Segment „Skizziert“ ausgewählt ist; ein weiterer berechneter Wert zählt die abgeschlossenen Studien. Stabile IDs verknüpfen jeden nativen Aktionsöffner auch nach dem Filtern mit der richtigen Zeile.
Bei einer abgeschlossenen Notiz ändert sich die Aktionsbeschriftung von „Als skizziert markieren“ zu „Skizze rückgängig machen“. Es gibt keine Overswipe-Kurzbewegung, die nach langem Ziehen unerwartet eine Aktion auslöst, und kein automatisches Löschen, das ein Element entfernt, ohne das Anwendungsmodell zu aktualisieren. Derselbe Datensatz kann in die aktive Liste zurückkehren, ohne aus unvollständigen Daten neu erstellt werden zu müssen.
Framework7-Designsystem: Im leeren Filterzustand die nächste Aktion erläutern
Im Leerzustand des Filters den nächsten Schritt erläutern
Wenn „Skizziert“ keine Einträge enthält, erklärt das Panel, dass noch keine Studien markiert wurden, und bietet „Alle Studien anzeigen“ an. Diese Schaltfläche ändert dasselbe Filtermodell wie die segmentierten Schaltflächen. Sie bietet einen echten Weg zurück und ist keine dekorative Leerzustandsillustration ohne weitere Aktion.
Mit „Zurücksetzen“ werden alle Abschlussmarkierungen gelöscht, „Alle Studien“ ausgewählt und angezeigt, dass alle drei wieder bereit sind. Nach einzelnen Aktionen benennt der Statustext die genaue Notiz. Beim Neuladen werden außerdem die ursprünglichen Beispieldaten wiederhergestellt, da diese Vorschau ein Notizbuch weder auf einem Gerät noch auf einem Server speichert.
Framework7-Designsystem: Ein Framework für vollständige Apps sorgfältig an Einbettungen mit inhaltsabhängiger Höhe anpassen
Ein Framework für vollständige Apps sorgfältig an Einbettungen mit inhaltsabhängiger Höhe anpassen
Framework7 unterstützt üblicherweise Layouts für Vollbild-Apps und Seitencontainer. Dieses Beispiel enthält keine gerouteten Seiten und setzt die Höhe und den Überlauf des Wurzeldokuments absichtlich außer Kraft, damit der Inhalt die Höhe des iFrames bestimmt. Eine Mindesthöhe relativ zum Viewport würde eine Rückkopplungsschleife mit einem übergeordneten Element erzeugen, das die Größe des iFrames an das untergeordnete Dokument anpasst.
Die native Liste bleibt innerhalb des initialisierten App-Wurzelelements. Das ursprüngliche zweispaltige Layout mit Skizzen und Tipps wird bei 780px gestapelt; bei schmaleren Zeilen wird die Vorschaubildbreite verringert, während sich die Beschreibungen weiterhin umbrechen. Diese Einbettungsanpassungen sollten nicht pauschal in einer normalen, gerouteten mobilen App übernommen werden, die auf das Seiten-Scrollmodell von Framework7 setzt.
Framework7-Designsystem: Gestenaktionen mit einem expliziten Steuerelement ergänzen
Gestenaktionen mit einem expliziten Steuerelement ergänzen
Der sichtbare Aktionsöffner benennt seine Zeile, zum Beispiel „Aktionen für Flussschritte“. Die segmentierten Auswahlmöglichkeiten zeigen ihren gedrückten Zustand an, das Ergebnis wird in einem Statusbereich ausgegeben und das ursprüngliche Bildmaterial ist dekorativ. Nutzer können dieselbe Aktion ohne Touch-Geste aufrufen und anschließend hören, welche Notiz geändert wurde.
Beim lokalen Test wurde über den sichtbaren Öffner die tatsächliche native Swipeout-Fläche geöffnet, „Flussschritte“ markiert, die Liste gefiltert und überprüft, dass ein durch das Modell gestützter Eintrag verblieb. Außerdem wurden das gerenderte iOS-Design und das Layout bei 280px geprüft. Das bloße Vorhandensein von Swipeout in CSS würde keines dieser Verhaltensweisen nachweisen.
Den Aktionsöffner mit dem Namen des Eintrags beschriften.
Eine umkehrbare Modellaktion beibehalten, statt nur das DOM-Element zu löschen.
Die gefilterte Sammlung und den Status nach der nativen Aktion testen.
Framework7-Designsystem: Zueinander passende Core- und Vue-Versionen installieren
Zueinander passende Core- und Vue-Versionen installieren
Der Einstiegspunkt importiert Framework7 aus framework7/bundle, Framework7Vue aus framework7-vue und das Stylesheet des Bundles. Das Bundle enthält das für dieses Beispiel benötigte Swipeout-Modul. Framework7.use(Framework7Vue) wird ausgeführt, bevor createApp die vollständige SFC einbindet.
Beide Pakete sind auf 9.2.0 festgelegt. Die vollständige SFC und das ursprüngliche Stylesheet sind oben enthalten; das Root-Element HTML im Vite-Setup hat das erwartete App-Mount-Element. Für die sichtbaren Originalillustrationen ist kein Icon-Paket erforderlich; der Core von Framework7 CSS enthält seine eigene kleine interne Icon-Schriftart.
Vollständiges Skizzenbuch mit nativen Swipeout-Aktionen
f7App, segmentierte Schaltflächen, Medienlistenzeilen und native Swipeout-Aktionen mit dauerhaftem Vue-Modellstatus.
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>
Dieses Zurücksetzen ist für ein eingebettetes Beispiel gedacht, nicht für das Shell-Layout einer gerouteten Vollbild-App.
Überschreibungen für Listenuntertitel und -beschreibungen sind explizit angegeben.
04
Framework7-Designsystem: Agent-Einrichtung
Ausgangspunkt für die Implementierung
Abgestimmte Versionen von Framework7/Core Vue 9.2.0 überprüft. Dies ist ein initialisiertes Komponentenbeispiel mit Anpassungen für inhaltsabhängige Höhe, keine vollständige geroutete mobile Anwendung.
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
Ein Prompt für dein Projekt
Agenten-Prompt
Verwenden Sie Framework7 Core/Vue 9.2.0 mit dem bereitgestellten Field-Skizzenbuch, dem expliziten theme="ios" und der nativen Swipeout-Struktur der Medienliste. Behalten Sie die drei Skizzenstudien, ihre umkehrbaren Erledigt-Markierungen und die Filter „Alle“/„Skizziert“ bei. Sichtbare Schaltflächen „Aktionen“ sollten f7.swipeout.open aufrufen; beim Abschließen wird der Modellstatus geändert, statt die Zeile zu löschen. Behalten Sie type="button" bei f7-button sowie die Schaltflächensemantik und die Leertastenunterstützung des Swipeout-Befehls bei. Behalten Sie die Einbettungs-CSS mit inhaltsabhängiger Höhe, die Wiederherstellung aus einem leeren Filter und das Zurücksetzen bei. Ein Routenplaner oder Standortdienst ist nicht erforderlich.
05
Framework7-Designsystem: Quellen und Umfang
Framework7 Core/Vue 9.2.0 mit überprüftem iOS-Modus. Originale Skizzenaufgaben und dekorative Illustrationen. Der Abschluss ist ein umkehrbarer lokaler Status; Karte, Standortdienst, Gerätespeicher und geroutete App sind nicht angebunden.
