# sistema di design di Framework7

## Anteprima dell’interfaccia del sistema di design di Framework7

Apri l’azione swipeout nativa di uno studio, contrassegnalo come schizzato ed esamina l’elenco filtrato.

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

### Colori del tema iOS effettivamente applicati

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --f7-theme-color | #007aff | Colore primario predefinito, verificato nel documento iOS effettivo. |
| --f7-theme-color-rgb | 0, 122, 255 | Canali RGB per i calcoli dell’opacità. |
| --f7-theme-color-shade | #0066d6 | Tonalità scura del primario derivata. |
| --f7-theme-color-tint | #298fff | Tonalità chiara del primario derivata. |
| colors.green | #4cd964 | Colore denominato verde predefinito, usato per il completamento tramite swipeout. |
| colors.red | #ff3b30 | Riferimento per il ruolo rosso predefinito; in questo esempio non ci sono azioni distruttive. |
| --f7-text-color | #000 | Testo predefinito nativo di iOS; il testo originale della pagina usa #26343f. |
### Testo e geometria degli elenchi nativi di iOS

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --f7-font-size | 14px | Dimensione base del testo del framework. |
| --f7-font-family | -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif | Stack della piattaforma iOS distribuito. |
| --f7-line-height | 1.4 | Altezza di riga di base di iOS. |
| --f7-list-font-size | 17px | Testo degli elenchi nativi di iOS. |
| --f7-list-item-padding-vertical | 12px | Rientro nativo delle righe. |
| --f7-list-item-padding-horizontal | 16px | Spaziatura interna orizzontale nativa. |
| --f7-list-item-min-height | 52px | Altezza minima delle righe native di iOS. |
| --f7-list-item-media-margin | 16px | Spazio nativo tra i contenuti multimediali. |
| --f7-list-inset-border-radius | 24px | Riferimento per il raggio degli elenchi nativi rientrati. |
| --f7-list-item-subtitle-font-size | 15px | Predefinito; nell’esempio originale i sottotitoli sono impostati a 11px. |
| --f7-list-item-text-font-size | 15px | Predefinito; nell’esempio originale le descrizioni sono impostate a 12px. |
| --f7-list-item-text-line-height | 21px | Altezza di riga predefinita delle descrizioni native. |
### Composizione incorporata originale esplicita

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Page title | 35px / 1.15; 29px narrow | Gerarchia originale. |
| Advice title | Georgia, serif; 29px | Titolo editoriale originale. |
| Page/grid spacing | 32px page; 26px columns; 28px hero-to-grid | Valori originali dell’applicazione. |
| Main panel | 22px inset; 16px narrow; 16px radius | Inquadratura originale, indipendente dalle impostazioni predefinite degli elenchi rientrati nativi. |
| Grid breakpoint | 780px | Disponi il pannello con i suggerimenti sotto l’elenco degli schizzi. |
| Artwork | 48×62px list thumbnails; 170px tall route illustration | CSS originale, senza mappe né servizi di immagini. |
| Embedding reset | html/body/#app/.framework7-root height:auto; min-height:0 | Adattamento esplicito dell’esempio, non indicazioni per un’app a schermo intero. |
## Guida completa al sistema di design di Framework7

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

1. Attiva Azioni per Passi lungo il fiume e scegli Segna come schizzato.

2. Passa a Schizzati e verifica che resti visibile solo Passi lungo il fiume.

3. Riapri la relativa azione per annullare oppure ripristina l’intero elenco.

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

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

Riferimento del codice

- In questa versione, theme="ios" è una prop diretta di f7-app.

- Il controllo Actions visibile chiama l’API nativa swipeout.open API.

- Il contrassegno modifica l’oggetto Vue; non elimina la riga dal DOM.

### Layout originale completo incorporato

Sovrascritture per altezza determinata dal contenuto, righe che vanno a capo negli spazi stretti e illustrazioni originali degli schizzi.

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

Riferimento del codice

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

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

```
// 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 per il tuo progetto

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

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

- Installazione di Vue Integrazione di Core/Vue.

- Componente dell’app Prop dirette per tema e applicazione.

- Swipeout Contenitori delle azioni, apertura e chiusura native e comportamento di eliminazione.

- Elemento dell’elenco API per aree multimediali, titolo e descrizione.

- Segmentato Presentazione della selezione raggruppata.

- Variabili CSS Tipografia e geometria dipendenti dalla piattaforma.

- Temi di colore Ruoli del tema e colori denominati.

- Layout dell’app Struttura standard di un’app a schermo intero.

## Sistema di design Framework7: risorse correlate

### gluestack UI

Crea una checklist per un kit da campo con i creatori core Button e Input effettivi di gluestack, i colori semantici v5 espliciti e il codice sorgente completo per React Native Web. Esamina la convalida, le azioni da tastiera, l’identità stabile degli elementi e l’avanzamento della preparazione calcolato localmente.

### Headless UI

Headless UI offre componenti di interazione senza stile per React, destinati a finestre di dialogo, listbox e interruttori. Questa guida si concentra sulla composizione del comportamento nativo di focus, selezione e popup con CSS ordinario, usando come esempio pratico un flusso di condivisione dei documenti.

### HeroUI

Una guida di riferimento per HeroUI v3 con variabili CSS semantiche effettive, controlli composti React, superfici chiare e scure e una procedura funzionante per esportare immagini.


- [Riferimento per l’implementazione](https://framework7.io/vue/swipeout.html)
- [Fonte](https://framework7.io/docs/color-themes)
- [Fonte](https://framework7.io/docs/css-variables)
- [Fonte](https://framework7.io/vue/app-layout.html)
- [Leggi la specifica di supporto](https://framework7.io/vue/initialize-app.html)
- [Leggi la specifica di supporto](https://framework7.io/vue/app.html)
- [Leggi la specifica di supporto](https://framework7.io/vue/list-item.html)
- [Leggi la specifica di supporto](https://framework7.io/vue/swipeout.html)
- [Leggi la specifica di supporto](https://framework7.io/vue/segmented.html)
- [Leggi la specifica di supporto](https://framework7.io/vue/app-layout.html)
- [Leggi la specifica di supporto](https://framework7.io/vue/installation.html)
- [Riferimento del codice](https://framework7.io/vue/swipeout.html)
- [Riferimento del codice](https://framework7.io/docs/css-variables)
- [Installazione di Vue Integrazione di Core/Vue.](https://framework7.io/vue/installation.html)
- [Componente dell’app Prop dirette per tema e applicazione.](https://framework7.io/vue/app.html)
- [Swipeout Contenitori delle azioni, apertura e chiusura native e comportamento di eliminazione.](https://framework7.io/vue/swipeout.html)
- [Elemento dell’elenco API per aree multimediali, titolo e descrizione.](https://framework7.io/vue/list-item.html)
- [Segmentato Presentazione della selezione raggruppata.](https://framework7.io/vue/segmented.html)
- [Variabili CSS Tipografia e geometria dipendenti dalla piattaforma.](https://framework7.io/docs/css-variables)
- [Temi di colore Ruoli del tema e colori denominati.](https://framework7.io/docs/color-themes)
- [Layout dell’app Struttura standard di un’app a schermo intero.](https://framework7.io/vue/app-layout.html)