# Framework7 — système de design

## Aperçu de l’interface du système de design Framework7

Ouvrez l’action native Swipeout d’une étude, marquez-la comme esquissée, puis examinez la liste filtrée.

## 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.

### Couleurs du thème iOS vérifiées

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --f7-theme-color | #007aff | Couleur principale par défaut, vérifiée dans le document iOS réel. |
| --f7-theme-color-rgb | 0, 122, 255 | Canaux RVB utilisés pour les calculs d’opacité. |
| --f7-theme-color-shade | #0066d6 | Nuance dérivée de la couleur principale. |
| --f7-theme-color-tint | #298fff | Teinte dérivée de la couleur principale. |
| colors.green | #4cd964 | Nom de couleur verte par défaut utilisé pour marquer l’achèvement dans Swipeout. |
| colors.red | #ff3b30 | Référence du rôle rouge par défaut ; aucune action destructive dans cet exemple. |
| --f7-text-color | #000 | Couleur de texte iOS native par défaut ; le texte original de la page utilise #26343f. |
### Texte natif iOS et dimensions de liste

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --f7-font-size | 14px | Taille de texte de base du framework. |
| --f7-font-family | -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif | Pile de styles de la plateforme iOS fournie. |
| --f7-line-height | 1.4 | Hauteur de ligne de base d’iOS. |
| --f7-list-font-size | 17px | Texte natif des listes iOS. |
| --f7-list-item-padding-vertical | 12px | Marge intérieure native des lignes. |
| --f7-list-item-padding-horizontal | 16px | Marge intérieure horizontale native. |
| --f7-list-item-min-height | 52px | Hauteur minimale native des lignes iOS. |
| --f7-list-item-media-margin | 16px | Espacement natif des éléments multimédias. |
| --f7-list-inset-border-radius | 24px | Référence de rayon des listes à marges intérieures natives. |
| --f7-list-item-subtitle-font-size | 15px | Par défaut ; le spécimen original remplace les sous-titres par une taille de 11px. |
| --f7-list-item-text-font-size | 15px | Par défaut ; le spécimen original remplace les descriptions par une taille de 12px. |
| --f7-list-item-text-line-height | 21px | Hauteur de ligne par défaut des descriptions natives. |
### Composition intégrée originale explicitement définie

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Page title | 35px / 1.15; 29px narrow | Hiérarchie originale. |
| Advice title | Georgia, serif; 29px | Titre éditorial original. |
| Page/grid spacing | 32px page; 26px columns; 28px hero-to-grid | Valeurs originales de l’application. |
| Main panel | 22px inset; 16px narrow; 16px radius | Cadrage original, indépendant des valeurs par défaut des listes natives à marges intérieures. |
| Grid breakpoint | 780px | Placer le panneau de conseils sous la liste de croquis. |
| Artwork | 48×62px list thumbnails; 170px tall route illustration | CSS original, sans service de carte ni d’image. |
| Embedding reset | html/body/#app/.framework7-root height:auto; min-height:0 | Adaptation explicite du spécimen, et non recommandations pour une application plein écran. |
## Guide complet du système de design Framework7

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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é.

1. Activez Actions pour River steps, puis choisissez Marquer comme esquissée.

2. Passez à Esquissées et vérifiez que seule River steps reste visible.

3. Rouvrez ses actions pour annuler, ou réinitialisez toute la liste.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

```
<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>
```

Référence du code

- theme="ios" est une prop directe de f7-app dans cette version.

- Le contrôle Actions visible appelle l’API native swipeout.open API.

- Le marquage modifie l’objet Vue ; il ne supprime pas la ligne du DOM.

### Mise en page intégrée d’origine complète

Remplacements liés à la hauteur du contenu, retour à la ligne des lignes étroites et illustrations de croquis d’origine.

```
html,body,#app,.framework7-root{height:auto!important;min-height:0!important;overflow:visible!important;position:relative!important}body{margin:0;background:#f1f3f6;color:#26343f}*{box-sizing:border-box}.sketch-shell{max-width:1120px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;color:#6b7882}h1{font-size:35px;line-height:1.15;max-width:680px;margin:12px 0}header>p:last-child{font-size:15px;line-height:1.6;max-width:650px;color:#687986}.sketch-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:26px;margin-top:28px}.sketch-list{background:white;border:1px solid #dce3e9;border-radius:16px;padding:22px;min-width:0}.list-heading{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.list-heading h2{font-size:20px;margin:0}.list-heading span{font-size:12px;color:#6d7b84}.study-list{margin:24px -22px}.study-list .item-title-row{flex-wrap:wrap;gap:7px}.study-list .item-title{white-space:normal;overflow:visible}.study-list .item-after{margin-left:0}.study-list .item-subtitle{white-space:normal;font-size:11px;color:#72808a}.study-list .item-text{font-size:12px;line-height:1.5;max-height:none;-webkit-line-clamp:unset}.study-list .item-media{align-self:flex-start;padding-top:17px}.study-art{width:48px;height:62px;background:#e0e9ef;border-radius:7px;position:relative;overflow:hidden}.study-art i,.study-art b{position:absolute;display:block}.river i{width:55px;height:28px;top:30px;left:0;background:#8eaebe;transform:rotate(-18deg)}.river b{width:24px;height:40px;left:0;top:0;background:repeating-linear-gradient(#c5c1b6 0 8px,#a7a295 8px 10px)}.market{background:#ecdcbf}.market i{width:60px;height:24px;left:-5px;top:12px;background:repeating-linear-gradient(90deg,#bc735f 0 10px,#f9e9d1 10px 20px);transform:rotate(8deg)}.market b{width:26px;height:35px;left:11px;top:37px;background:#7b8072}.window{background:#ece9df}.window i{width:25px;height:29px;left:9px;top:9px;border:5px solid #617381}.window b{width:28px;height:55px;left:22px;top:25px;background:#b1b9b9;transform:skew(25deg)}.result{font-size:12px;line-height:1.6;color:#4f6a79;min-height:38px}.empty{padding:30px 12px;text-align:center;font-size:13px;line-height:1.6}.sketch-layout aside{padding:0 4px;min-width:0}.route-art{height:170px;border-radius:14px;background:#dce8df;position:relative;overflow:hidden;margin-bottom:24px}.route-art i{position:absolute;width:190px;height:190px;border:21px solid #aac6b4;border-radius:50%;left:55px;top:34px}.route-art b{position:absolute;width:90px;height:190px;border:15px solid #f4eed9;border-radius:50%;left:23px;top:-17px;transform:rotate(-25deg)}.route-art span,.route-art em{position:absolute;width:13px;height:13px;border:3px solid white;background:#537b70;border-radius:50%;left:67px;top:111px}.route-art em{left:167px;top:52px}.sketch-layout aside h2{font-family:Georgia,serif;font-size:29px;font-weight:400}.sketch-layout ol{padding-left:20px}.sketch-layout li{padding:0 0 20px;font-size:13px;line-height:1.6}.sketch-layout li strong,.sketch-layout li span{display:block}.sketch-layout li span{color:#71808a;font-size:12px;margin-top:5px}.aside-note{font-size:11px;line-height:1.6;color:#7b8790}@media(max-width:780px){.sketch-layout{grid-template-columns:minmax(0,1fr)}.sketch-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.sketch-shell{padding:14px}.sketch-list{padding:16px}.study-list{margin:20px -16px}.study-art{width:34px}.study-list .item-media{--f7-list-item-media-margin:10px}.study-list .item-inner{min-width:0}.study-list .item-title{font-size:15px}}
```

Référence du code

- 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.

## 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.

```
// npm create vite@latest field-sketchbook -- --template vue
// cd field-sketchbook && npm install
// npm install framework7@9.2.0 framework7-vue@9.2.0
// 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

```
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.
```

## 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.

- Installation de Vue Intégration de Core/Vue.

- Composant d’application Propriétés directes du thème et de l’application.

- Swipeout Conteneurs d’actions, comportement natif d’ouverture et de fermeture, et suppression.

- Élément de liste Emplacements des médias, API de titre et de description.

- Segmented Présentation des sélections groupées.

- Variables CSS Typographie et géométrie adaptées à la plateforme.

- Thèmes de couleurs Rôles du thème et couleurs nommées.

- Mise en page de l’application Cadre d’application standard en plein écran.

## Framework7 Ressources associées au système de design

### gluestack UI

Créez une liste de préparation avec les véritables créateurs Button et Input de gluestack, les couleurs sémantiques explicites de la v5 et le code source complet de React Native Web. Examinez la validation, les actions au clavier, l’identité stable des éléments et le calcul local de la progression de préparation.

### Headless UI

Headless UI fournit des composants d’interaction React sans style prédéfini pour les boîtes de dialogue, les listes de sélection et les interrupteurs. Ce guide porte sur la composition de leur comportement natif en matière de focus, de sélection et de fenêtres contextuelles avec du CSS ordinaire, à partir d’un flux de partage de documents comme exemple fonctionnel.

### HeroUI

Une référence HeroUI v3 avec de véritables variables sémantiques CSS, des commandes composées React, des surfaces claires et sombres, et une méthode d’export d’images opérationnelle.


- [Référence de mise en œuvre](https://framework7.io/vue/swipeout.html)
- [Source](https://framework7.io/docs/color-themes)
- [Source](https://framework7.io/docs/css-variables)
- [Source](https://framework7.io/vue/app-layout.html)
- [Consultez la spécification associée](https://framework7.io/vue/initialize-app.html)
- [Consultez la spécification associée](https://framework7.io/vue/app.html)
- [Consultez la spécification associée](https://framework7.io/vue/list-item.html)
- [Consultez la spécification associée](https://framework7.io/vue/swipeout.html)
- [Consultez la spécification associée](https://framework7.io/vue/segmented.html)
- [Consultez la spécification associée](https://framework7.io/vue/app-layout.html)
- [Consultez la spécification associée](https://framework7.io/vue/installation.html)
- [Référence du code](https://framework7.io/vue/swipeout.html)
- [Référence du code](https://framework7.io/docs/css-variables)
- [Installation de Vue Intégration de Core/Vue.](https://framework7.io/vue/installation.html)
- [Composant d’application Propriétés directes du thème et de l’application.](https://framework7.io/vue/app.html)
- [Swipeout Conteneurs d’actions, comportement natif d’ouverture et de fermeture, et suppression.](https://framework7.io/vue/swipeout.html)
- [Élément de liste Emplacements des médias, API de titre et de description.](https://framework7.io/vue/list-item.html)
- [Segmented Présentation des sélections groupées.](https://framework7.io/vue/segmented.html)
- [Variables CSS Typographie et géométrie adaptées à la plateforme.](https://framework7.io/docs/css-variables)
- [Thèmes de couleurs Rôles du thème et couleurs nommées.](https://framework7.io/docs/color-themes)
- [Mise en page de l’application Cadre d’application standard en plein écran.](https://framework7.io/vue/app-layout.html)