# Ionic Framework Tasarım Sistemi ## Ionic Framework Tasarım Sistemi Arayüz Önizlemesi Yazı tipini değiştirin, metin boyutunu klavyeyle ayarlayın, sıcak kâğıt görünümünü açıp kapatın ve yerel tercihlerin anlık görüntüsünü kaydedin. ## 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. ### Varsayılan açık semantik renk rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --ion-color-primary | #0054e9 | Yerel birincil denetimler. | | --ion-color-primary-rgb | 0, 84, 233 | Opaklık temelli hesaplamalar için RGB kanalları. | | --ion-color-primary-contrast | #fff | Birincil rengin üzerinde metin ve simge kontrastı. | | --ion-color-primary-shade | #004acd | Koyulaştırılmış birincil renk varyantı. | | --ion-color-primary-tint | #1a65eb | Açıklaştırılmış birincil renk varyantı. | | --ion-color-secondary | #0163aa | İkincil rol. | | --ion-color-tertiary | #6030ff | Üçüncül renk rolü. | | --ion-color-success | #2dd55b | Başarı rolü. | | --ion-color-warning | #ffc409 | Uyarı rolü. | | --ion-color-danger | #c5000f | Tehlike rolü. | ### Moda göre yerel aralık geometrisi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | iOS --bar-height | 4px | Derlenmiş iOS aralık varsayılanı. | | iOS --knob-size | 26px | Derlenmiş iOS tutamaç boyutu. | | MD --bar-height | 2px | Derlenmiş Material Design modu varsayılanı. | | MD --knob-size | 18px | Derlenmiş Material Design tutamaç boyutu. | | Application min / max / step | 16 / 26 / 1 | Tam sayı olarak okuma yazı tipi boyutu; gerçek aralık özellikleri. | | snaps / ticks / pin | true / true / true | Görünür adımlar ve biçimlendirilmiş boyut geri bildirimi. | ### Özgün okuma ve düzen ölçekleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Reading font | Georgia, serif OR system-ui, sans-serif | Yerel segment tarafından denetlenir; yazı tipleri zaten cihazda bulunur. | | Reading size | 16–26px; default 18px | Makaleye doğrudan uygulanır. | | Reading line-height | 1.65 | Özgün, rahat okunabilir metin genişliği. | | Article heading | 1.9em / 1.15; 1.6em below 360px | Okuyucunun seçtiği gövde metni boyutuyla ölçeklenir. | | Control/body font | system-ui, sans-serif | Açıkça belirtilmiş uygulama yazı tipi tercihi. | | Spacing | 10 / 12 / 14 / 16 / 20 / 22 / 24 / 28 / 32px | İddia edilen bir Ionic ölçeği değil, somut ve özgün stil sayfası değerleri. | | Layout | 300px settings + flexible article; stack at 760px | Her iki sütunda da min-width:0 kullanılır. | | Paper roles | #fff9eb warm; #ffffff white; #24362e ink | Özgün içerik renkleri, yerel denetim rollerinden ayrıdır. | | Card radius | 16px | Çevredeki panelin özgün geometrisi. | ## Ionic Framework 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ı. ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. 1. 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. 2. Sans'ı seçin ve Sıcak kâğıt görünümünü kapatın. 3. Tercihleri kaydedin ve tam yazı tipi, boyut ve kâğıt anlık görüntüsünü denetleyin. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## Ionic Framework Tasarım Sistemi Bileşen Örnekleri ### Eksiksiz okuma tercihleri SFC'si Yerel IonSegment, IonRange, IonToggle ve IonButton bileşenleri özgün, kısa bir makaleyi denetler. ``` ``` Kod referansı - Aralık, ionChange üzerinden uygulanır; e.detail.value bir sayıya dönüştürülür. - Herhangi bir tercihi değiştirmek kaydedilmiş anlık görüntüyü temizler. - Kaydetme, cihaz depolaması veya sunucu isteği değil, yerel reaktif durumdur. ### Özgün düzenin eksiksiz stil sayfası İçerik yüksekliğine göre gömme, dar ekranlarda dikey düzen ve bileşenlerin shadow root'larına dokunmadan okuyucunun seçtiği tipografi. ``` html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;color:#24362e;background:#f2f5f3}.reader-shell{max-width:1120px;margin:auto;padding:32px}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700;color:#52695c}h1{font-size:34px;line-height:1.15;max-width:660px;margin:12px 0}header>p:last-child{font-size:15px;line-height:1.6;max-width:660px;color:#56675e}.reader-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;margin-top:28px}.preferences{background:white;border:1px solid #dbe3de;border-radius:16px;padding:22px;align-self:start;min-width:0}.preferences h2{font-size:19px;margin:0 0 22px}.label{font-size:14px;font-weight:600;margin-bottom:10px}ion-segment{margin-bottom:20px}ion-range{padding:12px 0 0;--bar-height:4px}.scale{display:flex;justify-content:space-between;font-size:12px;color:#52695c;margin:0 0 24px}.paper-toggle{border-top:1px solid #e4e9e6;padding-top:20px;margin-bottom:20px}.paper-toggle ion-toggle{width:100%;font-size:14px}.paper-toggle p{font-size:12px;line-height:1.6;color:#5a6b61}.save-result{font-size:12px;line-height:1.6;color:#46614f;min-height:38px}.reading-paper{background:white;border:1px solid #dce3dd;border-radius:16px;padding:28px;line-height:1.65;min-width:0;overflow-wrap:anywhere;transition:background .2s}.reading-paper.warm{background:#fff9eb}.reading-paper h2{font-size:1.9em;line-height:1.15;margin:14px 0 24px;font-weight:400}.reading-paper p{margin:0 0 1.2em}.article-kicker{font-family:system-ui,sans-serif;font-size:10px;letter-spacing:.15em}.paper-art{height:112px;background:#dce8d9;border-radius:8px;position:relative;overflow:hidden;margin-bottom:24px}.paper-art span{position:absolute;width:150px;height:150px;background:#a4baa2;border-radius:50%;right:15%;top:35px}.paper-art i{position:absolute;width:130px;height:70px;background:#f3e0a8;border-radius:50% 50% 0 0;right:25%;top:48px}.paper-art b{position:absolute;width:60px;height:130px;transform:rotate(24deg);background:#64816b;left:15%;top:38px;border-radius:50% 50% 0 0}.reading-paper footer{font:11px/1.6 system-ui,sans-serif;border-top:1px solid #deded3;padding-top:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.reading-paper ion-chip{font-size:11px;margin:0}@media(max-width:760px){.reader-shell{padding:20px}.reader-layout{grid-template-columns:minmax(0,1fr)}h1{font-size:29px}}@media(max-width:360px){.reader-shell{padding:14px}.preferences,.reading-paper{padding:16px}.reader-layout{gap:18px}.reading-paper h2{font-size:1.6em}} ``` Kod referansı - 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. ## 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. ``` // Start with: npm create vite@latest ionic-reader -- --template vue // cd ionic-reader && npm install // npm install @ionic/vue@9.0.6 @ionic/core@9.0.6 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: //
// Run: npm run dev ``` ### Projeniz İçin Bir İstem ``` 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. ``` ## 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. - Vue entegrasyonu Eklenti, bileşen içe aktarımları ve uygulamanın tam yapısı. - Renk aileleri Temel, kontrast, gölge, ton ve RGB rolleri. - CSS değişkenleri Genel ve bileşene özgü özel özellikler. - Segment Seçim modeli ve segment etkinlikleri. - Aralık Etiketler, adımlar, işaretler, sabitleyiciler ve etkinlik değeri yapısı. - Toggle İşaretli durumu ve değişiklik etkinlikleri. - Button Genişletme, doldurma ve devre dışı durumlar. - Shadow parçaları Desteklenen biçimlendirme sınırları. ## Ionic Framework Tasarım Sistemi İlgili Kaynaklar ### Kobalte Kobalte, Solid için başsız bileşenler sunar; bunlara ham ve biçimlendirilmiş değerleri ayrı tutan sayısal alanlar, bileşik onay kutusu anatomisi ve basılı durum düğmeleri dahildir. Bu kılavuz, türetilmiş miktarlar ve sıfırlanabilir malzeme kontrolleri içeren bir tarif ölçekleyiciyle bu yapı taşlarını Solid sinyallerine bağlar. ### Mantine Yerel katılımcı tablosu ve zamanlama çekmecesiyle oluşturulmuş bir Mantine 9 başvuru kaynağı. Gerçek tema ölçeklerini inceleyin, useForm’u TextInput, Select, Checkbox ve DatePickerInput’a bağlayın; ardından yerel bir kayıt eklemeden önce doğrulamayı deneyin. ### Melt UI Melt UI’ın store/action oluşturucuları, sahip olduğunuz Svelte işaretlemesine erişilebilir davranışlar ekler. Bu kılavuz, radyo düğmesi, kaydırıcı ve anahtar oluşturucularını öznitelikleri, eylemleri ve yazılabilir depoları üzerinden birbirine bağlamak için @melt-ui/svelte 0.86.6 kullanır; bu, daha yeni runes API yapısından farklıdır. - [Uygulama başvurusu](https://ionicframework.com/docs/vue/quickstart) - [Kaynak](https://ionicframework.com/docs/theming/colors) - [Kaynak](https://ionicframework.com/docs/api/range) - [Kaynak](https://ionicframework.com/docs/theming/css-variables) - [Destekleyici belirtimi okuyun](https://ionicframework.com/docs/vue/quickstart) - [Destekleyici belirtimi okuyun](https://ionicframework.com/docs/theming/colors) - [Destekleyici belirtimi okuyun](https://ionicframework.com/docs/theming/css-variables) - [Destekleyici belirtimi okuyun](https://ionicframework.com/docs/api/segment) - [Destekleyici belirtimi okuyun](https://ionicframework.com/docs/api/range) - [Destekleyici belirtimi okuyun](https://ionicframework.com/docs/api/toggle) - [Destekleyici belirtimi okuyun](https://ionicframework.com/docs/api/button) - [Destekleyici belirtimi okuyun](https://ionicframework.com/docs/theming/css-shadow-parts) - [Kod referansı](https://ionicframework.com/docs/api/range) - [Kod referansı](https://ionicframework.com/docs/theming/css-variables) - [Vue entegrasyonu Eklenti, bileşen içe aktarımları ve uygulamanın tam yapısı.](https://ionicframework.com/docs/vue/quickstart) - [Renk aileleri Temel, kontrast, gölge, ton ve RGB rolleri.](https://ionicframework.com/docs/theming/colors) - [CSS değişkenleri Genel ve bileşene özgü özel özellikler.](https://ionicframework.com/docs/theming/css-variables) - [Segment Seçim modeli ve segment etkinlikleri.](https://ionicframework.com/docs/api/segment) - [Aralık Etiketler, adımlar, işaretler, sabitleyiciler ve etkinlik değeri yapısı.](https://ionicframework.com/docs/api/range) - [Toggle İşaretli durumu ve değişiklik etkinlikleri.](https://ionicframework.com/docs/api/toggle) - [Button Genişletme, doldurma ve devre dışı durumlar.](https://ionicframework.com/docs/api/button) - [Shadow parçaları Desteklenen biçimlendirme sınırları.](https://ionicframework.com/docs/theming/css-shadow-parts)