Kaynaklarla doğrulanmış açık ve koyu ön ayarlar, erişilebilir puan etiketleri, metin alanı doğrulaması, hesaplanan ortalama ve tamamlanan değerlendirmeyi koruyan kayıtlı durum içeren yerel bir Vuestic değerlendirme çalışma sayfası.
Vue 3 ile Vuestic UI 1.10.3; Material Icons, @quasar/extras 2.1.0 aracılığıyla yerel olarak pakete dahil edilmiştir. · Uygulama başvurusu
02
Vuestic UI Tasarım Sistemi Tasarım Referansı
Vuestic UI 1.10.3. Ön ayar değerleri yüklenmiş renk hizmetinden, bileşen değişkenleri ise hizmetin CSS kaynağından okunur. Çalışma sayfası varsayılan açık ön ayarı korur, ancak --va-font-family değerini bilinçli olarak system-ui ile geçersiz kılar. Dekoratif şekiller ve çevresindeki ölçek özgündür.
Vuestic UI Tasarım Sistemi — Adlandırılmış Renk Ön Ayarlarına Sahip Yapılandırılabilir Bir Vue Kütüphanesi
Adlandırılmış Renk Ön Ayarlarına Sahip Yapılandırılabilir Bir Vue Kütüphanesi
Vuestic, paylaşılan hizmetlerini createVuestic aracılığıyla kaydeder. Örnekte vuestic-ui içinden içe aktarılan yerel bileşenler ve varsayılan açık renk ön ayarı kullanılır. Puanlama, düğmeler, ilerleme ve başarı uyarısı anlamsal renk adlarını aynı hizmet üzerinden çözümler.
Çalışma sayfası, bu bileşenlerin somut bir uygulamasıdır: üç değerlendirme sorusunu birbirinden ayırır, destekleyici bir gözlem toplar, ortalama hesaplar ve kaydedilen yerel sonucu kilitler. Renkli ölçüt işaretleri ve iki sütunlu düzen, Vuestic bileşenleri değil, özgün uygulama tasarımıdır.
Vuestic UI Tasarım Sistemi — Hizmet Ön Ayarlarını CSS Geometri Değişkenlerinden Ayırın
Hizmet Ön Ayarlarını CSS Geometri Değişkenlerinden Ayırın
Doğrulanmış açık renk ön ayarında primary #154EC1, success #3D9209 ve textPrimary #262824 tanımlıdır. Koyu ön ayar, açık sayfanın renklerini yalnızca tersine çevirmek yerine farklı primary, text ve surface değerleri kullanır. Referans tablosunda her iki ön ayar da yer alırken önizleme bilerek açık modda kalır.
Bileşen geometrisi, kurulu stil sayfasında ikisi de 0.25rem olan --va-button-border-radius ve --va-form-element-border-radius gibi CSS değişkenleriyle yapılandırılır. Renk ön ayarı ile CSS değişkenini geçersiz kılmak farklı sorunları çözer: anlamsal roller için hizmeti, desteklenen bileşen geometrisi için belgelenmiş değişkeni kullanın.
Vuestic UI Tasarım Sistemi Gerekli Simgeleri Yükleyin ve Yazı Tipi Geçersiz Kılmasını Belirtin
Gerekli Simgeleri Yükleyin ve Yazı Tipi Geçersiz Kılmasını Belirtin
Vuestic’in varsayılan --va-font-family değeri Source Sans Pro’yu belirtir. Örnek, hiç yüklenmemiş bir yazı tipine sessizce bağımlı olmak yerine bu değişkeni system-ui olarak geçersiz kılar. Böylece yerel bileşen etiketleri ve uygulama metinleri açıkça belirtilmiş, kullanılabilir bir yazı tipi yığınını paylaşır.
Varsayılan derecelendirme simgelerinde star ve star_outline gibi Material Icons adları kullanılır. Yerel yazı tipi stil sayfası @quasar/extras paketinden içe aktarılır ve yazı tipi dosyalarıyla birlikte derlenir. Bu varlık olmadan beklenen yıldız şekillerinin yerini simge adlarının düz metni alabilir. Simge yazı tipi, uygulamanın metin yazı tipi ailesi geçersiz kılmasından ayrı tutulur.
Vuestic UI Tasarım Sistemi Yanıtlanmamış Durum İçin Düşük Bir Puan Yerine Sıfır Kullanın
Sıfırı Düşük Puan Yerine Yanıtlanmamış Durum Olarak Kullanın
Her VaRating, bir ölçütün sayısal değerine bağlanır. max değeri beştir ve clearable etkin olduğundan geçerli puanı yeniden seçmek ilgili ölçütü sıfıra döndürebilir. Arayüz, sıfırı beş üzerinden tamamlanmış sıfır puan gibi göstermek yerine Puanlanmadı olarak belirtir.
Ortalama, pozitif puanların sayısına bölünür. Böylece çalışma sayfası doldurulurken yanıtlanmamış ölçütler puanı düşürmez. Kaydetmek için yine de üç ölçütün de yanıtlanması gerekir; bu nedenle son ortalama her zaman eksiksiz değerlendirmeyi temsil eder. Bir puan değiştirildiğinde tamamlanma rozeti, ilerleme çubuğu ve özet anında güncellenir.
Boş çalışma sayfasını kaydedin ve hem eksik puan hem de not geri bildirimini inceleyin.
Netlik için 4, Hiyerarşi için 3 ve Geri Bildirim için 2 verin; ortalama 3.0 olur.
Somut bir gözlem yazıp kaydedin; ardından çalışma sayfasını sıfırlamak için Yeniden başlat’ı kullanın.
Vuestic UI Tasarım Sistemi Yararlı Bir Gözlem İçin Anlamlı Metin ve Yeterli Alan Gerekir
Yararlı Bir Gözlem İçin Anlamlı Metin ve Yeterli Alan Gerekir
VaTextarea’da görünür bir etiket, dört yüz karakterlik sınır ve sayaç bulunur. Kaydetme girişiminden sonra uygulama, baştaki ve sondaki boşlukları kaldırılmış değerin en az yirmi karakter olmasını denetler. Bu nedenle yalnızca boşluklardan oluşan bir dize, görünürde karakter uzunluğu olsa bile gereksinimi karşılamaz.
Metin alanında, en az dört ve en çok on iki satırla autosize etkindir. Bu yalnızca örnek bir prop değil, işlevsel bir ayardır: autosize olmadan minimum satır ayarı, amaçlanan genişleyen not alanını sağlamadı. Düzeltilmiş sürüm, dar ekranlarda gözlemin görünür kalmasını sağlarken olağan dışı uzunluktaki notlar için normal kaydırmayı korur.
Vuestic UI Tasarım Sistemi İlerlemeyi Puan Ortalamasına Değil Tamamlanma Durumuna Göre Hesaplayın
İlerlemeyi Puan Ortalamasından Değil, Tamamlanma Durumundan Türetin
İlerleme çubuğu, pozitif yanıt verilen ölçütlerin sayısını, yani puanlanan ölçüt sayısının üçe bölünüp yüzle çarpılmasıyla ölçer. Yanındaki büyük sayı ise kalite ortalamasını gösterir. Bu iki değerin paydaları farklıdır ve birbirine karıştırılmamalıdır: üç düşük puan da yüzde yüz tamamlanma sağlayabilir.
Tamamlanma cümlesi, payı ve paydayı doğrudan belirtir. Ortalama, Puanlanan ölçütlerin ortalaması olarak etiketlenir ve özette her ölçütün puanı yinelenir. Bu etiketler, okuyucuların açıklanmayan bir ilerleme çubuğunu genel kalite değerlendirmesi olarak yorumlamak yerine hesabı anlamasına yardımcı olur.
Vuestic UI tasarım sistemi Açık Bir Sıfırlama İşlemi Yapılana Kadar Tamamlanmış Yerel Değerlendirmeyi Kilitleyin
Tamamlanmış Yerel Değerlendirmeyi Açıkça Sıfırlanana Kadar Kilitleyin
Kaydetme işlemi önce attempted değerini ayarlar, ardından kaydedilmiş durumu etkinleştirmeden önce tüm puanları ve gözlemi denetler. saved bayrağı, puanları ve metin alanını salt okunur yapar ve Kaydet düğmesini devre dışı bırakır. Başarı uyarısı, değerlendirmenin yerel olarak kaydedildiğini ve hiçbir yere gönderilmediğini belirtir.
Yeniden başlat işlemi, tek bir işleyicide tüm puanları, notu, doğrulama görünürlüğünü ve kaydedilmiş durumu temizler. Kaydetme sonrasında bir değer değiştirilmesi onay mesajını geçersiz kılabileceğinden bu işlem özellikle açıkça sunulur. Örnek, arka uç, hesap veya değerlendirme alıcısı olduğu izlenimini vermez.
Vuestic UI tasarım sistemi Her Puanlama Öğesini Ölçütü ve Değeriyle Adlandırın
Her Puanlama Öğesini Ölçütü ve Değeriyle Adlandırın
Yerel VaRating öğeleri, erişilebilirlik ağacında düğmeler olarak sunulur. aria-item-label, ölçüt adını ve value/max yer tutucularını içererek Netlik puanı 5 üzerinden 4 gibi etiketler oluşturur. Böylece aynı sayfada üç puanlama olduğunda birbirinden ayırt edilemeyen on beş yıldız kontrolünün ortaya çıkması önlenir.
Metin alanının kendi görünür etiketi, ilerleme çubuğunun bir tamamlanma etiketi ve kaydedildi uyarısının bir durum bölgesi vardır. Dekoratif ölçüt işaretleri yardımcı teknolojilerden gizlenir. Yerel kontroller, yalnızca ARIA niteliklerinin varlığına güvenmek yerine etiketli gerçek puanlama düğmelerini tıkladı, doğrulamayı çalıştırdı ve son düzeni 280px genişlikte inceledi.
Tekrarlanan her puanlama için ölçüte özgü bir öğe etiketi kullanın.
Yanıtlanmamış ve salt okunur durumları görsel olarak ayırt edilebilir tutun.
Gerçek yerel kontrollerle etkileşim kurduktan sonra sayısal özeti doğrulayın.
Vuestic UI Tasarım Sistemi Eklentiyi, Bileşen CSS ve Yerel Simge Varlığını Dahil Edin
Eklentiyi, Bileşen CSS ve Yerel Simge Varlığını Dahil Edin
Giriş noktası createVuestic’i kaydeder ve özgün düzen stil sayfasından önce vuestic-ui/css dosyasını içe aktarır. App.vue, kullandığı tüm bileşenleri içe aktarır; bu nedenle örnek, belgelenmemiş bir otomatik içe aktarma yapılandırmasına bağlı değildir. Paylaşılan yazı tipi geçersiz kılması, kütüphane CSS değerinden sonra uygulanır.
Paket komutunda @quasar/extras yalnızca yerel Material Icons yazı tipi kaynağı olarak bulunur; Quasar kaydedilmez veya bileşenleri çalışma sayfasına dahil edilmez. Yukarıdaki eksiksiz SFC ve stil sayfası, aşağıdaki Vite Vue kurulumuna doğrudan eklenebilir. Oluşturulan bağımsız önizleme gerekli varlıkları satır içine alır ve uzaktaki bir yazı tipini yüklemez.
VaRating, VaTextarea, VaButton, VaChip, VaProgressBar ve VaAlert tek bir değerlendirme modeline bağlanır.
vue
<script setup>
import {ref,computed} from 'vue';
import {VaRating,VaTextarea,VaButton,VaAlert,VaChip,VaProgressBar} from 'vuestic-ui';
const criteria=ref([{name:'Clarity',hint:'Can you tell what the next action will do?',value:0},{name:'Hierarchy',hint:'Does the most important information stand out?',value:0},{name:'Feedback',hint:'Does the page explain what changed?',value:0}]);
const note=ref(''),attempted=ref(false),saved=ref(false);
const rated=computed(()=>criteria.value.filter(x=>x.value>0).length),average=computed(()=>rated.value?(criteria.value.reduce((a,x)=>a+x.value,0)/rated.value).toFixed(1):'—');
const noteError=computed(()=>attempted.value&¬e.value.trim().length<20);
function save(){attempted.value=true;if(rated.value===3&¬e.value.trim().length>=20)saved.value=true}
function reset(){criteria.value.forEach(x=>x.value=0);note.value='';saved.value=false;attempted.value=false}
</script>
<template><main class="review-shell"><header><p class="eyebrow">DESIGN CRITIQUE · PERSONAL WORKSHEET</p><h1>Turn an impression into useful feedback.</h1><p>Review an interface using three specific questions. Keep one concrete observation alongside the scores.</p></header><div class="review-layout"><section class="review-form"><div class="form-head"><h2>Your assessment</h2><VaChip outline size="small">{{rated}} of 3 rated</VaChip></div><div v-for="(criterion,index) in criteria" :key="criterion.name" class="criterion"><div class="criterion-mark" :class="'mark-'+index" aria-hidden="true"><i></i><b></b></div><div class="criterion-body"><h3>{{criterion.name}}</h3><p>{{criterion.hint}}</p><VaRating v-model="criterion.value" :max="5" clearable color="primary" :readonly="saved" :aria-label="criterion.name+' rating: '+criterion.value+' of 5'" :aria-item-label="criterion.name+' score {value} of {max}'"/><span class="score">{{criterion.value?criterion.value+' / 5':'Not rated'}}</span></div></div><p v-if="attempted&&rated<3" class="error" role="alert">Rate all three criteria before saving.</p><VaTextarea v-model="note" label="One concrete observation" placeholder="For example: the Save button gives no confirmation after the form closes." autosize :min-rows="4" :max-rows="12" :max-length="400" counter :error="noteError" :error-messages="noteError?['Write at least 20 meaningful characters.']:[]" :readonly="saved"/><div class="actions"><VaButton @click="save" :disabled="saved">Save assessment</VaButton><VaButton preset="secondary" @click="reset">Start again</VaButton></div></section><aside><div class="summary"><p class="eyebrow">ASSESSMENT SNAPSHOT</p><div class="average">{{average}}<span>/ 5</span></div><p class="average-label">Average of rated criteria</p><VaProgressBar :model-value="rated/3*100" color="primary" aria-label="Criteria completion"/><p class="completion">{{rated}} of 3 criteria completed</p><p class="guidance">A score starts a conversation. Your example explains what should change and why.</p><dl><div v-for="criterion in criteria" :key="criterion.name"><dt>{{criterion.name}}</dt><dd>{{criterion.value||'—'}}</dd></div></dl></div><VaAlert v-if="saved" color="success" outline class="saved" role="status"><strong>Assessment saved locally.</strong><p>All three criteria and your observation are captured in this preview. Nothing was sent.</p></VaAlert><p v-else class="local-note">This worksheet stores only local page state. It does not submit a review to another person.</p></aside></div></main></template>
Material Icons kendi yazı tipi ailesini kullanmaya devam eder.
Belge yüksekliği için minimum değer kullanılmaz.
04
Vuestic UI Tasarım Sistemi Aracı Kurulumu
Uygulamaya Başlangıç Noktası
Vuestic UI 1.10.3 ve @quasar/extras 2.1.0 paketindeki yerel Material Icons doğrulandı. Her iki eksiksiz kaynak örneği de sunulmuştur; harici bir yazı tipi hizmeti gerekmez.
JavaScript
// npm create vite@latest vuestic-review -- --template vue
// cd vuestic-review && npm install
// npm install [email protected] @quasar/[email protected]
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createVuestic} from 'vuestic-ui';
import 'vuestic-ui/css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createVuestic()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Üç yerel VaRating ölçütü, VaTextarea, ilerleme durumu, durum bildirimleri ve kaydetme/sıfırlama kontrolleriyle tasarım eleştirisi çalışma sayfasını oluşturmak için Vuestic UI 1.10.3 kullanın. Ortalamayı puanlanan ölçütlere göre hesaplayın ve kaydetmeden önce üç puanın tamamını ve boşlukları kırpılmış yirmi karakterlik notu zorunlu tutun. Eleştirinin tamamını görünür tutmak için otomatik boyutlanan metin alanını koruyun; kaydedilmiş salt okunur durumun ve sıfırlama davranışının tutarlı olmasını sağlayın. createVuestic’i, yerel CSS değerini ve yerel simge yazı tipini ekleyin. Bu, yerel bir değerlendirme kaydıdır; toplu inceleme hizmeti değildir.
05
Vuestic UI Tasarım Sistemi Kaynakları ve Kapsamı
Varsayılan açık renk ön ayarı ve açıkça belirtilmiş sistem yazı tipi geçersiz kılmasıyla Vuestic UI 1.10.3. Özgün değerlendirme soruları ve görseller. Kaydedilen durum yereldir; harici bir değerlendirme gönderimi veya yeniden yüklemeler arasında kalıcılık yoktur.
