# Vuestic UI Tasarım Sistemi

## Vuestic UI Tasarım Sistemi Arayüz Önizlemesi

Yerel bir değerlendirme kaydedin; netliği, hiyerarşiyi ve geri bildirimi puanlayın, anlamlı bir gözlem ekleyin.

## 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.

### Varsayılan açık renk ön ayarı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| primary | #154EC1 | Puanlama ve birincil eylem. |
| secondary | #767C88 | İkincil rol. |
| success | #3D9209 | Kaydedilen sonuç. |
| info | #158DE3 | Bilgi rolü. |
| danger | #E42222 | Hata rolü. |
| warning | #FFD43A | Uyarı rolü. |
| backgroundPrimary | #f6f6f6 | Varsayılan ana yüzey. |
| backgroundSecondary | #FFFFFF | Varsayılan yükseltilmiş yüzey. |
| backgroundElement | #ECF0F1 | Öğe yüzeyi. |
| backgroundBorder | #DEE5F2 | Sınır rolü. |
| textPrimary | #262824 | Ana metin. |
| textInverted | #FFFFFF | Ters metin. |
| focus | #49A8FF | Odak rolü. |
### Varsayılan koyu ön ayar karşılaştırması

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| primary | #3472F0 | Resmî koyu ön ayar referansı; yerel örnek açık temada kalır. |
| success | #66BE33 | Resmî koyu ön ayar referansı; yerel örnek açık temada kalır. |
| danger | #F34030 | Resmî koyu ön ayar referansı; yerel örnek açık temada kalır. |
| backgroundPrimary | #050A10 | Resmî koyu ön ayar referansı; yerel örnek açık temada kalır. |
| backgroundSecondary | #1F262F | Resmî koyu ön ayar referansı; yerel örnek açık temada kalır. |
| backgroundElement | #131A22 | Resmî koyu ön ayar referansı; yerel örnek açık temada kalır. |
| backgroundBorder | #3D4C58 | Resmî koyu ön ayar referansı; yerel örnek açık temada kalır. |
| textPrimary | #F1F1F1 | Resmî koyu ön ayar referansı; yerel örnek açık temada kalır. |
| textInverted | #0B121A | Resmî koyu ön ayar referansı; yerel örnek açık temada kalır. |
### Yerel CSS ve açık uygulama ölçekleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --va-font-family | "Source Sans Pro", sans-serif | Kütüphane varsayılanı; örnekte açıkça system-ui olarak geçersiz kılınmıştır. |
| --va-button-border-radius | 0.25rem | Derlenmiş yerel düğme köşe yarıçapı. |
| --va-form-element-border-radius | 0.25rem | Derlenmiş ortak form köşe yarıçapı. |
| --va-button-content-py | 0.5rem | Düğmenin dikey içerik dolgusu. |
| --va-button-content-px | 0.75rem | Düğmenin yatay içerik dolgusu. |
| --va-rating-number-item-margin | 0.1em | Yerel number modu boşluk referansı. |
| --va-rating-number-item-font-weight | 700 | Yerel number modu vurgu referansı. |
| Application title | 34px / 1.15; 29px narrow | Özgün başlık hiyerarşisi. |
| Application spacing | 6 / 7 / 8 / 10 / 12 / 14 / 16 / 18 / 22 / 24 / 28 / 32px | Vuestic belirteç basamakları değil, özgün stil sayfasındaki gerçek değerler. |
| Application panel radius | 14px | Özgün çevre geometrisi. |
| Layout | Flexible form + 280px summary; stack below 760px | İçerik yüksekliğine göre boyutlanan gömülü düzen. |
## Vuestic UI Tasarım Sistemi Eksiksiz Kılavuzu

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ı.

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

1. Boş çalışma sayfasını kaydedin ve hem eksik puan hem de not geri bildirimini inceleyin.

2. Netlik için 4, Hiyerarşi için 3 ve Geri Bildirim için 2 verin; ortalama 3.0 olur.

3. Somut bir gözlem yazıp kaydedin; ardından çalışma sayfasını sıfırlamak için Yeniden başlat’ı kullanın.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## Vuestic UI Tasarım Sistemi Bileşen Örnekleri

### Eksiksiz yerel değerlendirme çalışma sayfası

VaRating, VaTextarea, VaButton, VaChip, VaProgressBar ve VaAlert tek bir değerlendirme modeline bağlanır.

```
<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&&note.value.trim().length<20);
function save(){attempted.value=true;if(rated.value===3&&note.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>
```

Kod referansı

- Sıfır, puanlanmamış anlamına gelir ve ortalamaya dahil edilmez.

- Kaydetmek için üç puanın tamamı ve boşlukları kırpılmış en az yirmi karakterlik bir not gerekir.

- Kaydedilen puanlar ve metin, Yeniden başlat’a basılana kadar salt okunur olur.

### Eksiksiz özgün düzen ve yazı tipi yapılandırması

Açıkça belirtilmiş yazı tipi geçersiz kılması, duyarlı kartlar ve dekoratif ölçüt işaretleri.

```
:root{--va-font-family:system-ui,sans-serif}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{background:#f3f5f8;color:#262824;font-family:system-ui,sans-serif}.review-shell{max-width:1100px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.13em;color:#667182}h1{font-size:34px;line-height:1.15;margin:12px 0;max-width:710px}header>p:last-child{max-width:640px;line-height:1.6;font-size:15px;color:#677080}.review-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;margin-top:28px}.review-form,.summary{background:white;border:1px solid #dee5f2;border-radius:14px;padding:24px;min-width:0}.form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.form-head h2{font-size:20px;font-weight:650}.criterion{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid #e6eaf0}.criterion:last-of-type{margin-bottom:24px}.criterion-body{min-width:0;flex:1}.criterion h3{font-size:16px;font-weight:650;margin:0 0 6px}.criterion p{font-size:13px;line-height:1.5;color:#677080;margin:0 0 12px}.criterion-mark{width:58px;height:58px;border-radius:12px;flex-shrink:0;position:relative;overflow:hidden;background:#e8efff}.criterion-mark i,.criterion-mark b{position:absolute;display:block}.mark-0 i{width:27px;height:27px;background:#7a9cdf;border-radius:50%;left:10px;top:14px}.mark-0 b{width:14px;height:14px;background:#154ec1;border-radius:50%;left:31px;top:22px}.mark-1{background:#eee8f8}.mark-1 i{width:15px;height:34px;background:#9273b6;left:10px;top:13px}.mark-1 b{width:15px;height:19px;background:#c2aedb;left:32px;top:28px}.mark-2{background:#e6f0e0}.mark-2 i{width:36px;height:23px;border-radius:6px;background:#86a16f;left:11px;top:14px}.mark-2 b{border:8px solid transparent;border-top-color:#86a16f;left:17px;top:33px}.score{display:block;font-size:11px;color:#667182;margin-top:7px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.average{font-size:64px;line-height:1.2;font-weight:650;margin-top:16px;color:#154ec1}.average span{font-size:19px;color:#78828f;font-weight:400;margin-left:8px}.average-label{font-size:12px;color:#697482;margin:5px 0 24px}.completion{font-size:11px;color:#687387;margin-top:10px}.guidance{font-size:14px;line-height:1.6;margin:24px 0}.summary dl>div{display:flex;justify-content:space-between;border-top:1px solid #e6eaf0;padding:12px 0;font-size:13px}.summary dd{font-weight:700}.saved{margin-top:16px;font-size:13px;line-height:1.6}.saved p{margin-top:7px}.local-note{font-size:12px;line-height:1.6;color:#687387;padding:16px 5px}.error{font-size:13px;color:#b71717;margin-bottom:16px}@media(max-width:760px){.review-shell{padding:20px}.review-layout{grid-template-columns:minmax(0,1fr)}h1{font-size:29px}}@media(max-width:360px){.review-shell{padding:14px}.review-form,.summary{padding:16px}.criterion{gap:12px}.criterion-mark{width:38px;height:48px}.criterion-mark i,.criterion-mark b{transform:scale(.7);transform-origin:left}.criterion-mark i{left:4px}.criterion-mark b{left:18px}.actions>*{width:100%}.va-textarea{max-width:100%}}
```

Kod referansı

- Material Icons kendi yazı tipi ailesini kullanmaya devam eder.

- Belge yüksekliği için minimum değer kullanılmaz.

## 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.

```
// npm create vite@latest vuestic-review -- --template vue
// cd vuestic-review && npm install
// npm install vuestic-ui@1.10.3 @quasar/extras@2.1.0
// 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

```
Üç 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.
```

## 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.

- Kurulum Eklenti ve stil sayfası kurulumu.

- Renk yapılandırması Adlandırılmış anlamsal ön ayarlar.

- CSS değişkenleri Desteklenen bileşen geometrisi ve yazı tipi geçersiz kılmaları.

- Derecelendirme Temizlenebilir durum, etiketler ve model.

- Metin alanı Otomatik boyutlandırma, satır sınırları ve doğrulama görünümü.

- İlerleme çubuğu Değer ve maksimum semantiği.

- Alert Görünür sonuç sunumu.

## Vuestic UI Tasarım Sistemi İlgili Kaynaklar

### Web Awesome

Kapsamı belirlenmiş köşe yarıçapı ve boşluk değişiklikleri, shadow DOM stillendirmesi, seçim davranışı ve girdi doğrulaması dahil olmak üzere yerel özel öğelerde Web Awesome’ın gerçek anlamsal belirteçlerini inceleyin.

### Ariakit

Ariakit, açıkça tanımlanmış ortak duruma ve birleştirilebilir erişilebilir parçalara sahip, stilsiz React bileşenleri sunar. Combobox, yazılan metni onaylanmış seçimden ayırdığı için arama tabanlı seçicilerde kullanışlıdır; aşağıdaki referans bulucu, gruplandırılmış ve kullanılamayan sonuçlarla bu farkı gösterir.

### Bits UI

Bits UI, yerel parçalar ve Svelte 5 durumuyla bir araya getirilebilen başsız Svelte bileşenleri sunar. Örnek; türetilmiş karma durumlu bir onay kutusunu, birbirinden bağımsız açılan akordeon bölümlerini ve portal tabanlı bir inceleme iletişim penceresini eksiksiz stil yapılandırmasıyla birleştirir.


- [Uygulama başvurusu](https://ui.vuestic.dev/ui-elements/rating/)
- [Kaynak](https://ui.vuestic.dev/services/colors-config/)
- [Kaynak](https://ui.vuestic.dev/styles/css-variables/)
- [Destekleyici belirtimi okuyun](https://ui.vuestic.dev/getting-started/installation/)
- [Destekleyici belirtimi okuyun](https://ui.vuestic.dev/services/colors-config/)
- [Destekleyici belirtimi okuyun](https://ui.vuestic.dev/styles/css-variables/)
- [Destekleyici belirtimi okuyun](https://ui.vuestic.dev/ui-elements/rating/)
- [Destekleyici belirtimi okuyun](https://ui.vuestic.dev/ui-elements/textarea/)
- [Destekleyici belirtimi okuyun](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Destekleyici belirtimi okuyun](https://ui.vuestic.dev/ui-elements/alert/)
- [Kod referansı](https://ui.vuestic.dev/ui-elements/rating/)
- [Kod referansı](https://ui.vuestic.dev/styles/css-variables/)
- [Kurulum Eklenti ve stil sayfası kurulumu.](https://ui.vuestic.dev/getting-started/installation/)
- [Renk yapılandırması Adlandırılmış anlamsal ön ayarlar.](https://ui.vuestic.dev/services/colors-config/)
- [CSS değişkenleri Desteklenen bileşen geometrisi ve yazı tipi geçersiz kılmaları.](https://ui.vuestic.dev/styles/css-variables/)
- [Derecelendirme Temizlenebilir durum, etiketler ve model.](https://ui.vuestic.dev/ui-elements/rating/)
- [Metin alanı Otomatik boyutlandırma, satır sınırları ve doğrulama görünümü.](https://ui.vuestic.dev/ui-elements/textarea/)
- [İlerleme çubuğu Değer ve maksimum semantiği.](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Alert Görünür sonuç sunumu.](https://ui.vuestic.dev/ui-elements/alert/)