Interfaccia utente multipiattaforma e mobile · Nuova risorsa
sistema di design di Framework7.
Uno sketchbook nativo Framework7 con azioni swipeout reali, valori espliciti del tema iOS, un’apertura delle azioni accessibile da tastiera e un elenco filtrato che mantiene gli studi completati fino al ripristino.
Framework7 Core/Vue 9.2.0 in modalità iOS verificata; esempio di app autonoma con altezza adattata al contenuto. · Riferimento per l’implementazione
02
Riferimento di progettazione per il sistema di design di Framework7
Framework7 Core/Vue 9.2.0 con modalità iOS esplicita. I colori del tema riportati sotto sono stati verificati nel documento renderizzato dopo l’inizializzazione; i valori di elenco e tipografia provengono dal foglio di stile iOS distribuito. Le illustrazioni originali delle note e il layout esterno sono indicati separatamente.
Il sistema di design di Framework7 fornisce il comportamento dell’app oltre ai componenti
Framework7 fornisce il comportamento dell’app oltre ai componenti
L’integrazione Vue di Framework7 si basa sul runtime applicativo principale. Il punto di ingresso installa Framework7Vue su Framework7 prima di montare Vue, mentre f7-app inizializza l’applicazione che gestisce il comportamento swipeout. Importare solo alcuni wrapper Vue con stili non fornirebbe questo livello di interazione nativo.
L’esempio locale mantiene un ambito ridotto: tre tracce originali per gli schizzi, azioni native dell’elenco, un filtro di completamento e un ripristino. Non configura un router, un bridge per il dispositivo, una mappa né un taccuino persistente. Queste funzionalità più ampie dell’app vanno aggiunte intenzionalmente, non lasciate intendere da un’anteprima dall’aspetto mobile.
sistema di design di Framework7: verifica che il tema della piattaforma richiesto sia stato applicato
Verifica che il tema della piattaforma richiesto sia stato applicato
Questa versione accetta direttamente theme="ios" su f7-app. Un oggetto params nel vecchio formato non era una proprietà equivalente funzionante nel componente esaminato e inizialmente lasciava l’autorilevamento desktop in modalità Material. L’esempio corretto controlla la classe html.ios renderizzata e i valori del tema risolti prima di descriverli come iOS.
In modalità iOS verificata, --f7-theme-color è #007aff, con tonalità scura #0066d6 e tonalità chiara #298fff. Un colore di base del tema, una modalità di rendering della piattaforma e i ruoli cromatici generati di Material sono concetti distinti. Leggere il valore calcolato dopo l’inizializzazione evita di documentare un colore che l’esempio non visualizza effettivamente.
sistema di design di Framework7: usa righe multimediali native e segnala le personalizzazioni tipografiche locali
Usa righe multimediali native e segnala le personalizzazioni tipografiche locali
L’elenco usa f7-list media-list, con superfici marcate e separatori iOS. Ogni riga fornisce titolo, sottotitolo e testo tramite API nativo list-item, con piccole illustrazioni originali nello spazio multimediale. L’altezza minima predefinita delle righe iOS è di cinquantadue pixel, ma i contenuti multimediali su più righe rendono naturalmente le righe più alte.
Le impostazioni predefinite native per sottotitoli e descrizioni sono di quindici pixel. L’esempio usa intenzionalmente testi di supporto di undici e dodici pixel per queste brevi schede di studio, consentendo ai titoli e alle descrizioni di andare a capo. Queste scelte locali sono indicate separatamente dalle variabili ufficiali, così da poter riprodurre sia le impostazioni predefinite sia l’esempio.
sistema di design di Framework7: uno Swipeout è una configurazione di elemento di elenco con un contenitore di azioni
Uno Swipeout è una configurazione di elemento di elenco con un contenitore di azioni
La riga ha swipeout abilitato e contiene f7-swipeout-actions sul lato destro. f7-swipeout-button fornisce la superficie interattiva e chiude l’area visualizzata dopo l’attivazione. L’applicazione attiva o disattiva il flag done della nota invece di abilitare la proprietà delete, perché il completamento è reversibile e il record deve restare disponibile.
Il core nativo può mostrare le stesse azioni con un gesto. Anche il controllo Azioni chiama f7.swipeout.open per l’ID stabile della riga. In questo modo il comando è individuabile da chi usa desktop e tastiera, senza obbligare tutti a scoprire un gesto orizzontale nascosto.
Attiva Azioni per Passi lungo il fiume e scegli Segna come schizzato.
Passa a Schizzati e verifica che resti visibile solo Passi lungo il fiume.
Riapri la relativa azione per annullare oppure ripristina l’intero elenco.
sistema di design di Framework7: mantieni il completamento nel modello, non in un elemento rimosso
Mantieni lo stato di completamento nel modello, non in un elemento rimosso
Tutti e tre gli oggetti nota rimangono nell’array Vue. Una raccolta calcolata li filtra solo quando è selezionata la sezione Sketched; un altro valore calcolato conta gli studi completati. Gli ID stabili collegano ogni comando nativo alla riga corretta anche dopo il filtraggio.
Per una nota completata, l’etichetta dell’azione cambia da Mark sketched a Undo sketch. Non c’è una scorciatoia di scorrimento eccessivo che esegue un’azione inaspettata dopo un trascinamento lungo, né un’eliminazione automatica che rimuove un elemento senza aggiornare il modello dell’applicazione. Lo stesso record può tornare all’elenco attivo senza essere ricreato a partire da dati incompleti.
Sistema di design Framework7: fai in modo che lo stato vuoto del filtro spieghi l’azione successiva
Fai in modo che lo stato vuoto del filtro indichi l’azione successiva
Quando Sketched non contiene record, il pannello spiega che nessuno studio è stato contrassegnato e offre Show all studies. Il controllo modifica lo stesso modello di filtro dei pulsanti segmentati. È un vero percorso di recupero, non un’illustrazione decorativa dello stato vuoto senza una destinazione.
Reset rimuove tutti gli indicatori di completamento, torna a All studies e comunica che tutti e tre gli studi sono di nuovo disponibili. Dopo le singole azioni, il testo di stato identifica la nota esatta. Anche un ricaricamento ripristina i dati di esempio originali, perché questa anteprima non salva il quaderno su un dispositivo o su un server.
Sistema di design Framework7: adatta con attenzione un framework per app complete all’integrazione con altezza determinata dal contenuto
Adatta con attenzione un framework per app complete all’integrazione con altezza determinata dal contenuto
Framework7 supporta normalmente layout di app a schermo intero e contenitori di pagina. Questo esempio non ha pagine gestite dal router e sovrascrive intenzionalmente l’altezza e l’overflow del documento radice, così che l’altezza dell’iframe sia determinata dal contenuto. Mantenere un’altezza minima pari a quella del viewport creerebbe un ciclo di retroazione con un contenitore esterno che ridimensiona l’iframe in base al documento interno.
L’elenco nativo rimane all’interno della radice dell’app inizializzata. Il layout originale a due colonne, con gli schizzi e i suggerimenti, si dispone in verticale a 780px; nelle righe più strette, la larghezza delle miniature si riduce e le descrizioni continuano ad andare a capo. Queste scelte per l’incorporamento non vanno copiate integralmente in una normale app mobile con routing che si affida al modello di scorrimento delle pagine di Framework7.
Sistema di design Framework7: affianca alle azioni gestuali un controllo esplicito
Affianca alle azioni gestuali un controllo esplicito
Il comando visibile identifica la propria riga, per esempio Actions for River steps. Le opzioni segmentate espongono lo stato premuto, il risultato viene annunciato in una regione di stato e l’illustrazione originale è decorativa. L’utente può consultare la stessa azione senza usare un gesto tattile e poi sentire quale nota è stata modificata.
Il test locale ha usato il comando visibile per mostrare la vera superficie nativa di swipeout, ha contrassegnato River steps, ha filtrato l’elenco e verificato che rimanesse una riga collegata al modello. Ha inoltre controllato il tema iOS visualizzato e il layout a 280px. La sola presenza di swipeout CSS non basterebbe a garantire nessuno di questi comportamenti.
Mantieni l’etichetta del comando di azione associata al nome del record.
Usa un’azione reversibile sul modello invece di eliminare solo il DOM.
Dopo l’azione nativa, verifica la raccolta filtrata e lo stato.
Sistema di design Framework7: installa versioni compatibili di Core e Vue
Installa versioni compatibili di Core e Vue
Il punto d’ingresso importa Framework7 da framework7/bundle, Framework7Vue da framework7-vue e il foglio di stile del bundle. Il bundle include il modulo Swipeout richiesto da questo esempio. Framework7.use(Framework7Vue) viene eseguito prima che createApp monti l’intero SFC.
Entrambi i pacchetti sono fissati alla versione 9.2.0. Sono forniti l’intero SFC e il foglio di stile originale qui sopra; la radice HTML nella configurazione Vite è associata al punto di montaggio dell’app previsto. Non serve alcun pacchetto di icone per le illustrazioni originali visibili: il core CSS del framework include il proprio piccolo font interno di icone.
Sistema di design Framework7: esempi di componenti
Quaderno di schizzi completo con swipeout nativo
f7App, pulsanti segmentati, righe multimediali e azioni native di swipeout con stato persistente nel modello 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>
Questa configurazione è pensata per un esempio incorporato, non per il contenitore di un’app a schermo intero con routing.
Le sovrascritture di sottotitolo e descrizione degli elementi dell’elenco sono esplicite.
04
Sistema di design Framework7: configurazione dell’agent
Punto di partenza per l’implementazione
Versioni compatibili di Framework7/Core Vue 9.2.0 verificate. È un esempio di componenti inizializzato con sovrascritture per l’altezza determinata dal contenuto, non un’applicazione mobile completa con routing.
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
Un prompt per il tuo progetto
Prompt per l’agente
Usa Framework7 Core/Vue 9.2.0 con il quaderno Field fornito, theme="ios" esplicito e la struttura nativa di swipeout per elenchi multimediali. Mantieni i tre studi di schizzi, i relativi indicatori di completamento reversibili e il filtro All/Sketched. I pulsanti Actions visibili devono chiamare f7.swipeout.open; il completamento deve modificare lo stato del modello, non eliminare la riga. Mantieni type="button" su f7-button, la semantica dei pulsanti del comando swipeout e il supporto alla barra spaziatrice. Conserva l’impostazione per l’incorporamento con altezza determinata dal contenuto CSS, il recupero dal filtro vuoto e il ripristino. Non serve alcun servizio di itinerari o di localizzazione.
05
Sistema di design Framework7: fonti e ambito
Framework7 Core/Vue 9.2.0 con modalità iOS verificata. Tracce originali per gli schizzi e illustrazioni decorative. Il completamento è uno stato locale reversibile; non sono collegati mappe, servizi di localizzazione, archiviazione sul dispositivo o app con routing.
