Çok platformlu ve mobil kullanıcı arayüzü · Yeni kaynak
Framework7 Tasarım Sistemi.
Gerçek swipeout eylemleri, açık iOS tema değerleri, klavyeyle erişilebilen bir eylem açıcı ve tamamlanmış çalışmaları sıfırlanana kadar listede tutan filtreli bir liste içeren yerel bir Framework7 eskiz defteri.
Framework7 Core/Vue 9.2.0, doğrulanmış iOS modunda; içerik yüksekliğine göre boyutlanan bağımsız uygulama örneği. · Uygulama başvurusu
02
Framework7 Tasarım Sistemi Tasarım Referansı
Framework7 Core/Vue 9.2.0, açıkça belirtilmiş iOS modunda. Aşağıdaki tema renkleri, başlatma sonrasında oluşturulmuş belge üzerinden doğrulandı; liste ve tipografi değerleri yayımlanan iOS stil sayfasından alınmıştır. Özgün not illüstrasyonları ve dış yerleşim ayrı olarak belirtilmiştir.
Framework7 Tasarım Sistemi, Bileşenlerin Yanı Sıra Uygulama Davranışını da Sağlar
Framework7 Bileşenlerin Yanı Sıra Uygulama Davranışını da Sağlar
Framework7’ın Vue entegrasyonu, çekirdek uygulama çalışma zamanının üzerine kurulur. Giriş noktası, Vue’yu bağlamadan önce Framework7Vue’yu Framework7 üzerine yükler; f7-app ise swipeout davranışını yöneten uygulamayı başlatır. Yalnızca birkaç stil verilmiş Vue sarmalayıcısını içe aktarmak, bu yerel etkileşim katmanını sağlamaz.
Yerel örneğin kapsamı dardır: üç özgün eskiz önerisi, yerel liste eylemleri, bir tamamlama filtresi ve sıfırlama. Yönlendirici, cihaz köprüsü, harita veya kalıcı not defteri yapılandırmaz. Bu daha geniş uygulama özellikleri, mobil görünümlü bir önizlemenin varmış gibi gösterdiği işlevler olarak bırakılmamalı; gerektiğinde bilinçli biçimde eklenmelidir.
Framework7 Tasarım Sistemi, İstenen Platform Temasının Gerçekten Uygulandığını Doğrular
İstenen Platform Temasının Gerçekten Uygulandığını Doğrulayın
Bu sürüm, theme="ios" değerini doğrudan f7-app üzerinde kabul eder. İncelenen bileşende eski tarz params nesnesi eşdeğer ve çalışan bir özellik değildi; başlangıçta masaüstü otomatik algılamasını Material modunda bıraktı. Düzeltilmiş örnek, iOS temasını açıklamadan önce oluşturulmuş html.ios sınıfını ve çözümlenmiş tema değerlerini kontrol eder.
Doğrulanmış iOS modunda --f7-theme-color #007aff, gölge #0066d6 ve ton #298fff değerindedir. Tema tohumu, platform görüntüleme modu ve oluşturulmuş Material renk rolleri farklı kavramlardır. Başlatma sonrasında hesaplanmış değeri okumak, örnekte gerçekte gösterilmeyen bir rengi belgelemenin önüne geçer.
Framework7 Tasarım Sistemi Yerel Medya Satırlarını Kullanır ve Yerel Tipografi Geçersiz Kılmalarını Belirtir
Yerel Medya Satırlarını Kullanın ve Yerel Tipografi Geçersiz Kılmalarını Belirtin
Listede güçlü yüzeyler ve iOS ayırıcılarıyla birlikte f7-list media-list kullanılır. Her satırda, başlık, alt başlık ve metin yerel list-item API üzerinden sağlanır; medya alanında özgün küçük illüstrasyonlar bulunur. Varsayılan iOS liste yüksekliği en az elli iki pikseldir; ancak çok satırlı medya içeriği bu satırları doğal olarak daha uzun yapar.
Yerel alt başlık ve açıklama varsayılanları on beş pikseldir. Örnek, bu kısa çalışma kartlarında destekleyici metin için bilerek on bir ve on iki piksel kullanırken başlık satırlarının ve açıklamaların kaydırılmasına izin verir. Okuyucuların varsayılanı veya örneği yeniden oluşturabilmesi için bu yerel tercihler resmî değişkenlerden ayrı belirtilir.
Framework7 Tasarım Sistemi Swipeout, Eylem Kapsayıcısı Olan Bir Liste Öğesi Yapılandırmasıdır
Swipeout, Eylem Kapsayıcısı Olan Bir Liste Öğesi Yapılandırmasıdır
Satırda swipeout etkinleştirilmiştir ve sağ tarafında f7-swipeout-actions bulunur. f7-swipeout-button, eylemin gerçekleştirilebileceği yüzeyi sağlar ve açığa çıkan alanı etkinleştirme sonrasında kapatır. Uygulama, delete özelliğini etkinleştirmek yerine notun done bayrağını değiştirir; çünkü tamamlanma geri alınabilir olmalı ve kayıt kullanılabilir durumda kalmalıdır.
Yerel çekirdek, aynı eylemleri bir hareketle de açabilir. Görünür Eylemler denetimi de satırın sabit kimliği için f7.swipeout.open çağrısı yapar. Böylece komut masaüstü ve klavye kullanıcılarının kolayca bulabileceği şekilde sunulur; herkesin gizli bir yatay hareketi keşfetmesi gerekmez.
River steps için Eylemler’i etkinleştirin ve Çizildi olarak işaretle’yi seçin.
Çizilenler’e geçin ve görünür kalan tek öğenin River steps olduğunu doğrulayın.
Eylemini yeniden açarak işlemi geri alın veya tüm listeyi sıfırlayın.
Framework7 Tasarım Sistemi Tamamlanma Durumunu Kaldırılmış Bir Öğe Yerine Modelde Tutar
Tamamlanma Durumunu Kaldırılmış Bir Öğe Yerine Modelde Tutun
Üç not nesnesi de Vue dizisinde kalır. Hesaplanan bir koleksiyon, yalnızca Sketched segmenti seçildiğinde notları filtreler; başka bir hesaplanan değer de tamamlanan çalışmaları sayar. Kararlı kimlikler, filtreleme sonrasında bile her yerel eylem açıcıyı doğru satıra bağlar.
Tamamlanmış bir notun eylem etiketi Mark sketched yerine Undo sketch olur. Uzun bir sürüklemenin ardından beklenmedik bir eylem gerçekleştiren overswipe kısayolu yoktur; uygulama modelini güncellemeden bir öğeyi kaldıran otomatik silme de kullanılmaz. Aynı kayıt, eksik verilerle yeniden oluşturulmadan etkin listeye dönebilir.
Framework7 Tasarım Sistemi: Filtrenin Boş Durumunda Sonraki Eylemi Açıklayın
Filtrenin Boş Durumunda Sonraki Eylemi Açıklayın
Sketched bölümünde kayıt olmadığında panel, hiçbir çalışmanın işaretlenmediğini açıklar ve Show all studies seçeneğini sunar. Bu kontrol, segmentli düğmelerle aynı filtre modelini değiştirir. Gidilecek bir yer sunmayan dekoratif bir boş durum illüstrasyonu değil, gerçekten kullanılabilir bir kurtarma yoludur.
Reset tüm tamamlanma işaretlerini temizler, All studies seçeneğine döner ve üç notun da yeniden hazır olduğunu duyurur. Durum metni, tek tek gerçekleştirilen eylemlerden sonra ilgili notu tam olarak belirtir. Bu önizleme bir not defterini cihaza veya sunucuya kaydetmediği için yeniden yükleme de özgün örnek verileri geri getirir.
Framework7 Tasarım Sistemi: İçerik Yüksekliğine Göre Gömme İçin Tam Uygulama Çerçevesini Dikkatle Uyarlayın
İçerik Yüksekliğine Göre Gömme İçin Tam Uygulama Çerçevesini Dikkatle Uyarlayın
Framework7 normalde tam ekran uygulama düzenlerini ve sayfa kapsayıcılarını destekler. Bu örnekte yönlendirilmiş sayfalar yoktur; içeriğin iframe yüksekliğini belirlemesi için kök belge yüksekliği ve taşma davranışı özellikle geçersiz kılınır. Görüntü alanı yüksekliğinde bir minimum değer bırakmak, iframe’i alt belgenin boyutuna göre yeniden boyutlandıran üst öğeyle bir geri besleme döngüsü oluşturur.
Yerel liste, başlatılmış uygulama kökünün içinde kalır. Özgün iki sütunlu eskiz/öneri düzeni 780px genişlikte alt alta geçer; daha dar satırlarda ise açıklama metinlerinin satırlara bölünmesi korunurken küçük resim genişliği azaltılır. Bu gömme tercihleri, Framework7’ın sayfa kaydırma modelini kullanan sıradan, yönlendirilmiş bir mobil uygulamaya olduğu gibi aktarılmamalıdır.
Framework7 Tasarım Sistemi: Hareketle Gerçekleştirilen Eylemleri Açık Bir Kontrolle Destekleyin
Hareketle Gerçekleştirilen Eylemleri Açık Bir Kontrolle Destekleyin
Görünür eylem açıcı, River steps için Actions gibi, ilgili satırı belirtir. Segmentli seçenekler basılı durumunu gösterir, sonuç bir durum bölgesinde sunulur ve özgün görsel dekoratif amaçlıdır. Kullanıcı, dokunma hareketi kullanmadan aynı eylemi inceleyebilir ve sonrasında hangi notun değiştiğini duyabilir.
Yerel testte, görünür açıcı kullanılarak yerel swipeout yüzeyi açıldı, River steps işaretlendi, liste filtrelendi ve model tarafından desteklenen tek bir satır kaldığı doğrulandı. Ayrıca oluşturulan iOS teması ve 280px düzeni de kontrol edildi. Yalnızca swipeout CSS bileşeninin bulunması, bu davranışların hiçbirini kanıtlamaz.
Eylem açıcı etiketinde kayıt adını kullanın.
Yalnızca DOM öğesini silmek yerine geri alınabilir bir model eylemi kullanın.
Yerel eylemden sonra filtrelenmiş koleksiyonu ve durumu test edin.
Framework7 Tasarım Sistemi: Eşleşen Core ve Vue Sürümlerini Yükleyin
Birbiriyle Uyumlu Core ve Vue Sürümlerini Yükleyin
Giriş dosyası, Framework7 öğesini framework7/bundle içinden, Framework7Vue öğesini framework7-vue içinden ve paket stil sayfasını içe aktarır. Paket, bu örneğin gerektirdiği Swipeout modülünü içerir. Framework7.use(Framework7Vue), createApp tam SFC’yi bağlamadan önce çağrılır.
Her iki paket de 9.2.0 sürümüne sabitlenmiştir. Yukarıda tam SFC ve özgün stil sayfası sağlanmıştır; Vite kurulumundaki kök HTML, beklenen uygulama bağlama noktasına sahiptir. Görünür özgün çizimler için simge paketi gerekmez; çerçevenin çekirdek CSS bileşeni kendi küçük dahili simge yazı tipini içerir.
f7App, segmentli düğmeler, medya listesi satırları ve kalıcı Vue model durumuna sahip yerel swipeout eylemleri.
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>
Bu sıfırlama, yönlendirilmiş tam ekran bir uygulama kabuğu için değil, gömülü bir örnek içindir.
Liste alt başlığı ve açıklaması için geçersiz kılmalar açıkça belirtilmiştir.
04
Framework7 Tasarım Sistemi Aracı Kurulumu
Uygulamaya Başlangıç Noktası
Birbiriyle eşleşen Framework7/Core Vue 9.2.0 sürümleri doğrulandı. Bu, içerik yüksekliği geçersiz kılmalarını içeren başlatılmış bir bileşen örneğidir; yönlendirilmiş, eksiksiz bir mobil uygulama değildir.
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
Projeniz İçin Bir İstem
Ajan İstemi
Sağlanan Field eskiz defteriyle birlikte Framework7 Core/Vue 9.2.0 sürümünü, açıkça belirtilen theme="ios" değerini ve yerel medya listesi swipeout yapısını kullanın. Üç eskiz çalışmasını, geri alınabilir done işaretlerini ve All/Sketched filtrelemesini koruyun. Görünür Actions düğmeleri f7.swipeout.open çağrısını yapmalıdır; tamamlanma, satırı silmek yerine model durumunu değiştirmelidir. f7-button üzerindeki type="button" özelliğini ve swipeout komutunun düğme anlambilimini ve Space tuşu desteğini koruyun. İçerik yüksekliğine göre gömme CSS özelliğini, boş filtre için kurtarma seçeneğini ve sıfırlamayı koruyun. Rota planlama veya konum hizmeti gerekmez.
05
Framework7 Tasarım Sistemi: Kaynaklar ve Kapsam
Doğrulanmış iOS moduyla Framework7 Core/Vue 9.2.0. Özgün eskiz yönergeleri ve dekoratif çizimler. Tamamlanma, geri alınabilir yerel bir durumdur; harita, konum hizmeti, cihaz depolaması veya yönlendirilmiş bir uygulamaya bağlı değildir.
