Framework7 Core/Vue 9.2.0, 검증된 iOS 모드, 독립형 콘텐츠 높이 앱 예시. · 구현 레퍼런스
02
Framework7 디자인 시스템 디자인 참고 자료
Framework7 Core/Vue 9.2.0에서 iOS 모드를 명시적으로 설정했습니다. 아래 테마 색상은 초기화 후 렌더링된 문서에서 확인했으며, 목록과 타이포그래피 값은 제공된 iOS 스타일시트에서 가져왔습니다. 원본 참고 노트의 일러스트와 외부 레이아웃은 별도로 구분해 표시했습니다.
Framework7의 Vue 통합은 핵심 애플리케이션 런타임을 기반으로 합니다. 진입점에서 Vue를 마운트하기 전에 Framework7에 Framework7Vue를 설치하고, f7-app이 스와이프아웃 동작을 담당하는 애플리케이션을 초기화합니다. 스타일이 적용된 Vue 래퍼 몇 개만 가져와서는 이 네이티브 상호작용 계층을 사용할 수 없습니다.
이 예시의 범위는 작게 유지합니다. 원본 스케치 프롬프트 세 개, 네이티브 목록 동작, 완료 필터와 초기화 기능을 제공합니다. 라우터, 기기 브리지, 지도 또는 영구 노트북은 구성하지 않습니다. 이러한 광범위한 앱 기능은 모바일처럼 보이는 미리보기에 포함된 것처럼 암시하지 말고 의도적으로 추가해야 합니다.
이 버전에서는 f7-app에 theme="ios"를 직접 지정합니다. 검사한 구성 요소에서 구식 params 객체는 동일하게 작동하는 속성이 아니었으며, 처음에는 데스크톱 자동 감지로 인해 Material 모드가 적용되었습니다. 수정된 예시는 렌더링된 html.ios 클래스와 확인된 테마 값을 점검한 뒤 iOS 테마라고 설명합니다.
검증된 iOS 모드에서 --f7-theme-color는 #007aff이고, 셰이드는 #0066d6, 틴트는 #298fff입니다. 테마 시드, 플랫폼 렌더링 모드, 생성된 Material 색상 역할은 서로 다른 개념입니다. 초기화 후 계산된 값을 읽으면 예제에서 실제로 표시되지 않는 색상을 문서화하는 일을 방지할 수 있습니다.
Framework7 디자인 시스템: 네이티브 미디어 행을 사용하고 로컬 타이포그래피 재정의를 명시하기
네이티브 미디어 행을 사용하고 로컬 타이포그래피 재정의를 명시하기
목록에는 강한 배경 표면과 iOS 구분선을 사용하는 f7-list media-list를 사용합니다. 각 행은 네이티브 list-item API를 통해 제목, 부제목, 텍스트를 제공하고, 미디어 영역에는 원본의 작은 일러스트를 배치합니다. 기본 iOS 목록의 최소 높이는 52픽셀이지만, 여러 줄로 구성된 미디어 콘텐츠가 있으면 행 높이는 자연스럽게 더 커집니다.
네이티브 부제목과 설명의 기본 크기는 15픽셀입니다. 이 예시에서는 짧은 학습 카드의 보조 텍스트에 각각 11픽셀과 12픽셀을 사용하고, 제목 행과 설명은 여러 줄로 표시되도록 합니다. 이러한 로컬 선택은 공식 변수와 별도로 명시하므로 기본값이나 예시의 스타일을 재현할 수 있습니다.
Framework7 디자인 시스템: 스와이프아웃은 동작 컨테이너가 있는 목록 항목 구성입니다
스와이프아웃은 동작 컨테이너가 있는 목록 항목 구성입니다
행에서 스와이프아웃을 활성화하고 오른쪽에 f7-swipeout-actions를 배치합니다. f7-swipeout-button은 동작 영역을 제공하며, 활성화 후 펼쳐진 영역을 닫습니다. 완료는 되돌릴 수 있고 기록을 계속 사용할 수 있어야 하므로, 애플리케이션에서는 delete 속성을 활성화하는 대신 노트의 done 플래그를 전환합니다.
네이티브 코어에서는 제스처로도 동일한 동작을 표시할 수 있습니다. 화면에 보이는 Actions 컨트롤도 해당 행의 고정 ID를 사용해 f7.swipeout.open을 호출합니다. 이렇게 하면 숨겨진 가로 스와이프 제스처를 알아내야 하는 대신 데스크톱 및 키보드 사용자가 명령을 쉽게 찾을 수 있습니다.
River steps의 Actions를 활성화한 다음 Mark sketched를 선택하세요.
세 개의 메모 객체는 모두 Vue 배열에 유지됩니다. 계산된 컬렉션은 스케치 완료 세그먼트를 선택했을 때만 메모를 필터링하고, 또 다른 계산된 값은 완료된 스케치 수를 집계합니다. 안정적인 ID를 사용하므로 필터링한 뒤에도 각 기본 작업 버튼이 올바른 행을 가리킵니다.
완료된 메모의 작업 라벨은 ‘스케치 완료’에서 ‘스케치 취소’로 바뀝니다. 긴 드래그 후 예기치 않게 작업을 실행하는 오버스와이프 단축 동작은 없으며, 애플리케이션 모델을 갱신하지 않은 채 요소를 제거하는 자동 삭제도 없습니다. 같은 레코드를 불완전한 데이터로 다시 만들지 않고도 활성 목록에 되돌릴 수 있습니다.
스케치 완료 항목이 없으면 패널에 완료로 표시된 스케치가 없다고 안내하고 ‘모든 스케치 보기’를 제공합니다. 이 컨트롤은 세그먼트 버튼과 동일한 필터 모델을 변경합니다. 이동할 곳이 없는 장식용 빈 상태 일러스트가 아니라 실제로 목록을 복구할 수 있는 방법입니다.
초기화를 누르면 모든 완료 상태가 해제되고 ‘모든 스케치’로 돌아가며, 세 개 모두 다시 준비되었다고 알립니다. 개별 작업 후에는 상태 텍스트에 해당 메모의 이름이 표시됩니다. 이 미리보기는 기기나 서버에 스케치북을 저장하지 않으므로 새로고침해도 원래 샘플 데이터로 돌아갑니다.
Framework7 디자인 시스템: 전체 앱 프레임워크를 콘텐츠 높이 임베딩에 맞게 신중히 조정하기
전체 앱 프레임워크를 콘텐츠 높이 임베딩에 맞게 신중히 조정하기
Framework7는 일반적으로 전체 화면 앱 레이아웃과 페이지 컨테이너를 지원합니다. 이 예시에는 라우팅된 페이지가 없으며, 콘텐츠에 따라 iframe 높이가 결정되도록 루트 문서의 높이와 오버플로를 의도적으로 재정의합니다. 뷰포트 높이를 최소 높이로 유지하면 하위 문서에 맞춰 iframe 크기를 조정하는 상위 요소와 피드백 루프가 생깁니다.
기본 목록은 초기화된 앱 루트 안에 유지됩니다. 기존의 스케치/조언 2단 레이아웃은 780px에서 세로로 쌓이고, 더 좁은 화면에서는 줄바꿈되는 설명을 유지하면서 썸네일 너비를 줄입니다. 이러한 임베딩 설정을 Framework7의 페이지 스크롤 모델을 사용하는 일반적인 라우팅 기반 모바일 앱에 그대로 적용해서는 안 됩니다.
화면에 표시되는 작업 버튼에는 ‘리버 스텝 작업’처럼 해당 행의 이름이 포함됩니다. 세그먼트 선택 상태는 눌림 상태로 표시되고, 결과는 상태 영역에 전달되며, 원본 삽화는 장식용으로 처리됩니다. 사용자는 터치 제스처 없이도 같은 작업을 확인할 수 있고, 이후 어떤 메모가 변경되었는지 음성 안내로 들을 수 있습니다.
로컬 테스트에서는 화면에 표시된 버튼으로 기본 swipeout 패널을 열고 ‘리버 스텝’을 완료 처리한 뒤, 목록을 필터링해 모델에 연결된 행 하나가 남는지 확인했습니다. 렌더링된 iOS 테마와 280px 레이아웃도 점검했습니다. swipeout CSS가 있다는 사실만으로는 이러한 동작을 확인할 수 없습니다.
엔트리는 framework7/bundle에서 Framework7을, framework7-vue에서 Framework7Vue를 가져오고 번들 스타일시트를 불러옵니다. 이 번들에는 이 예제에 필요한 Swipeout 모듈이 포함되어 있습니다. createApp이 전체 SFC를 마운트하기 전에 Framework7.use(Framework7Vue)를 호출합니다.
두 패키지 모두 9.2.0으로 고정되어 있습니다. 위에 전체 SFC와 원본 스타일시트가 제공되어 있으며, Vite 설정의 루트 HTML에는 예상한 앱 마운트 지점이 있습니다. 화면에 표시되는 원본 삽화에는 아이콘 패키지가 필요하지 않습니다. 프레임워크의 핵심 CSS에 자체 소형 내부 아이콘 폰트가 포함되어 있습니다.
f7App, 세그먼트 버튼, 미디어 목록 행, Vue 모델 상태를 유지하는 기본 swipeout 작업.
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>
Framework7/Core Vue 9.2.0의 일치 여부를 확인했습니다. 콘텐츠 높이 재정의가 적용된 초기화 구성 요소 예시이며, 라우팅을 포함한 완성형 모바일 애플리케이션은 아닙니다.
자바스크립트
// 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
프로젝트를 위한 프롬프트
에이전트 프롬프트
제공된 필드 스케치북과 명시적인 theme="ios", 기본 미디어 목록의 swipeout 구조를 사용해 Framework7 Core/Vue 9.2.0을 구성하세요. 세 가지 스케치, 되돌릴 수 있는 완료 상태, ‘모든 항목’/‘스케치 완료’ 필터를 유지하세요. 화면에 표시되는 ‘작업’ 버튼은 f7.swipeout.open을 호출해야 하며, 완료 처리는 행 삭제가 아니라 모델 상태를 전환해야 합니다. f7-button의 type="button"과 swipeout 명령의 버튼 의미 및 Space 키 지원을 유지하세요. 콘텐츠 높이 임베딩 CSS, 필터 결과가 비었을 때의 복구 동작, 초기화 기능도 유지하세요. 일정이나 위치 서비스는 필요하지 않습니다.
05
Framework7 디자인 시스템: 출처와 범위
iOS 모드가 확인된 Framework7 Core/Vue 9.2.0. 원본 스케치 프롬프트와 장식용 삽화. 완료 상태는 되돌릴 수 있는 로컬 상태이며, 지도, 위치 서비스, 기기 저장소 또는 라우팅 앱은 연결되어 있지 않습니다.
