Interface multiplateforme et mobile · Nouvelle ressource
Framework7 — système de design.
Un carnet de croquis natif Framework7 avec de véritables actions swipeout, les valeurs explicites du thème iOS, une commande d’action accessible au clavier et une liste filtrée qui conserve les études terminées jusqu’à la réinitialisation.
Framework7 Core/Vue 9.2.0 en mode iOS vérifié ; spécimen d’application autonome à hauteur de contenu. · Référence de mise en œuvre
02
Référence de conception du système de design Framework7
Framework7 Core/Vue 9.2.0 avec le mode iOS explicitement activé. Les couleurs du thème ci-dessous ont été vérifiées dans le document affiché après l’initialisation ; les valeurs de liste et de typographie proviennent de la feuille de style iOS fournie. Les illustrations originales des notes et la mise en page extérieure sont décrites séparément.
Le système de design Framework7 fournit le comportement de l’application ainsi que ses composants
Framework7 fournit le comportement de l’application ainsi que ses composants
L’intégration Vue de Framework7 repose sur son environnement d’exécution applicatif principal. Le point d’entrée installe Framework7Vue sur Framework7 avant le montage de Vue, et f7-app initialise l’application qui gère le comportement de Swipeout. Importer seulement quelques wrappers Vue stylisés ne fournirait pas cette couche d’interaction native.
Le spécimen local reste volontairement limité : trois propositions originales de croquis, des actions de liste natives, un filtre d’achèvement et une réinitialisation. Il ne configure ni routeur, ni pont avec l’appareil, ni carte, ni carnet persistant. Ces fonctionnalités plus étendues doivent être ajoutées délibérément, plutôt que suggérées par un aperçu à l’apparence mobile.
Système de design Framework7 : vérifier que le thème de plateforme demandé a bien été appliqué
Vérifier que le thème de la plateforme demandé a bien été appliqué
Cette version accepte directement theme="ios" sur f7-app. Dans le composant examiné, un objet params de l’ancien style n’était pas une propriété équivalente fonctionnelle ; le système détectait donc initialement le mode Material sur ordinateur. L’exemple corrigé vérifie la classe html.ios générée et les valeurs du thème résolues avant de les présenter comme étant celles d’iOS.
En mode iOS vérifié, --f7-theme-color vaut #007aff, avec une nuance #0066d6 et une teinte #298fff. Une couleur de base, un mode de rendu de plateforme et des rôles de couleur générés pour Material sont des notions différentes. Lire la valeur calculée après l’initialisation permet d’éviter de documenter une couleur qui n’apparaît pas réellement dans l’exemple.
Système de design Framework7 : utiliser les lignes multimédias natives et signaler les styles typographiques personnalisés
Utiliser les lignes multimédias natives et signaler les styles typographiques personnalisés
La liste utilise f7-list media-list, avec des surfaces prononcées et des séparateurs iOS. Chaque ligne fournit le titre, le sous-titre et le texte au moyen du composant API natif list-item, et intègre de petites illustrations originales dans l’emplacement multimédia. La hauteur minimale des listes iOS est de cinquante-deux pixels, mais le contenu multimédia sur plusieurs lignes augmente naturellement la hauteur de ces lignes.
Par défaut, les sous-titres et les descriptions natifs ont une taille de quinze pixels. Pour ces courtes fiches d’étude, le spécimen utilise délibérément des textes secondaires de onze et douze pixels, tout en permettant aux titres et aux descriptions de passer sur plusieurs lignes. Ces choix locaux sont indiqués séparément des variables officielles, afin de permettre de reproduire aussi bien les valeurs par défaut que celles du spécimen.
Système de design Framework7 : un Swipeout est une configuration d’élément de liste avec un conteneur d’actions
Un Swipeout est une configuration d’élément de liste associée à un conteneur d’actions
Le balayage est activé sur la ligne, qui contient f7-swipeout-actions à droite. f7-swipeout-button fournit la surface interactive et ferme la zone révélée après activation. L’application bascule le marqueur done de la note au lieu d’activer la prop delete, car l’action est réversible et la note doit rester disponible.
Le cœur natif permet de révéler les mêmes actions par un geste. Un contrôle Actions visible appelle aussi f7.swipeout.open pour l’ID stable de la ligne. La commande est ainsi facile à trouver pour les utilisateurs sur ordinateur et au clavier, sans obliger quiconque à découvrir un geste horizontal masqué.
Activez Actions pour River steps, puis choisissez Marquer comme esquissée.
Passez à Esquissées et vérifiez que seule River steps reste visible.
Rouvrez ses actions pour annuler, ou réinitialisez toute la liste.
Système de design Framework7 : conservez l’état d’achèvement dans le modèle plutôt que dans un élément supprimé
Conserver l’état d’achèvement dans le modèle plutôt que dans un élément supprimé
Les trois objets note restent dans le tableau Vue. Une collection calculée les filtre uniquement lorsque le segment Esquissées est sélectionné, et une autre valeur calculée compte les études terminées. Des ID stables relient chaque contrôle d’ouverture d’action natif à la bonne ligne, même après le filtrage.
Le libellé de l’action passe de Marquer comme esquissée à Annuler le marquage pour une note terminée. Aucun raccourci de balayage excessif ne déclenche une action de manière inattendue après un long glissement, et aucune suppression automatique ne retire un élément sans mettre à jour le modèle de l’application. La même note peut revenir à la liste active sans devoir être recréée à partir de données incomplètes.
Système de design Framework7 : faites de l’état vide du filtre une indication sur la prochaine action
Préciser l’action suivante dans l’état vide du filtre
Lorsque le filtre Esquissées ne contient aucune note, le panneau indique qu’aucune étude n’a été marquée et propose Afficher toutes les études. Ce contrôle modifie le même modèle de filtre que les boutons segmentés. Il offre un véritable moyen de revenir à la liste, contrairement à une illustration décorative d’état vide sans aucune suite possible.
Réinitialiser efface tous les marqueurs d’achèvement, revient à Toutes les études et indique que les trois notes sont de nouveau prêtes. Le texte d’état précise la note concernée après chaque action individuelle. Un rechargement restaure également les données d’exemple initiales, car cet aperçu n’enregistre pas de carnet sur un appareil ou un serveur.
Système de design Framework7 : adaptez avec soin un framework d’application complet à une intégration dont la hauteur dépend du contenu
Adaptez avec soin un framework d’application complet à une intégration dont la hauteur dépend du contenu
Framework7 prend normalement en charge les mises en page plein écran et les conteneurs de page. Cet exemple ne comporte aucune page avec routage et remplace volontairement la hauteur et le débordement du document racine afin que son contenu détermine la hauteur de l’iframe. Conserver une hauteur minimale égale à celle de la fenêtre créerait une boucle de rétroaction avec un parent qui redimensionne l’iframe en fonction du document enfant.
La liste native reste dans la racine de l’application initialisée. La mise en page d’origine en deux colonnes, avec croquis et conseils, passe en une seule colonne à 780px. Les lignes plus étroites réduisent la largeur des miniatures tout en conservant le retour à la ligne des descriptions. Ces choix d’intégration ne doivent pas être repris tels quels dans une application mobile classique avec routage, qui s’appuie sur le modèle de défilement des pages de Framework7.
Système de design Framework7 : associez les actions gestuelles à un contrôle explicite
Associez les actions gestuelles à un contrôle explicite
Le contrôle d’ouverture visible indique la ligne concernée, par exemple Actions pour River steps. Les choix segmentés exposent leur état pressé, le résultat est présenté dans une région d’état et l’illustration d’origine est décorative. L’utilisateur peut consulter la même action sans geste tactile et entendre ensuite quelle note a été modifiée.
Le test local a utilisé le contrôle visible pour révéler la véritable surface native de balayage, marquer River steps, filtrer la liste et vérifier qu’il restait une seule ligne liée au modèle. Il a également vérifié le thème iOS rendu et la mise en page à 280px. La seule présence du balayage CSS ne suffirait pas à garantir ces comportements.
Conservez le nom de la note dans le libellé du contrôle d’ouverture des actions.
Privilégiez une action réversible dans le modèle plutôt que de supprimer uniquement l’élément du DOM.
Testez la collection filtrée et l’état après l’action native.
Système de design Framework7 : installez des versions correspondantes du cœur et de Vue
Installer des versions compatibles de Core et de Vue
Le point d’entrée importe Framework7 depuis framework7/bundle, Framework7Vue depuis framework7-vue et la feuille de style du bundle. Celui-ci contient le module Swipeout nécessaire à cet exemple. Framework7.use(Framework7Vue) est appelé avant que createApp ne monte le SFC complet.
Les deux packages sont épinglés à la version 9.2.0. Le SFC complet et la feuille de style d’origine sont fournis ci-dessus, et la racine HTML dans la configuration Vite contient bien le point de montage de l’application. Aucun package d’icônes n’est nécessaire pour les illustrations d’origine visibles ; le cœur du framework CSS intègre sa propre petite police d’icônes.
Système de design Framework7 : exemples de composants
Carnet de croquis complet avec balayage natif
f7App, boutons segmentés, lignes de liste multimédia et actions natives de balayage avec état persistant dans le modèle 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>
Cette réinitialisation est destinée à un exemple intégré, et non à la structure d’une application plein écran avec routage.
Les remplacements du sous-titre et de la description de la liste sont explicites.
04
Système de design Framework7 : configuration de l’agent
Point de départ de l’implémentation
Versions correspondantes de Framework7/Core Vue 9.2.0 vérifiées. Il s’agit d’un exemple de composants initialisé avec des remplacements liés à la hauteur du contenu, et non d’une application mobile complète avec routage.
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 pour votre projet
Prompt pour l’agent IA
Utilisez Framework7 Core/Vue 9.2.0 avec le carnet de croquis Field fourni, le thème explicite theme="ios" et la structure native de liste multimédia avec balayage. Conservez les trois études, leurs marqueurs done réversibles et le filtrage Toutes les études/Esquissées. Les boutons Actions visibles doivent appeler f7.swipeout.open ; l’achèvement bascule l’état du modèle au lieu de supprimer la ligne. Conservez type="button" sur f7-button, ainsi que la sémantique de bouton de la commande de balayage et la prise en charge de la barre d’espace. Gardez l’intégration CSS dont la hauteur dépend du contenu, le moyen de sortir du filtre vide et la réinitialisation. Aucun itinéraire ni service de localisation n’est nécessaire.
05
Système de design Framework7 : sources et périmètre
Framework7 Core/Vue 9.2.0 avec le mode iOS vérifié. Prompts de croquis originaux et illustrations décoratives. L’état d’achèvement est local et réversible ; aucune carte, aucun service de géolocalisation, aucun stockage sur l’appareil ni aucune application avec navigation ne sont connectés.
