Um caderno de esboços nativo do Framework7 com ações reais de deslizar para fora, valores explícitos de tema do iOS, um acionador de ações acessível por teclado e uma lista filtrada que mantém os estudos concluídos até a redefinição.
Framework7 Core/Vue 9.2.0 no modo iOS verificado; exemplo independente de app com altura ajustada ao conteúdo. · Referência de implementação
02
Referência de design do sistema de design Framework7
Framework7 Core/Vue 9.2.0 com o modo iOS definido explicitamente. As cores do tema abaixo foram verificadas no documento renderizado após a inicialização; os valores de lista e tipografia vêm da folha de estilos do iOS incluída no pacote. As ilustrações originais das notas e o layout externo são identificados separadamente.
O sistema de design Framework7 fornece comportamento para o app, além de componentes
Framework7 fornece comportamento para o app, além de componentes
A integração do Vue de Framework7 é baseada no runtime principal da aplicação. A entrada instala Framework7Vue em Framework7 antes de montar o Vue, e f7-app inicializa o aplicativo que gerencia o comportamento de swipeout. Importar apenas alguns wrappers estilizados para Vue não forneceria essa camada nativa de interação.
O exemplo local mantém o escopo reduzido: três sugestões originais de esboço, ações nativas de lista, um filtro de conclusão e uma opção para redefinir. Ele não configura um roteador, uma ponte para o dispositivo, um mapa nem um caderno persistente. Esses recursos mais amplos do app devem ser adicionados de forma deliberada, e não sugeridos implicitamente por uma prévia com aparência de aplicativo móvel.
Sistema de design Framework7: verifique se o tema da plataforma solicitada foi realmente aplicado
Verifique se o tema da plataforma solicitada foi realmente aplicado
Esta versão aceita theme="ios" diretamente em f7-app. Um objeto params no estilo antigo não era uma prop equivalente funcional no componente inspecionado e, inicialmente, mantinha a detecção automática de desktop no modo Material. O exemplo corrigido verifica a classe html.ios renderizada e os valores resolvidos do tema antes de identificá-los como iOS.
No modo iOS verificado, --f7-theme-color é #007aff, com shade #0066d6 e tint #298fff. Uma cor-base do tema, um modo de renderização da plataforma e as funções de cor geradas para Material são conceitos distintos. Consultar o valor calculado após a inicialização evita documentar uma cor que o exemplo não exibe de fato.
Sistema de design Framework7: use linhas de mídia nativas e identifique as substituições tipográficas locais
Use linhas de mídia nativas e identifique as substituições tipográficas locais
A lista usa f7-list media-list, com superfícies marcadas e divisórias do iOS. Cada linha fornece título, legenda e texto por meio do API nativo de item de lista, com pequenas ilustrações originais no espaço de mídia. A altura mínima padrão da lista no iOS é de cinquenta e dois pixels, mas o conteúdo de mídia com várias linhas naturalmente deixa essas linhas mais altas.
Os padrões nativos do iOS para legendas e descrições são de quinze pixels. O exemplo usa deliberadamente textos auxiliares de onze e doze pixels para esses breves cartões de estudo, permitindo que os títulos e as descrições ocupem mais de uma linha. Essas escolhas locais são indicadas separadamente das variáveis oficiais para que seja possível reproduzir tanto o padrão quanto o exemplo.
Sistema de design Framework7: um swipeout é uma configuração de item de lista com um contêiner de ações
Um swipeout é uma configuração de item de lista com um contêiner de ações
A linha tem o swipeout habilitado e contém f7-swipeout-actions à direita. f7-swipeout-button fornece a superfície interativa e fecha a área revelada após a ativação. O aplicativo alterna o sinalizador done da nota em vez de habilitar a prop delete, pois a conclusão pode ser desfeita e o registro precisa continuar disponível.
O core nativo pode revelar as mesmas ações por meio de um gesto. Um controle visível Ações também chama f7.swipeout.open para o ID estável da linha. Assim, o comando fica fácil de encontrar para quem usa desktop ou teclado, sem exigir que todos descubram um gesto horizontal oculto.
Ative Ações em River steps e selecione Marcar como esboçado.
Mude para Esboçados e confirme que somente River steps continua visível.
Abra a ação novamente para desfazê-la ou redefina a lista inteira.
Framework7: mantenha a conclusão no modelo do sistema de design, em vez de removê-la de um elemento
Mantenha a conclusão no modelo, não em um elemento removido
Os três objetos de anotação permanecem no array do Vue. Uma coleção computada os filtra apenas quando o segmento Esboçados está selecionado, e outro valor computado conta os estudos concluídos. IDs estáveis conectam cada acionador nativo de ação à linha correta, mesmo após a filtragem.
O rótulo da ação muda de Marcar como esboçado para Desfazer esboço em uma anotação concluída. Não há um atalho de deslize excessivo que execute uma ação inesperadamente após um gesto longo, nem exclusão automática que remova um elemento sem atualizar o modelo da aplicação. O mesmo registro pode voltar à lista ativa sem precisar ser recriado a partir de dados incompletos.
Framework7: explique a próxima ação no estado vazio do filtro do sistema de design
Faça o estado vazio do filtro explicar a próxima ação
Quando Esboçados não tem registros, o painel informa que nenhum estudo foi marcado e oferece a opção Mostrar todos os estudos. Esse controle altera o mesmo modelo de filtro usado pelos botões segmentados. É uma forma real de recuperação, não uma ilustração decorativa de estado vazio sem nenhuma ação disponível.
Redefinir limpa todas as marcações de conclusão, volta para Todos os estudos e anuncia que os três estão disponíveis novamente. O texto de status identifica a anotação exata após cada ação individual. Ao recarregar a página, os dados de exemplo originais também são restaurados, pois esta prévia não salva um caderno no dispositivo nem em um servidor.
Sistema de design Framework7: adapte cuidadosamente um framework de aplicação completa para incorporação com altura determinada pelo conteúdo
Adapte cuidadosamente um framework de aplicação completa para incorporação com altura determinada pelo conteúdo
Framework7 normalmente oferece suporte a layouts de aplicativos em tela cheia e contêineres de página. Este exemplo não tem páginas com roteamento e substitui intencionalmente a altura e o overflow do documento raiz para que o conteúdo determine a altura do iframe. Manter uma altura mínima baseada na viewport criaria um ciclo de retroalimentação com um elemento pai que redimensiona o iframe de acordo com o documento filho.
A lista nativa permanece dentro da raiz inicializada da aplicação. O layout original de duas colunas, com esboço e orientação, passa a ser empilhado em 780px; em linhas mais estreitas, a largura das miniaturas diminui, preservando descrições com quebra de linha. Essas escolhas para incorporação não devem ser copiadas indiscriminadamente para um aplicativo móvel comum com roteamento que dependa do modelo de rolagem de página do Framework7.
Framework7: combine ações por gesto com um controle explícito no sistema de design
Combine ações por gesto com um controle explícito
O acionador de ação visível identifica a linha, como Ações para Etapas do rio. As opções segmentadas expõem o estado pressionado, o resultado é anunciado em uma região de status e a arte original é decorativa. A pessoa usuária pode acessar a mesma ação sem usar um gesto de toque e ouvir qual anotação foi alterada em seguida.
O teste local usou o acionador visível para exibir a área nativa de deslizar para ações, marcou Etapas do rio, filtrou a lista e confirmou que restou uma linha vinculada ao modelo. Também verificou o tema iOS renderizado e o layout de 280px. A simples presença de swipeout CSS não comprovaria nenhum desses comportamentos.
Mantenha o rótulo do acionador de ação vinculado ao nome do registro.
Use uma ação reversível no modelo em vez de excluir apenas o elemento do DOM.
Teste a coleção filtrada e o status após a ação nativa.
Sistema de design Framework7: instale versões compatíveis do Core e do Vue
Instale versões compatíveis do Core e do Vue
O ponto de entrada importa Framework7 de framework7/bundle, Framework7Vue de framework7-vue e a folha de estilos do bundle. O bundle inclui o módulo Swipeout necessário para este exemplo. Framework7.use(Framework7Vue) é executado antes de createApp montar o SFC completo.
Os dois pacotes estão fixados na versão 9.2.0. O SFC completo e a folha de estilos original acima são fornecidos, e o HTML raiz na configuração do Vite tem o ponto de montagem esperado para a aplicação. Não é necessário nenhum pacote de ícones para as ilustrações originais visíveis; o CSS principal do framework incorpora sua própria fonte interna de ícones compacta.
Framework7: exemplos de componentes do sistema de design
Caderno de esboços completo com ações nativas de deslizar
f7App, botões segmentados, linhas de lista com mídia e ações nativas de deslizar com estado persistente no modelo do 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>
Esta redefinição destina-se a um exemplo incorporado, não a uma estrutura de aplicativo em tela cheia com roteamento.
As substituições de subtítulo e descrição da lista são explícitas.
04
Framework7: configuração do agente do sistema de design
Ponto de partida para implementação
Compatibilidade verificada entre Framework7 e Core Vue 9.2.0. Este é um exemplo de componentes inicializado com substituições para altura determinada pelo conteúdo, não um aplicativo móvel completo com roteamento.
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
Um prompt para seu projeto
Prompt para agente de IA
Use Framework7 Core/Vue 9.2.0 com o caderno de esboços Field fornecido, theme="ios" explícito e a estrutura nativa de swipeout em lista com mídia. Mantenha os três estudos de esboço, suas marcações reversíveis de conclusão e a filtragem Todos/Esboçados. Os botões Ações visíveis devem chamar f7.swipeout.open; a conclusão deve alternar o estado do modelo, em vez de excluir a linha. Preserve type="button" em f7-button e a semântica de botão e o suporte à tecla Espaço do comando swipeout. Mantenha o CSS de incorporação com altura determinada pelo conteúdo, a recuperação do filtro vazio e a redefinição. Não é necessário nenhum serviço de itinerário ou localização.
05
Framework7: fontes e escopo do sistema de design
Framework7 Core/Vue 9.2.0 com o modo iOS verificado. Prompts de esboço originais e arte decorativa. A conclusão é um estado local reversível; não há conexão com mapa, serviço de localização, armazenamento do dispositivo ou aplicativo com roteamento.
