Çok platformlu ve mobil kullanıcı arayüzü · Yeni kaynak
Quasar Tasarım Sistemi.
Gerçek marka ve aralık değerleri, QForm doğrulaması, üç adımlı brief oluşturucu, radyo biçim seçenekleri ve canlı 45 dakikalık gündem içeren yerel bir Quasar rehberli iş akışı.
Vue 3 ve @quasar/extras 2.1.0 paketindeki yerel Material Icons ile Quasar 2.34.0. · Uygulama başvurusu
02
Quasar Tasarım Sistemi Tasarım Referansı
Vue 3 ile Quasar 2.34.0. Renkler, çalışma zamanındaki gerçek --q-* değişkenleridir; aralık ve tipografi referansları Sass varsayılanlarından gelir. Uygulama başlığı, gündem görseli ve sistem yazı tipi geçersiz kılması özgündür. Material Icons, @quasar/extras 2.1.0 üzerinden yerel olarak sağlanır.
Quasar Tasarım Sistemi Bileşenleriyle Baştan Sona Bir Rehberli Görev Oluşturulabilir
Quasar Bileşenleriyle Baştan Sona Bir Rehberli Görev Oluşturulabilir
Quasar, stil yardımcıları ve bir uygulama çatısıyla birlikte Vue bileşenleri sunar. Bu örnek, bir formu, radio grubunu, slider'ı, toggle'ı ve son onayı koordine etmek için yerel bir stepper kullanarak bileşenleri doğrudan Vue 3 girişinde çalıştırır. Yalnızca bu denetimleri göstermek için tam ekran QLayout kabuğu gerekmez.
Oturum özetinin belirli bir amacı vardır: karşılık gelen oturum akışını görürken çalışma biçimini ve grup düzenini seçmek. Bileşen kitaplığı denetimleri ve gezinme durumlarını sağlar; üç özgün oturum akışı ve bunların kırk beş dakikalık toplam süreleri ise uygulama içeriğidir. Herhangi bir zamanlama hizmeti ima edilmez.
Quasar Tasarım Sisteminde Marka Değişkenleriyle Adlandırılmış Palet Sınıfları Bir Arada Bulunur
Marka Değişkenleriyle Adlandırılmış Palet Sınıfları Bir Arada Bulunur
Doğrulanmış varsayılan stil sayfasında çalışma zamanındaki --q-primary değeri #1976D2'dir. QStepper, QBtn ve QSlider bileşenlerine color="primary" verilir; böylece birincil stilleri bu role göre belirlenir. Secondary, accent, positive, negative, info ve warning, her denetim için gelişigüzel seçilen renkler yerine ayrı adlandırılmış roller olarak kalır.
Kayıtlı bildirim bandında açık renkli bir yüzey ve koyu metin için adlandırılmış yeşil palet yardımcı sınıfları kullanılır. Açıklayıcı cümlesi, rengin yanı sıra başarı durumunu da belirtir. Mavi halka çizimi özgün dekoratif bir görseldir ve yardımcı teknolojilerden gizlenmiştir; ek bir form durumunu kodlamaz.
Quasar tasarım sistemi Aralık Soneklerini Olduğu Gibi Okuyun
Quasar Aralık Soneklerini Olduğu Gibi Okuyun
Quasar aralık sınıfları tür, yön ve boyutu birleştirir. q-mt-md, orta değerde bir üst kenar boşluğu anlamına gelir; q-ml-sm ise küçük bir sol kenar boşluğu ekler. Varsayılan temel değer on altı pikseldir; xs dört, sm sekiz, md on altı, lg yirmi dört ve xl kırk sekiz pikseldir. xl değerine geçiş, tahminî otuz iki piksellik bir artış değil, temel değerin üç katıdır.
Sayfa, denetimlerin içinde bu yerel yardımcıları; daha geniş yerleşimdeyse özgün CSS değerlerini kullanır. Varsayılan tipografi yardımcı sınıfları arasında 0.875rem boyutundaki text-body2 ve 1.5rem boyutundaki text-h5 bulunur. Özgün sayfa başlığı otuz dört pikseldir ve sayfada yazı tipi açıkça system-ui olarak değiştirilirken yerel bileşen simgeleri için Material Icons korunur.
Quasar Tasarım Sisteminde Stepper Formu Tek Başına Doğrulamaz
Stepper Tek Başına Formu Doğrulamaz
QStepper geçerli adım numarasını tutar ve adlandırılmış üç QStep bölümünü içerir. Bir adım yalnızca sonraki adıma geçildikten sonra tamamlanmış olarak işaretlenir. Örnek, her iki düzende de dikey yönlendirme kullanarak telefonda üç yatay başlığı sıkıştırmadan belirgin bir sıra sunar.
İlk Devam işlemi QForm'a aittir. İşleyicisi, ikinci adıma geçmeden önce validate işleminin tamamlanmasını bekler. Başlıklardan gezinme etkin olmadığından sonraki bir başlığa tıklamak bu denetimi atlayamaz. Geri işlemleri; başlık, biçim ve grup değerlerini özellikle korur, çünkü bu modeller kaldırılıp yeniden oluşturulan bir alanın içinde değil, üst SFC'de bulunur.
Quasar tasarım sistemi QForm, Her Yerel Kısıtı Değil Kendi Kurallarını Kullanır
QForm, Her Yerel Kısıtı Değil Kendi Kurallarını Kullanır
Başlık QInput bileşeninde boşlukları kırpan ve anlamlı en az beş karakter gerektiren bir dahili kurallar dizisi vardır. Bu kural QForm.validate işlemine katılır. validate programatik olarak çağrıldığında tek başına yerel required veya email özniteliği bu kuralın yerini tutmaz; bu nedenle çalışan örnek gerçek kısıtı doğrudan ifade eder.
Geçersiz bir deneme, alan hatasını gösterir ve kullanıcıyı ilk adımda tutar. Girdiyi düzeltmek aynı Devam düğmesinin sonraki adıma geçmesini sağlar. Altmış karakter sınırı ve görünür sayaç, başlığın özete sığmasına yardımcı olurken satır içi kural kısa veya boş bir başlıkla neden devam edilemeyeceğini açıklar.
Doğrulama mesajını görmek için ilk adımı boş bir başlıkla gönderin.
Anlamlı bir başlık girin ve oturum biçimini seçin.
Geri ile devam edip ilk adıma dönerek giriş değerlerinin gezinme boyunca korunduğunu doğrulayın.
Quasar Tasarım Sisteminde Radio, Slider ve Toggle Farklı Kararları Temsil Eder
Radio, Slider ve Toggle Farklı Kararları Temsil Eder
QOptionGroup, Tasarım eleştirisi, Eskiz oturumu ve Araştırma sentezi seçeneklerinden birini belirler. Seçimin değiştirilmesi ilgili oturum akışı dizisini günceller. Oturum akışlarının uzunluğu örnek içerikte sabittir; bu nedenle biçim değişince adlandırılmış etkinlikler güncellenirken toplam süre kırk beş dakika olarak kalır.
QSlider, iki ile on altı arasında bir tam sayı katılımcı sayısını denetler. QToggle, uzaktan katılımcıların dahil edilip edilmediğini kaydeder. Yanındaki ipucu, tek ortak masadan ortak bir panoya ve uzaktan kolaylaştırmaya göre değişir. Bu denetimler birbirinden kopuk demo araçları gibi çalışmak yerine görünür özeti değiştirir.
Quasar Tasarım Sisteminde Son Adım Yerel Sonucu Sıfırlanana Kadar Kilitler
Son Adım Yerel Sonucu Sıfırlanana Kadar Kilitler
İnceleme adımında kırpılmış başlık, biçim, katılımcı sayısı ve katılım biçimi yeniden gösterilir. Kaydetme işlemi yerel kayıtlı durumunu değiştirir, Kaydet ve Geri düğmelerini devre dışı bırakır ve grup büyüklüğünü belirten bir bildirim bandı gösterir. Yeni bir tane başlatma işlemi tüm modelleri temizleyip ilk adıma döner; böylece örnek, baştan sona izlenebilir bir akış sunar.
Takvime veya mesajlaşma API’ına herhangi bir istek gönderilmez. Bildirim bandı açıkça davet gönderilmediğini belirtir; inceleme metni de kaydetmenin bir etkinlik oluşturmadığını söyler. Bir üretim zamanlayıcısının böyle bir iddiada bulunabilmesi için tarih, saat dilimi, alıcılar ve gerçek bir arka uç yanıtı gerekir.
Quasar Tasarım Sisteminde Yerel Bileşen Anlambilimini ve Gerçek Odak Testlerini Kullanın
Yerel Bileşen Anlambilimini ve Gerçek Odak Testlerini Kullanın
Yerel kontroller radio, slider ve switch rollerini sağlar. Slider’a Katılımcı etiketi, başlık alanına ise görünür bir etiket ve alan düzeyinde doğrulama mesajı atanır. Stepper, geçerli adımı belirtir ve içeriğini adım başlığını kullanarak etiketler. Örnekte dekoratif görseller erişilebilir okuma sırasına dahil edilmez.
Yerel testte slider klavyeyle değiştirildi, uzaktan katılım açılıp kapatıldı, doğrulama adımları geçildi ve dokuz kişilik hibrit bir brief kaydedildi. Dar ekran düzeni de kontrol edildi. Stepper’ın statik bir görseli bu ilişkileri gösteremez veya doğrulama koşulunun bağlı olduğunu kanıtlayamaz.
Etkin adımı ve içerik başlığını tutarlı tutun.
Adım modelini değiştirmeden önce kuralları doğrulayın.
Yerel sonucu tam olarak açıklayan bir durum bandı kullanın.
Quasar Tasarım Sistemini ve Beklediği Simge Kümesini Dahil Edin Quasar CSS
Quasar CSS ve Gerektirdiği Simge Setini Ekleyin
Giriş dosyası Quasar’ı içe aktarır, eklentisini kaydeder, quasar/dist/quasar.css dosyasını yükler ve @quasar/extras içindeki Material Icons stil sayfasını içe aktarır. SFC, kullandığı bileşenleri içe aktarır. Yerel paket, onay işaretlerinin ve düzenleme göstergelerinin uzaktaki bir yazı tipi isteği olmadan görüntülenebilmesi için simge yazı tipi dosyalarını içerir.
Orijinal stil sayfası Quasar CSS düzenini izler ve yerleştirme amacıyla belge yüksekliğini içeriğe göre ayarlar. Tüm yerel bileşenlerin stilini genel olarak değiştirmez veya yeni bir aralık ölçeği oluşturmaz. Tam kapsamlı bir Quasar CLI ya da Vite eklentisi kullanan uygulama, standart derleme entegrasyonundan yararlanabilir; bu eksiksiz örnek, aynı bileşenleri küçük bir Vue girişinde gösterir.
Sayfa, yerleştirme için içeriğin yüksekliğini kullanır.
Uygulama yazı tipi geçersiz kılması açıkça belirtilmiştir.
04
Quasar Tasarım Sistemi Ajan Kurulumu
Uygulamaya Başlangıç Noktası
Vue 3 ile Quasar 2.34.0 ve @quasar/extras 2.1.0 doğrulandı. Varsayılan adım göstergelerinin çalışması için simge yazı tipi yerel bir varlık olarak gereklidir.
JavaScript
// Create the project first:
// npm create vite@latest quasar-specimen -- --template vue
// cd quasar-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected] @quasar/[email protected]
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import {Quasar} from 'quasar';
import 'quasar/dist/quasar.css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(Quasar, {plugins: {}}).mount('#app');
// index.html contains <div id="app"></div>.
// Components are explicitly imported in App.vue; no auto-import plugin is required here.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Quasar 2.34.0 sürümünü ve sağlanan yönlendirmeli oturum brief’ini kullanın. QStepper, QForm ve QInput doğrulamasını; oturum biçimi radio kontrollerini, katılımcı slider’ını ve gündem toggle’ını koruyun. İlerlemeden önce form doğrulamasının tamamlanmasını bekleyin, geri giderken girilen değerleri koruyun ve inceleme özetini aynı değerlerden türetin. Kaydetme işlemi yerel bir brief kaydeder; sonraki değişiklikler kaydedilmiş durumunu geçersiz kılar. Quasar stil sayfasını ve yerel Material Icons kurulumunu ekleyin; gönderim veya rezervasyon hizmeti uydurmadan dar ekran düzenini kullanılabilir tutun.
05
Quasar Tasarım Sistemi Kaynakları ve Kapsamı
Yerel bileşenler ve yerel Material Icons ile Quasar 2.34.0. Özgün gündemler ve görsel çizimler örnek içeriktir. Kaydetme işlemi takvim etkinliği oluşturmaz veya davetiye göndermez.
