Çok platformlu ve mobil kullanıcı arayüzü · Yeni kaynak
Vant Tasarım Sistemi.
Vant 4 ile oluşturulmuş mobil adres seçme akışı: gerçek CSS değişkenleri, denetimli adres kimliği, alan doğrulama, tema değiştirme ve açıkça yalnızca yerel olarak kaydetme.
Vue 3 ile yerel Vant 4.10.2. Kâğıt görseli ve çevresindeki düzen özgündür. · Uygulama başvurusu
02
Vant Tasarım Sistemi Tasarım Referansı
Yüklenmiş temel stil sayfasından okunan Vant 4.10.2 CSS değişkenleri. Önizlemede ConfigProvider aracılığıyla özgün bir turkuaz birincil renk geçersiz kılması uygulanır; aşağıdaki varsayılan roller açıkça belirtilmiştir.
Açıkça Belirtilmiş CSS Rollerine Sahip Vant Tasarım Sistemi Mobil Bileşenleri
Açıkça Belirtilmiş CSS Rollerine Sahip Mobil Bileşenler
Vant, Vue tabanlı mobil web arayüzlerini hedefler. AddressList, Field ve CellGroup bileşenleri, masaüstü yönetim tablosu yerine kompakt teslimat adresi satırları ve form hücreleri sunar. Örnek kiti akışında bu yerel bileşenler kullanılır ve seçilen teslimat noktası ayrı bir özette gösterilir.
--van-primary-color aracılığıyla varsayılan birincil rol mavi olarak ayarlanır. Başarı, tehlike ve uyarı rollerinin her biri ayrı renk değişkenlerine başvurur. Örnek, ConfigProvider aracılığıyla birincil rengi bilerek #176b77 olarak değiştirir; bu turkuaz rengi resmî bir Vant marka rengi olarak tanımlamaz. Özgün kâğıt dokusu görseli dekoratiftir ve hiçbir kontrol durumunu belirtmez.
Vant Tasarım Sistemi: Dört Piksel Aralık Ölçeği ve Kompakt Tipografi
Dört Piksel Aralık Ölçeği ve Kompakt Tipografi
Vant, 4, 8, 12, 16, 24 ve 32 piksellik dolgu değerleri sunar. Bunlar ekran görüntüsünden çıkarım yoluyla elde edilmemiş, temel değişkenlerin gerçek değerleridir. Adres listesi öğelerinde küçük dolgu belirteci kullanılırken çevresindeki önizlemede formu ve sipariş özetini birbirinden ayırmak için daha geniş bölüm aralıkları kullanılır.
Adlandırılmış metin boyutları 10 ile 16 piksel, bunlara eşlik eden satır yükseklikleri ise 14 ile 22 piksel arasındadır. Adres metninin kendine ait 13px bileşen değişkeni vardır. Mobil bir üründe, bu kontrol varsayılanlarından daha büyük editoryal metinler gerekebilir: örnek başlık özgün 32px boyutundadır ve sayfa kesme noktasında 27px'e düşürülür.
Vant Tasarım Sistemi: Radyo Seçimini Bir Adres Kimliği Belirler
Radyo Seçimini Bir Adres Kimliği Belirler
AddressList; id, name, tel, address ve isteğe bağlı isDefault alanlarına sahip kayıt listelerini alır. v-model değeri seçilen kaydı belirtir. Özet, geçerli listedeki bu kimliğe göre hesaplanır. Böylece alıcı düzenlendiğinde, bağımsız bir ikinci özet durumu oluşturmaya gerek kalmadan görüntülenen teslimat noktası hemen güncellenir.
Kullanılamayan depo, disabled-list aracılığıyla aktarılır ve devre dışı olduğunu açıklayan anlaşılır bir metinle gösterilir. Bağlam sağlamak üzere görünür kalır ancak seçilen teslimat noktası olamaz. Default rozeti kaydın varsayılan durumunu belirtir; mevcut seçimden ayrıdır ve başka bir radyo seçeneği seçildiğinde değişmez.
Vant Tasarım Sistemi: Taslağı Kaydedilmiş Kayıttan Ayrı Tutun
Taslağı Kaydedilmiş Kaydın Ayrı Tutun
Düzenleme olayı adres kaydını sağlar. Düzenleyici yalnızca düzenlenebilir alanları reaktif bir taslağa kopyalar ve sabit kimliğini ayrı olarak saklar. İptal, kaydedilmiş adresi değiştirmeden bu taslağı gizler. Kaydetme işlemi eşleşen kaydı günceller veya yeni bir yerel kayıt ekler, ardından bu kimliği seçer.
Örnek, alt açılır pencere açmak yerine düzenleme alanını listenin altında gösterir. Böylece örnek, gömülü bir belgede de tüm işlevleriyle kullanılabilir. Vant standartlaştırılmış adres girişi için AddressEdit bileşenini de sunar; bu örnekte ise Form ve Field kullanılır, çünkü örnek adreslerde bilerek herhangi bir ülkenin idari bölge verilerinin geçerli olduğu varsayılmaz.
Bir stüdyo seçin ve Düzenle'yi açmadan önce özeti kontrol edin.
Alıcıyı değiştirin, ardından kaydedilmiş satırın değişmediğini doğrulamak için iptal edin.
Düzenleyiciyi yeniden açın, geçerli alanları kaydedin ve seçilen özeti inceleyin.
Vant Tasarım Sistemi: Field Kuralları Gönderim Olayını Denetler
Field Kuralları Gönderim Olayını Denetler
Form, validate-trigger="onSubmit" kullanır. Alıcı doğrulayıcısı boşlukları temizler ve en az iki karakter girilmesini zorunlu kılar. Telefon doğrulayıcısı, isteğe bağlı baştaki artı işaretiyle birlikte makul sayıda rakam, boşluk, parantez ve kısa çizgi karakterini kabul eder. Adres doğrulayıcısı, boşluk olmayan en az on karakter ister. Bu kontroller işleyişi göstermek içindir; posta adresi doğrulaması veya evrensel telefon numarası doğrulaması değildir.
native-type="submit" kullanan birincil Button, yerel formu gönderir. Vant, yalnızca kurallar başarılı olduğunda submit olayını tetikler. Hatalar ilgili Field alanının yanında görünür, scroll-to-error ise geçersiz alanı görünür alana taşır. Önizleme, düzenleme başladığında alıcı alanındaki ilk girişe de odaklanır. Doğrulama başarısız olduğunda taslağı korur.
theme-vars nesnesi primaryColor, buttonPrimaryBackground, buttonPrimaryBorderColor ve addressListPadding değerlerini içerir. ConfigProvider, bu adları karşılık gelen --van-* değişkenlerine eşler. Takma adların değiştirilmiş birincil rolle çözümlenebilmesi için bu yalıtılmış belgede theme-vars-scope="global" kullanılır. Rolün ve birincil düğmeyle ilgili iki değerin üzerine yazılması, yerel eylem ile radyo seçiminin uyumlu kalmasını sağlar.
theme özelliğini light ve dark arasında değiştirmek, Vant bileşen temasını günceller. Sayfanın yine de tema değişkenlerini kullanarak kendi arka plan ve metin bildirimlerini tanımlaması gerekir; yalnızca sağlayıcıyı ayarlamak, uygulamadaki her öğeye görünüm kazandırmaz. Dekoratif kâğıt örnekleri, her iki temada da malzeme renklerini bilerek korur.
Vant Tasarım Sistemi Sabit Mobil İşlem İçin Yerleştirme Kararı Gerekir
Sabit Mobil İşlem İçin Yerleştirme Kararı Gerekir
AddressList, sabit ekleme düğmesi için normalde altta seksen piksellik bir iç boşluk ayırır. Önizleme, show-add-button değerini false yapar ve normal akışta yer alan bir Button sağlar. Ayrıca addressListPadding değerini on iki piksele ayarlar; böylece ne içerikten kopuk sabit bir işlem düğmesi kalır ne de gömülü örneğin içinde açıklanmamış boş bir alt alan oluşur.
Geniş ekranda liste ve malzeme özeti iki sütun hâlinde gösterilir. Özgün 680px kesme noktasının altında sütunlar alt alta dizilir. Yerel AddressList height:100% değeri, panelin sonraki ızgara satırının üzerine binmek yerine içeriğine göre boyutlanması için açıkça height:auto olarak sıfırlanır. Genel bir minimum görünüm alanı yüksekliği kullanılmadığından üst sayfa, gömülü belgenin boyutunu içeriğine göre belirleyebilir. Sayfanın genişliğini zorlamamaları için dar ekranlarda adres adları satır kaydırır.
Vant Tasarım Sistemi Görünür Odak ve Açıkça Belirtilmiş Yerel Sonuçlar
Görünür Odak ve Açıkça Belirtilmiş Yerel Sonuçlar
Vant temel sıfırlaması varsayılan odak dış çizgilerini kaldırır. Eşlik eden sayfa stil sayfası, düğmeler, giriş alanları, metin alanları ve tab-index atanmış denetimler için üç piksellik bir focus-visible halkası geri getirir. Bu, uygulama düzeyinde bir eklemedir; yalnızca kütüphane içe aktarımının erişilebilirlik çalışmalarını tamamladığı anlamına gelmez. Tema değiştiricinin erişilebilir bir adı ve görünür bir etiketi vardır.
Durum bildirimi, yerel kaydı veya hedef seçimini belirtir. Herhangi bir teslimatın rezerve edilmediğini açıkça söyler. Bu örnekte ödeme uç noktası, depolama veya harici yan etki yoktur. Gerçek bir ödeme akışı için satın alma öncesinde sunucu tarafında adres doğrulaması, teslimat uygunluğu kontrolü ve son bir inceleme gerekir.
Kullanılamayan adresleri sessizce silmek yerine, neden kullanılamadıklarını görünür biçimde açıklayın.
Geçersiz gönderimden sonra taslağı koruyun; böylece kullanıcı tek bir alanı düzeltebilir.
Bir işlemin yerel seçimi mi değiştirdiğini, yoksa gerçekten teslimat rezervasyonu mu yaptığını açıklayın.
Vant Tasarım Sistemi Yerel Ayarı ve Bileşen Stillerini İçe Aktarma
Yerel Ayarı ve Bileşen Stillerini İçe Aktarın
Tam SFC, bileşenlerini yerel olarak içe aktarır. Giriş dosyası, Locale.use aracılığıyla İngilizce yerel ayarını etkinleştirir ve özgün düzen stil sayfasından önce vant/lib/index.css dosyasını içe aktarır. Doğrulanmış paket, Vue 3 ile Vant 4.10.2’dir; İngilizce yerel ayar içe aktarımındaki .mjs uzantısı, yüklü ESM dosyasıyla eşleşir.
Bağımsız önizleme, JavaScript, CSS ve simge yazı tipini belgeye gömer. Gömülü WOFF2 yazı tipini koruduktan sonra kullanılmayan uzak WOFF yedeğini kaldırır; böylece örnek, üçüncü taraf bir yazı tipi isteğine bağlı olmaz. Üretim uygulamaları, barındırılan demo URL’sini kopyalamak yerine kendi paketleyicilerini ve varlık politikalarını kullanmalıdır.
Bileşen geometrisi Vant tarafından belirlenir; 680px sayfa kesme noktası ise uygulama tercihidir.
Temel sıfırlama varsayılan dış çizgileri kaldırdığı için önizleme görünür bir odak halkasını geri getirir.
04
Vant Tasarım Sistemi Temsilci Kurulumu
Uygulamaya Başlangıç Noktası
Vue 3 ve Vant 4.10.2 ile doğrulanmıştır. Örnek, adresleri bellekteki durumu dışında hiçbir yerde saklamaz.
JavaScript
// Create the project first:
// npm create vite@latest vant-specimen -- --template vue
// cd vant-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected]
// Save the complete SFC as App.vue and the supplied layout as style.css.
import {createApp} from 'vue';
import {Locale} from 'vant';
import enUS from 'vant/es/locale/lang/en-US.mjs';
import 'vant/lib/index.css';
import './style.css';
import App from './App.vue';
Locale.use('en-US',enUS);
createApp(App).mount('#app');
// index.html must contain <div id="app"></div>.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Vant 4.10.2 sample-kit adres seçicisiyle başlayın. Yerel bir adres eklemek veya değiştirmek için yerel AddressList ile Form/Field düzenleme akışını; alan doğrulaması ve seçili adres durumu dâhil olmak üzere koruyun. Locale kurulumunu, en-US modülünü, ConfigProvider tema kapsamını ve içeriğe göre yükseklik ayarı yapan AddressList uyarlamasını koruyun. İptal işlemi mevcut adresin yerini almamalıdır; başarılı doğrulama yalnızca yerel adres koleksiyonunu günceller. Yalnızca adresi ele alan bu örneğe ödeme veya teslimat saatiyle ilgili başarı iddiaları eklemeyin.
05
Vant Tasarım Sistemi Kaynakları ve Kapsamı
Vant 4.10.2. Varsayılan belirteçler ile özgün sayfa tercihleri birbirinden ayrılmıştır. Örnek adresler kurgusaldır; seçim ve düzenleme yerel olarak kalır.
