Interfaz de usuario multiplataforma y móvil · Nuevo recurso
Sistema de diseño de Framework7.
Un cuaderno de bocetos nativo de Framework7 con acciones swipeout reales, valores explícitos del tema de iOS, un activador de acciones accesible mediante teclado y una lista filtrada que conserva los estudios completados hasta que se restablece.
Core/Vue 9.2.0 de Framework7 en modo iOS verificado; ejemplo independiente de una aplicación con altura ajustada al contenido. · Referencia de implementación
02
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.
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.
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.
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.
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.
Activa Acciones para Pasos junto al río y elige Marcar como esbozado.
Cambia a Esbozados y confirma que solo Pasos junto al río siga visible.
Vuelve a abrir su acción para deshacerla o restablece la lista completa.
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.
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.
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.
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.
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.
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.
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>
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.
04
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.
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
Una instrucción para tu proyecto
Instrucción para el agente
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.
05
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.
