# Sistema de diseño de Framework7

## Vista previa de la interfaz del sistema de diseño de Framework7

Abre la acción swipeout nativa de un estudio, márcalo como esbozado y revisa la lista filtrada.

## Referencia de diseño del sistema de diseño de Framework7

Core/Vue 9.2.0 de Framework7 con el modo iOS configurado explícitamente. Los colores del tema que aparecen a continuación se verificaron en el documento renderizado después de la inicialización; los valores de la lista y la tipografía proceden de la hoja de estilos de iOS incluida. Las ilustraciones originales de las notas y la disposición exterior se identifican por separado.

### Colores del tema de iOS resueltos

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --f7-theme-color | #007aff | Color primario predeterminado, verificado en el documento real de iOS. |
| --f7-theme-color-rgb | 0, 122, 255 | Canales RGB para los cálculos de alfa. |
| --f7-theme-color-shade | #0066d6 | Tono derivado del color primario. |
| --f7-theme-color-tint | #298fff | Matiz derivado del color primario. |
| colors.green | #4cd964 | Color con nombre verde predeterminado, usado para completar mediante swipeout. |
| colors.red | #ff3b30 | Referencia del rol rojo predeterminado; este ejemplo no incluye acciones destructivas. |
| --f7-text-color | #000 | Texto predeterminado nativo de iOS; el texto original de la página usa #26343f. |
### Texto nativo y geometría de lista de iOS

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --f7-font-size | 14px | Tamaño de texto base del framework. |
| --f7-font-family | -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif | Pila de plataforma de iOS incluida. |
| --f7-line-height | 1.4 | Altura de línea base de iOS. |
| --f7-list-font-size | 17px | Texto nativo de lista de iOS. |
| --f7-list-item-padding-vertical | 12px | Sangría nativa de fila. |
| --f7-list-item-padding-horizontal | 16px | Margen interior horizontal nativo. |
| --f7-list-item-min-height | 52px | Altura mínima de fila nativa de iOS. |
| --f7-list-item-media-margin | 16px | Separación nativa de elementos multimedia. |
| --f7-list-inset-border-radius | 24px | Referencia del radio nativo de la lista con sangría. |
| --f7-list-item-subtitle-font-size | 15px | Valor predeterminado; el ejemplo original sobrescribe los subtítulos y los establece en 11px. |
| --f7-list-item-text-font-size | 15px | Valor predeterminado; el ejemplo original sobrescribe las descripciones y las establece en 12px. |
| --f7-list-item-text-line-height | 21px | Altura de línea predeterminada para descripciones nativas. |
### Composición original integrada explícitamente

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Page title | 35px / 1.15; 29px narrow | Jerarquía original. |
| Advice title | Georgia, serif; 29px | Encabezado editorial original. |
| Page/grid spacing | 32px page; 26px columns; 28px hero-to-grid | Valores originales de la aplicación. |
| Main panel | 22px inset; 16px narrow; 16px radius | Encuadre original, independiente de los valores predeterminados de las listas con sangría nativa. |
| Grid breakpoint | 780px | Coloca el panel de recomendaciones debajo de la lista de bocetos. |
| Artwork | 48×62px list thumbnails; 170px tall route illustration | CSS original, sin mapas ni servicios de imágenes. |
| Embedding reset | html/body/#app/.framework7-root height:auto; min-height:0 | Adaptación explícita del ejemplo, no una guía para aplicaciones a pantalla completa. |
## Guía completa del sistema de diseño de Framework7

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## El sistema de diseño de Framework7 proporciona el comportamiento de la aplicación, además de componentes

### Framework7 proporciona el comportamiento de la aplicación, además de componentes

> La integración de Vue de Framework7 se basa en su entorno de ejecución de aplicaciones principal. El punto de entrada instala Framework7Vue en Framework7 antes de montar Vue, y f7-app inicializa la aplicación que controla el comportamiento de swipeout. Importar solo algunos envoltorios Vue con estilos no proporciona esa capa de interacción nativa.

El ejemplo local mantiene un alcance reducido: tres propuestas de bocetos originales, acciones de lista nativas, un filtro de finalización y una opción para restablecerlo. No configura un enrutador, un puente para dispositivos, un mapa ni un cuaderno persistente. Estas capacidades más amplias de la aplicación deben añadirse deliberadamente, en lugar de darse por incluidas en una vista previa con aspecto móvil.

Consulta la especificación complementaria

## Sistema de diseño de Framework7: verifica que se haya aplicado realmente el tema de plataforma solicitado

### Verifica que se haya aplicado realmente el tema de plataforma solicitado

Esta versión acepta theme="ios" directamente en f7-app. En el componente inspeccionado, un objeto params de estilo antiguo no era una propiedad equivalente funcional y, al principio, dejó la detección automática de escritorio en modo Material. El ejemplo corregido comprueba la clase html.ios renderizada y los valores resueltos del tema antes de describirlo como iOS.

En el modo iOS verificado, --f7-theme-color es #007aff, con un tono #0066d6 y un matiz #298fff. La semilla de un tema, un modo de renderizado de plataforma y los roles de color generados de Material son conceptos distintos. Leer el valor calculado después de la inicialización evita documentar un color que el ejemplo no muestra realmente.

Consulta la especificación complementaria

## Sistema de diseño de Framework7: usa filas multimedia nativas y señala las sobrescrituras tipográficas locales

### Usa filas multimedia nativas y señala las sobrescrituras tipográficas locales

La lista usa f7-list media-list con superficies sólidas y divisores de iOS. Cada fila proporciona título, subtítulo y texto mediante el API nativo de list-item, e incluye pequeñas ilustraciones originales en el espacio multimedia. La altura mínima predeterminada de las listas de iOS es de cincuenta y dos píxeles, pero el contenido multimedia de varias líneas hace que estas filas sean naturalmente más altas.

Los valores predeterminados de iOS para subtítulos y descripciones son de quince píxeles. El ejemplo usa deliberadamente texto complementario de once y doce píxeles para estas breves tarjetas de estudio, y permite que los títulos y las descripciones ocupen varias líneas. Estas decisiones locales se indican por separado de las variables oficiales para que el lector pueda reproducir tanto los valores predeterminados como los del ejemplo.

Consulta la especificación complementaria

## Sistema de diseño de Framework7: un swipeout es una configuración de elemento de lista con un contenedor de acciones

### Un swipeout es una configuración de elemento de lista con un contenedor de acciones

La fila tiene swipeout activado e incluye f7-swipeout-actions a la derecha. f7-swipeout-button proporciona la superficie de acción y cierra el área revelada al activarse. La aplicación alterna la marca done de la nota en lugar de activar la propiedad delete, porque la finalización es reversible y el registro debe seguir disponible.

El núcleo nativo puede revelar las mismas acciones mediante un gesto. Un control visible de Acciones también llama a f7.swipeout.open usando el ID estable de la fila. Así, el comando es fácil de descubrir para quienes usan escritorio o teclado, sin obligar a nadie a descubrir un gesto horizontal oculto.

1. Activa Acciones para Pasos junto al río y elige Marcar como esbozado.

2. Cambia a Esbozados y confirma que solo Pasos junto al río siga visible.

3. Vuelve a abrir su acción para deshacerla o restablece la lista completa.

Consulta la especificación complementaria

## Sistema de diseño Framework7: conserva el estado de finalización en el modelo, no en un elemento eliminado

### Mantén la finalización en el modelo, no en un elemento eliminado

Los tres objetos de notas permanecen en el array de Vue. Una colección calculada las filtra solo cuando se selecciona el segmento Bocetados, y otro valor calculado cuenta los estudios completados. Los ID estables conectan cada control nativo para abrir las acciones con la fila correcta, incluso después de filtrar.

La etiqueta de la acción cambia de Marcar como bocetado a Deshacer boceto cuando una nota está completada. No hay ningún atajo de deslizamiento excesivo que ejecute una acción inesperadamente tras arrastrar demasiado, ni eliminación automática que quite un elemento sin actualizar el modelo de la aplicación. El mismo registro puede volver a la lista activa sin tener que reconstruirlo a partir de datos incompletos.

Consulta la especificación complementaria

## Sistema de diseño Framework7: explica la siguiente acción en el estado vacío del filtro

### Haz que el estado vacío del filtro explique cuál es el siguiente paso

Cuando Bocetados no contiene registros, el panel indica que no se ha marcado ningún estudio y ofrece Mostrar todos los estudios. Ese control modifica el mismo modelo de filtro que los botones segmentados. Es una opción real para recuperarse, no una ilustración decorativa de estado vacío que no lleva a ninguna parte.

Restablecer borra todas las marcas de finalización, vuelve a Todos los estudios y anuncia que los tres vuelven a estar listos. El texto de estado identifica la nota exacta después de cada acción individual. Al recargar, también se recuperan los datos de muestra originales, ya que esta vista previa no guarda el cuaderno en un dispositivo ni en un servidor.

Consulta la especificación complementaria

## Sistema de diseño Framework7: adapta con cuidado un framework de aplicación completa para incrustar contenido según su altura

### Adapta con cuidado un framework de aplicación completa para incrustar contenido según su altura

Framework7 normalmente admite diseños de aplicación a pantalla completa y contenedores de página. Este ejemplo no tiene páginas con rutas y modifica intencionadamente la altura y el desbordamiento del documento raíz para que su contenido determine la altura del iframe. Mantener una altura mínima basada en la ventana gráfica crearía un bucle de realimentación con un contenedor principal que ajusta el iframe a la altura del documento hijo.

La lista nativa permanece dentro de la raíz de la aplicación inicializada. La disposición original en dos columnas —boceto y consejos— se apila a 780 px, y las filas más estrechas reducen el ancho de las miniaturas sin impedir que las descripciones ocupen varias líneas. Estas decisiones para la inserción no deben copiarse sin más en una aplicación móvil normal con rutas que dependa del modelo de desplazamiento de páginas de Framework7.

Consulta la especificación complementaria

## Sistema de diseño Framework7: acompaña las acciones por gesto de un control explícito

### Acompaña las acciones por gesto de un control explícito

El control visible para abrir las acciones identifica su fila, por ejemplo, Acciones para Pasos junto al río. Las opciones segmentadas exponen su estado de selección, el resultado se anuncia en una región de estado y la ilustración original es decorativa. El usuario puede consultar la misma acción sin usar un gesto táctil y, después, oír qué nota ha cambiado.

La prueba local usó el control visible para abrir la superficie nativa de deslizamiento, marcó Pasos junto al río, filtró la lista y confirmó que permanecía una fila respaldada por el modelo. También comprobó el tema de iOS renderizado y el diseño de 280 px. La mera presencia de swipeout CSS no demostraría ninguno de estos comportamientos.

- Mantén la etiqueta del control de acciones vinculada al nombre del registro.

- Conserva una acción reversible en el modelo en lugar de eliminar solo el DOM.

- Prueba la colección filtrada y el estado después de la acción nativa.

Consulta la especificación complementaria

## Sistema de diseño Framework7: instala versiones compatibles de Core y Vue

### Instala versiones compatibles de Core y Vue

La entrada importa Framework7 desde framework7/bundle, Framework7Vue desde framework7-vue y la hoja de estilos del bundle. El bundle contiene el módulo Swipeout que necesita este ejemplo. Framework7.use(Framework7Vue) se ejecuta antes de que createApp monte el SFC completo.

Ambos paquetes están fijados en la versión 9.2.0. Se proporcionan el SFC completo y la hoja de estilos original, y la raíz HTML de la configuración de Vite tiene el montaje de aplicación esperado. No hace falta ningún paquete de iconos para las ilustraciones originales visibles; el CSS principal del framework incorpora su propia pequeña fuente de iconos interna.

Consulta la especificación complementaria

## Sistema de diseño Framework7: ejemplos de componentes

### Cuaderno de bocetos completo con deslizamiento nativo

f7App, botones segmentados, filas de listas multimedia y acciones nativas de deslizamiento con estado persistente en el modelo de 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>
```

Referencia de código

- theme="ios" es una propiedad directa de f7-app en esta versión.

- El control visible Acciones llama a swipeout.open API nativo.

- Al marcar una nota, cambia el objeto de Vue; no se elimina la fila del DOM.

### Diseño original completo para incrustar

Ajustes de altura según el contenido, adaptación de filas estrechas e ilustraciones originales de bocetos.

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

Referencia de código

- Este restablecimiento es para un ejemplo incrustado, no para la estructura de una aplicación de pantalla completa con rutas.

- Las modificaciones de subtítulos y descripciones de listas se especifican explícitamente.

## Sistema de diseño Framework7: configuración del agente

### Punto de partida para la implementación

Se verificó la compatibilidad entre Framework7 y Core Vue 9.2.0. Es un ejemplo de componentes inicializado con ajustes para que la altura dependa del contenido, no una aplicación móvil completa con rutas.

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

### Una instrucción para tu proyecto

```
Usa Framework7 Core/Vue 9.2.0 con el cuaderno de bocetos Field proporcionado, theme="ios" explícito y la estructura nativa de deslizamiento de una lista multimedia. Conserva los tres estudios de bocetos, sus indicadores de finalización reversibles y el filtrado Todos/Bocetados. Los botones visibles Acciones deben llamar a f7.swipeout.open; completar una nota cambia el estado del modelo en lugar de eliminar la fila. Mantén type="button" en f7-button, así como la semántica de botón y la compatibilidad con la barra espaciadora del comando de deslizamiento. Conserva la configuración de inserción con altura según el contenido CSS, la opción para salir del filtro vacío y el restablecimiento. No se necesita ningún servicio de itinerarios ni de ubicación.
```

## Sistema de diseño Framework7: fuentes y alcance

Framework7 Core/Vue 9.2.0 con el modo iOS verificado. Indicaciones originales para los bocetos e ilustraciones decorativas. La finalización es un estado local reversible; no hay ningún mapa, servicio de ubicación, almacenamiento del dispositivo ni aplicación con rutas conectados.

- Instalación de Vue Integración con Core/Vue.

- Componente de aplicación Propiedades directas de tema y aplicación.

- Deslizamiento nativo Contenedores de acciones, apertura y cierre nativos, y comportamiento de eliminación.

- Elemento de lista API de espacios multimedia, título y descripción.

- Segmentado Presentación de selección agrupada.

- Variables de CSS Tipografía y geometría según la plataforma.

- Temas de color Funciones y nombres de colores.

- Diseño de la aplicación Límite habitual de una aplicación a pantalla completa.

## Sistema de diseño Framework7: recursos relacionados

### gluestack UI

Crea una lista de verificación para un kit de campo con los creadores reales de Button e Input de gluestack, colores semánticos explícitos de v5 y el código fuente completo de React Native Web. Examina la validación, las acciones de teclado, la identidad estable de los elementos y el progreso de preparación calculado localmente.

### Headless UI

Headless UI proporciona componentes de interacción React sin estilos para diálogos, listas desplegables y conmutadores. Esta guía se centra en combinar su comportamiento nativo de enfoque, selección y ventanas emergentes con CSS convencional, usando como ejemplo práctico un flujo para compartir documentos.

### HeroUI

Una referencia de HeroUI v3 con variables CSS semánticas reales, controles compuestos de React, superficies claras y oscuras, y una receta funcional para exportar imágenes.


- [Referencia de implementación](https://framework7.io/vue/swipeout.html)
- [Fuente](https://framework7.io/docs/color-themes)
- [Fuente](https://framework7.io/docs/css-variables)
- [Fuente](https://framework7.io/vue/app-layout.html)
- [Consulta la especificación complementaria](https://framework7.io/vue/initialize-app.html)
- [Consulta la especificación complementaria](https://framework7.io/vue/app.html)
- [Consulta la especificación complementaria](https://framework7.io/vue/list-item.html)
- [Consulta la especificación complementaria](https://framework7.io/vue/swipeout.html)
- [Consulta la especificación complementaria](https://framework7.io/vue/segmented.html)
- [Consulta la especificación complementaria](https://framework7.io/vue/app-layout.html)
- [Consulta la especificación complementaria](https://framework7.io/vue/installation.html)
- [Referencia de código](https://framework7.io/vue/swipeout.html)
- [Referencia de código](https://framework7.io/docs/css-variables)
- [Instalación de Vue Integración con Core/Vue.](https://framework7.io/vue/installation.html)
- [Componente de aplicación Propiedades directas de tema y aplicación.](https://framework7.io/vue/app.html)
- [Deslizamiento nativo Contenedores de acciones, apertura y cierre nativos, y comportamiento de eliminación.](https://framework7.io/vue/swipeout.html)
- [Elemento de lista API de espacios multimedia, título y descripción.](https://framework7.io/vue/list-item.html)
- [Segmentado Presentación de selección agrupada.](https://framework7.io/vue/segmented.html)
- [Variables de CSS Tipografía y geometría según la plataforma.](https://framework7.io/docs/css-variables)
- [Temas de color Funciones y nombres de colores.](https://framework7.io/docs/color-themes)
- [Diseño de la aplicación Límite habitual de una aplicación a pantalla completa.](https://framework7.io/vue/app-layout.html)