# Framework7 Tasarım Sistemi

## Framework7 Tasarım Sistemi Arayüz Önizlemesi

Bir çalışmanın yerel swipeout eylemini açın, çizildi olarak işaretleyin ve filtrelenmiş listeyi inceleyin.

## 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.

### Çözümlenmiş iOS tema renkleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --f7-theme-color | #007aff | iOS belgesinde doğrulanmış varsayılan birincil renk. |
| --f7-theme-color-rgb | 0, 122, 255 | Alfa hesaplamaları için RGB kanalları. |
| --f7-theme-color-shade | #0066d6 | Türetilmiş birincil renk tonu. |
| --f7-theme-color-tint | #298fff | Türetilmiş birincil renk açıklığı. |
| colors.green | #4cd964 | Swipeout tamamlanması için kullanılan varsayılan yeşil adlı renk. |
| colors.red | #ff3b30 | Varsayılan kırmızı rol referansı; bu örnekte yıkıcı eylem yoktur. |
| --f7-text-color | #000 | Yerel iOS varsayılan metin rengi; özgün sayfa metninde #26343f kullanılır. |
### Yerel iOS metni ve liste geometrisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --f7-font-size | 14px | Çerçevenin temel metin boyutu. |
| --f7-font-family | -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif | Yayımlanan iOS platform yazı tipi yığını. |
| --f7-line-height | 1.4 | iOS temel satır yüksekliği. |
| --f7-list-font-size | 17px | Yerel iOS liste metni. |
| --f7-list-item-padding-vertical | 12px | Yerel satır girintisi. |
| --f7-list-item-padding-horizontal | 16px | Yerel yatay iç boşluk. |
| --f7-list-item-min-height | 52px | Yerel iOS minimum satır yüksekliği. |
| --f7-list-item-media-margin | 16px | Yerel medya aralığı. |
| --f7-list-inset-border-radius | 24px | Yerel girintili liste köşe yarıçapı referansı. |
| --f7-list-item-subtitle-font-size | 15px | Varsayılan; özgün örnekte alt başlıklar 11px olarak değiştirilmiştir. |
| --f7-list-item-text-font-size | 15px | Varsayılan; özgün örnekte açıklamalar 12px olarak değiştirilmiştir. |
| --f7-list-item-text-line-height | 21px | Yerel varsayılan açıklama satır yüksekliği. |
### Açıkça belirtilmiş özgün gömülü düzen

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Page title | 35px / 1.15; 29px narrow | Özgün hiyerarşi. |
| Advice title | Georgia, serif; 29px | Özgün editoryal başlık. |
| Page/grid spacing | 32px page; 26px columns; 28px hero-to-grid | Özgün uygulama değerleri. |
| Main panel | 22px inset; 16px narrow; 16px radius | Yerel girintili liste varsayılanlarından bağımsız özgün çerçeveleme. |
| Grid breakpoint | 780px | Tavsiye panelini eskiz listesinin altına yerleştirin. |
| Artwork | 48×62px list thumbnails; 170px tall route illustration | Özgün CSS; harita veya görsel hizmeti yoktur. |
| Embedding reset | html/body/#app/.framework7-root height:auto; min-height:0 | Tam ekran uygulama yönergesi değil, açıkça belirtilmiş örnek uyarlaması. |
## Framework7 Tasarım Sistemi Eksiksiz Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

1. River steps için Eylemler’i etkinleştirin ve Çizildi olarak işaretle’yi seçin.

2. Çizilenler’e geçin ve görünür kalan tek öğenin River steps olduğunu doğrulayın.

3. Eylemini yeniden açarak işlemi geri alın veya tüm listeyi sıfırlayın.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## Framework7 Tasarım Sistemi Bileşen Örnekleri

### Yerel swipeout kullanan eksiksiz eskiz defteri

f7App, segmentli düğmeler, medya listesi satırları ve kalıcı Vue model durumuna sahip yerel swipeout eylemleri.

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

Kod referansı

- theme="ios", bu sürümde doğrudan bir f7-app özelliğidir.

- Görünür Actions kontrolü, yerel swipeout.open API öğesini çağırır.

- İşaretleme, Vue nesnesini değiştirir; DOM satırını silmez.

### Özgün gömülü düzenin tamamı

İçerik yüksekliği geçersiz kılmaları, dar satırlarda metinlerin kaydırılması ve özgün eskiz çizimleri.

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

Kod referansı

- 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.

## 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.

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

### Projeniz İçin Bir İstem

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

## 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.

- Vue kurulumu Core/Vue entegrasyonu.

- Uygulama bileşeni Doğrudan tema ve uygulama özellikleri.

- Swipeout Eylem kapsayıcıları, yerel açma/kapatma ve silme davranışı.

- Liste öğesi Medya alanları, başlık ve açıklama API’leri.

- Segmentli Gruplandırılmış seçim sunumu.

- CSS değişkenleri Platforma bağlı tipografi ve geometri.

- Renk temaları Tema rolleri ve adlandırılmış renkler.

- Uygulama düzeni Standart tam ekran uygulama sınırı.

## Framework7 Tasarım Sistemi İlgili Kaynaklar

### gluestack UI

gluestack’in gerçek core Button ve Input oluşturucularını, açık v5 anlamsal renklerini ve eksiksiz React Native Web kaynak kodunu kullanarak bir saha kiti kontrol listesi oluşturun. Doğrulamayı, klavye eylemlerini, kararlı öğe kimliğini ve yerel olarak hesaplanan paketleme ilerlemesini inceleyin.

### Headless UI

Headless UI; iletişim kutuları, liste kutuları ve anahtarlar için stilsiz React etkileşim bileşenleri sunar. Bu kılavuz, belge paylaşımı akışını örnek alarak yerel odak, seçim ve açılır pencere davranışlarını sıradan CSS ile bir araya getirmeye odaklanır.

### HeroUI

Gerçek anlamsal CSS değişkenleri, bileşik React kontrolleri, açık ve koyu yüzeyleri ve çalışan bir görsel dışa aktarma tarifiyle HeroUI v3 başvuru kaynağı.


- [Uygulama başvurusu](https://framework7.io/vue/swipeout.html)
- [Kaynak](https://framework7.io/docs/color-themes)
- [Kaynak](https://framework7.io/docs/css-variables)
- [Kaynak](https://framework7.io/vue/app-layout.html)
- [Destekleyici belirtimi okuyun](https://framework7.io/vue/initialize-app.html)
- [Destekleyici belirtimi okuyun](https://framework7.io/vue/app.html)
- [Destekleyici belirtimi okuyun](https://framework7.io/vue/list-item.html)
- [Destekleyici belirtimi okuyun](https://framework7.io/vue/swipeout.html)
- [Destekleyici belirtimi okuyun](https://framework7.io/vue/segmented.html)
- [Destekleyici belirtimi okuyun](https://framework7.io/vue/app-layout.html)
- [Destekleyici belirtimi okuyun](https://framework7.io/vue/installation.html)
- [Kod referansı](https://framework7.io/vue/swipeout.html)
- [Kod referansı](https://framework7.io/docs/css-variables)
- [Vue kurulumu Core/Vue entegrasyonu.](https://framework7.io/vue/installation.html)
- [Uygulama bileşeni Doğrudan tema ve uygulama özellikleri.](https://framework7.io/vue/app.html)
- [Swipeout Eylem kapsayıcıları, yerel açma/kapatma ve silme davranışı.](https://framework7.io/vue/swipeout.html)
- [Liste öğesi Medya alanları, başlık ve açıklama API’leri.](https://framework7.io/vue/list-item.html)
- [Segmentli Gruplandırılmış seçim sunumu.](https://framework7.io/vue/segmented.html)
- [CSS değişkenleri Platforma bağlı tipografi ve geometri.](https://framework7.io/docs/css-variables)
- [Renk temaları Tema rolleri ve adlandırılmış renkler.](https://framework7.io/docs/color-themes)
- [Uygulama düzeni Standart tam ekran uygulama sınırı.](https://framework7.io/vue/app-layout.html)