Çok platformlu ve mobil kullanıcı arayüzü · Yeni kaynak
Ionic Framework Tasarım Sistemi.
Doğrulanmış renk rolleri, iOS ve Material aralık geometrisi, gerçek segment ve anahtar davranışı ile yazı tipi, boyut ve kâğıt tercihlerine göre değişen bir makale içeren yerel bir Ionic okuma tercihleri arayüzü.
Ionic Vue/Core 9.0.6, Vue 3, açıkça seçilmiş iOS modu. Yerel web bileşenleri yerel olarak pakete dahil edilmiştir. · Uygulama başvurusu
02
Ionic Framework Tasarım Sistemi Tasarım Referansı
Doğrulanmış Ionic Vue/Core 9.0.6. Core renkleri kurulu core.css dosyasından alınmıştır. Demo, iOS modunu açıkça seçer. Okuma tipografisi, kâğıt renkleri ve çevre boşlukları özgün uygulama tercihleridir; Ionic varsayılanları değildir.
Ionic Framework Tasarım Sistemi Görüntüleme Modunu Bilinçli Seçin
Görüntüleme Modunu Bilinçli Seçin
Ionic, web bileşenlerini çerçeve entegrasyonları üzerinden sunar. Bu örnek Ionic Vue 9.0.6 kullanır ve IonicVue yapılandırmasında modu ios olarak ayarlar. Böylece segment, geçiş anahtarı, aralık ve düğmeler, sayfayı incelemek için kullanılan masaüstü tarayıcıdan bağımsız olarak tutarlı bir platform görünümüne kavuşur. Mod, bileşenlerin nasıl görüntüleneceğine ilişkin bir tercihtir; sayfayı yerel bir mobil uygulamaya dönüştürmez.
Örnek, tam ekranlı bir IonApp/IonContent kabuğu yerine bilinçli olarak sıradan bir main öğesi kullanır. Böylece bileşen örneği, gömülü kaynak sayfasında içeriğine göre boyutlanır. Gerçek bir Ionic uygulaması, geçişler için gereken IonPage dahil olmak üzere çerçevenin sayfa ve yönlendirici yapısını izlemelidir.
Ionic Framework Tasarım Sistemi Ionic Rengi, Birbiriyle İlişkili Değişkenlerden Oluşan Bir Ailedir
Ionic Rengi, Birbiriyle İlişkili Değişkenlerden Oluşan Bir Ailedir
Kurulu core stil sayfası, primary rengini #0054e9 olarak tanımlar; ayrıca RGB kanalları, kontrast, gölge ve renk tonu değerleri bulunur. Bileşenler, farklı durumlarda bu ilişkili değerleri kullanabilir. Yalnızca temel onaltılık değeri değiştirmek diğer durumlarda tutarsızlığa yol açabilir; özel bir marka rengi için ailenin tamamı tanımlanmalıdır.
Bu örnek, yerel denetimler için varsayılan primary rengini korur. Sıcak kâğıt, #fff9eb rengini kullanan ayrı bir uygulama yüzeyidir; makale metni ise #24362e renginde kalır. Sayfanın beyaza geçirilmesi yalnızca okuma yüzeyini değiştirir. Denetim paletini sessizce değiştirmez veya Ionic'in tüm koyu paletini uyguladığını iddia etmez.
Ionic Framework Tasarım Sistemi Okuyucunun Yazı Tipi Seçimini Görünür Kılın
Okuyucunun Yazı Tipi Seçimini Görünür Kılın
Segment, makalenin yazı tipini Georgia ile system-ui arasında değiştirir. Denetimlerin kendisi system-ui olarak kalır; böylece tercih, etiketleri ve denetim boyutlarını beklenmedik biçimde değiştirmek yerine amaçlanan okuma içeriğini etkiler. Harici bir yazı tipi istenmez; örnek, cihazda bulunan ilgili yazı tipi yığınlarını kullanır.
Metin boyutu on altı ile yirmi altı piksel arasında bir tam sayıdır. Makale başlığı bu boyutla orantılıdır ve satır yüksekliği 1.65 olarak kalır. 360px altındaki genişliklerde başlık oranı 1.6em'e düşer; böylece en büyük boyut, gömülü dar bir sütunda da okunabilir kalır. Bunlar Ionic bileşen varsayılanlarından açıkça ayrılmış özgün uygulama değerleridir.
Ionic Framework Tasarım Sistemi Segmentin Seçimini Denetleyin ve Yerel Anlamını Koruyun
Segmentin Seçimini Denetleyin ve Yerel Anlamını Koruyun
IonSegment, geçerli face değerini ve iki IonSegmentButton alt öğesini alır. ionChange olayı, modeli event.detail.value üzerinden günceller. Her düğmenin serif veya sans şeklinde farklı ve sabit bir değeri vardır; görünür etiket de seçimi açıklar. aria-labelledby kullanılarak denetimin tamamı bir paragrafla etiketlenir.
Gerçek erişilebilirlik ağacı, sıradan düğmeler grubu yerine seçili sekmeleri olan bir tablist sunar. Bu nedenle yerel etkileşim testi, yerel Sans sekmesini hedefler ve okuma yazı tipinin değiştiğini doğrular. İki düğmeyi sekmeli görünecek şekilde biçimlendirmek, aynı seçim davranışını sağlamaz.
Ionic Framework Tasarım Sistemi Aralık Olaylarını ve Kısıtlamalarını Tek Bir Sözleşme Olarak Ele Alın
Aralık Olaylarını ve Kısıtlamalarını Tek Bir Sözleşme Olarak Ele Alın
IonRange, min, max ve step değerlerini açıkça ayarlar; varsayılan sıfır-yüz aralığı, kullanışlı bir okuma boyutunu ifade etmez. Yapışma ve işaretler kullanılabilir artışları gösterir; sabitleyici biçimlendirici ise etkileşim sırasında gösterilen değere px ekler. Denetimin altındaki kalıcı boyut etiketi, sürükleme sona erdikten sonra da okunabilir kalır.
İşleyici ionChange olayını kullanır ve değeri sayıya dönüştürür. Bu, tek tutamaklı bir aralık için uygundur; çift tutamaklı bir aralık farklı bir değer biçimi döndürür ve ayrı işlem gerektirir. Derlenmiş iOS aralığında 26 piksel tutamaç ve 4 piksel çubuk bulunurken Material modunda bu değerler sırasıyla 18 ve 2'dir. Bu farklar kaydedilir; uydurma, tek tip bir Ionic token'ına indirgenmez.
Metin boyutu kaydırıcısına odaklanın ve 26px değerine ulaşmak için Sağ Ok tuşuna sekiz kez basın.
Sans'ı seçin ve Sıcak kâğıt görünümünü kapatın.
Tercihleri kaydedin ve tam yazı tipi, boyut ve kâğıt anlık görüntüsünü denetleyin.
Ionic Framework Tasarım Sistemi: Boole Değerli Kâğıt Seçimi Arka Planı Hemen Güncellemeli
İki Durumlu Kâğıt Seçimi, Yüzeyi Anında Güncellemeli
IonToggle, sıcak modelden checked değerini alır. Etkinlik, detail.checked değerini sağlar ve bu değer doğrudan Boole durumuna atanır. Görünen Sıcak kâğıt etiketi yerel anahtara aittir; yakınındaki açıklama ise bunun makale yüzeyini değiştirdiğini belirtir.
warm sınıfı, kenarlığı kaldırmadan veya makaleyi değiştirmeden makalenin arka planını değiştirir. Böylece karşılaştırma anlamlı kalır. Ayrıca kâğıt tonu tercihini, çok daha fazla Ionic yüzey ve metin değişkeninin eşgüdümünü gerektirecek platform düzeyindeki açık/koyu ayarıyla karıştırmayı önler.
Ionic Framework Tasarım Sistemi: Uygulanan Tercihleri Kaydedilmiş Bir Anlık Görüntüden Ayırın
Uygulanan Tercihleri Kaydedilmiş Bir Anlık Görüntüden Ayırın
Her ayar makaleye hemen uygulanır. Tercihleri kaydet, yerel reaktif durumda okunabilir bir anlık görüntü kaydeder ve bu görüntü güncelse kendini devre dışı bırakır. Üç modelin tümünü izleyen bir izleyici, herhangi bir değişiklikten sonra mesajı temizleyerek eski onayın yeni bir tercih birleşimini tanımlamasını önler.
Varsayılanları geri yükle; serif yazı tipini, on sekiz pikseli ve sıcak kâğıdı ayarlar, ardından kaydedilmiş mesajı temizler. Durum mesajı, tercihlerin yalnızca bu önizleme için geçerli olduğunu açıkça belirtir. Eylemin arkasında localStorage kalıcılığı, hesap ayarı veya yerel tercih eklentisi yoktur; yeniden yükleme varsayılanlarla başlar.
Ionic Framework Tasarım Sistemi: Bileşimi Biçimlendirirken Yerel Shadow-DOM Denetimlerini Koruyun
Bileşimi Biçimlendirirken Yerel Shadow-DOM Denetimlerini Koruyun
Aralığın görünür bir Metin boyutu etiketi vardır, anahtar kendi metin etiketini içerir ve segment Yazı tipi olarak etiketlenmiştir. Özgün görsel aria-hidden olarak işaretlenmiştir. Kaydetme geri bildirimi role=status kullanır; makale ise sıradan anlamsal HTML olarak kalır, böylece başlığı ve paragrafları okuyucunun olağan belge gezinme düzenini izler.
Ionic bileşenleri, dahili işaretlemeyi shadow DOM içinde kapsüller. Bu örnek, özel dahili sınıfları sorgulamak yerine herkese açık özellikleri, etkinlikleri ve belgelenmiş CSS özel özelliklerini kullanır. Çevreleyen sayfa, içerik yüksekliğini ve sıfır minimum genişlikleri kullanır; 280px genişlikte kontrol etmek, tek başına bir telefon ekran görüntüsünde gözden kaçabilecek gömülü içerik genişliği hatalarını ortaya çıkarır.
Etiket ilişkilerini yerel bileşenlerde koruyun.
Shadow DOM iç yapılarını değiştirmek yerine herkese açık özellikleri ve etkinlikleri kullanın.
Klavye ve canlı makale boyutunun değişimini birlikte doğrulayın.
Ionic Framework Tasarım Sistemi: Vue Entegrasyonunu Kurun ve Temel CSS Dosyasını Ekleyin
Vue Entegrasyonunu Kurun ve Core CSS Bileşenlerini Ekleyin
Eksiksiz giriş dosyası IonicVue kaydını yapar ve özgün stil sayfasından önce @ionic/vue/css/core.css dosyasını içe aktarır. Kurulu Vue paketi ayrıca vue-router bağımlılığını da çözer; bu gömülü örnekte gezinme yapılandırılmasa da yeniden üretilebilir bağımlılık komutuna vue-router eklenmiştir. Bu eş bağımlılığın atlanması, yerel derlemenin bağımlılığı çözememesine neden oldu.
İki eksiksiz örnek App.vue ve style.css dosyalarını sağlar. Standart bir Vite Vue projesi, SFC'yi ve yerel bileşen içe aktarımlarını derler. Bağımsız kaynak önizlemesi, ortaya çıkan JavaScript ve CSS dosyalarını bileşen uygulamaları da dâhil olmak üzere yerel olarak paketler; böylece denetimleri değiştirmek için harici CDN isteği gerekmez.
Yerel IonSegment, IonRange, IonToggle ve IonButton bileşenleri özgün, kısa bir makaleyi denetler.
vue
<script setup>
import {ref,computed,watch} from 'vue';
import {IonSegment,IonSegmentButton,IonLabel,IonRange,IonToggle,IonButton,IonChip} from '@ionic/vue';
const face=ref('serif'),size=ref(18),warm=ref(true),saved=ref('');
const family=computed(()=>face.value==='serif'?'Georgia, serif':'system-ui, sans-serif');
watch([face,size,warm],()=>saved.value='');
function save(){saved.value=`Saved locally: ${face.value}, ${size.value}px, ${warm.value?'warm':'white'} paper.`}
function reset(){face.value='serif';size.value=18;warm.value=true;saved.value=''}
</script>
<template>
<main class="reader-shell">
<header><p class="eyebrow">A QUIETER READING SPACE</p><h1>Make room for the words.</h1><p>Adjust this short essay to your reading preferences. The sample changes as you move the controls.</p></header>
<div class="reader-layout"><section class="preferences" aria-labelledby="preferences-title"><h2 id="preferences-title">Reading settings</h2><p class="label" id="face-label">Typeface</p>
<IonSegment :value="face" @ionChange="face=$event.detail.value" aria-labelledby="face-label"><IonSegmentButton value="serif"><IonLabel>Serif</IonLabel></IonSegmentButton><IonSegmentButton value="sans"><IonLabel>Sans</IonLabel></IonSegmentButton></IonSegment>
<IonRange :value="size" @ionChange="size=Number($event.detail.value)" :min="16" :max="26" :step="1" :snaps="true" :ticks="true" :pin="true" label="Text size" label-placement="stacked" :pin-formatter="v=>`${v}px`"/><p class="scale"><span>16px</span><strong>{{size}}px</strong><span>26px</span></p>
<div class="paper-toggle"><IonToggle :checked="warm" @ionChange="warm=$event.detail.checked" justify="space-between">Warm paper</IonToggle><p>Soft ivory or a white page. The controls keep their own contrast.</p></div>
<IonButton expand="block" @click="save" :disabled="!!saved">Save preferences</IonButton><IonButton expand="block" fill="clear" @click="reset">Restore defaults</IonButton><p class="save-result" role="status">{{saved||'Preferences apply to this preview only.'}}</p></section>
<article class="reading-paper" :class="{warm}" :style="{fontFamily:family,fontSize:size+'px'}"><div class="paper-art" aria-hidden="true"><span></span><i></i><b></b></div><p class="article-kicker">FIELD NOTES · 03</p><h2>The useful pause</h2><p>There is a small garden between the library and the river. Its benches face away from the busiest path, toward a row of young trees.</p><p>On an ordinary afternoon, the place asks very little. You can read a paragraph twice, let a conversation settle, or watch the shadow of a leaf move across the page.</p><p>Good reading spaces leave that choice with the reader. A comfortable line, a familiar letterform, and a little breathing room can make a page easier to return to.</p><footer><IonChip outline>Original sample essay</IonChip><span>{{size}}px · {{face==='serif'?'Georgia':'System sans'}} · 1.65 line height</span></footer></article></div>
</main>
</template>
Aralık, belgelenmiş --bar-height özel özelliğini kullanır.
Tüm metin ve görsel içerikler özgün CSS çalışmalarıdır ve dekoratif olarak işaretlenmiştir.
04
Ionic Framework Tasarım Sistemi Aracı Kurulumu
Uygulamaya Başlangıç Noktası
Ionic Vue/Core 9.0.6 doğrulandı. Eksiksiz SFC ve stil sayfası yukarıda yer alıyor; önizlemede yönlendirilen sayfalar bulunmasa da entegrasyon bağımlılığı olarak vue-router kuruludur.
JavaScript
// Start with: npm create vite@latest ionic-reader -- --template vue
// cd ionic-reader && npm install
// npm install @ionic/[email protected] @ionic/[email protected] vue-router@4
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {IonicVue} from '@ionic/vue';
import '@ionic/vue/css/core.css';
import './style.css';
import App from './App.vue';
createApp(App).use(IonicVue, {mode:'ios'}).mount('#app');
// The Vite index.html must contain:
// <div id="app"></div><script type="module" src="/src/main.js"></script>
// Run: npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Sağlanan okuma tercihleri örneğini oluşturmak için iOS modunda açıkça Ionic Vue/Core 9.0.6 kullanın. Yazı tipi seçimi için yerel Segment'i, metin boyutu için Range'i, kâğıt görünümü için Toggle'ı ve Button eylemlerini gerçek makale stillerine bağlı tutun. 16–26px aralığını koruyun ve değişiklikleri yerel kaydedilmiş tercih anlık görüntüsüne yansıtın. IonicVue kurulumunu, gerekli CSS bağımlılığını ve vue-router eş bağımlılığını ekleyin; gömünün içine tam ekran kabuğu eklemek yerine içerik yüksekliğine göre düzeni koruyun. İnceleme verileri yüklenmez ve uzak hesaplarda değişiklik yapılmaz.
05
Ionic Framework Tasarım Sistemi: Kaynaklar ve Kapsam
Ionic Vue/Core 9.0.6, iOS modu. Özgün makale, görsel, okuma ölçeği ve sıcak kâğıt renkleri. Kaydetme yerel reaktif durumdur ve yeniden yüklemeler arasında kalıcı değildir. Bu gömülü bileşen örneği, yönlendirme içeren eksiksiz bir Ionic uygulaması veya yerel cihaz uygulaması değildir.
