# Quasar Tasarım Sistemi

## Quasar Tasarım Sistemi Arayüz Önizlemesi

Bir oturuma ad verin, biçim seçin, grubu düzenleyin ve açıkça yerel olan bir oturum özeti kaydedin.

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

### Varsayılan Quasar marka rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --q-primary | #1976D2 | Stepper durumu, ana işlem ve kaydırıcı. |
| --q-secondary | #26A69A | İkincil rol. |
| --q-accent | #9C27B0 | Vurgu rolü. |
| --q-positive | #21BA45 | Olumlu geri bildirim rolü. |
| --q-negative | #C10015 | Doğrulama/hata rolü. |
| --q-info | #31CCEC | Bilgi rolü. |
| --q-warning | #F2C037 | Uyarı rolü. |
### Yerel aralık yardımcıları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $space-base | 16px | Temel Sass aralık birimi. |
| q-pa-xs / q-ma-xs | 4px | Temel aralığın dörtte biri. |
| q-pa-sm / q-ma-sm | 8px | Temel aralığın yarısı. |
| q-pa-md / q-ma-md | 16px | Temel aralık. |
| q-pa-lg / q-ma-lg | 24px | Temel aralığın bir buçuk katı. |
| q-pa-xl / q-ma-xl | 48px | Temel aralığın üç katı. |
| q-mt-md | 16px top margin | Uzaktan katılım anahtarının üstünde kullanılır. |
| q-ml-sm | 8px left margin | Gezinme işlemleri arasında kullanılır. |
### Yerel tipografi sınıfı ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| text-h4 | 2.125rem / 2.5rem, weight 400 | Varsayılan büyük başlık yardımcı sınıfı. |
| text-h5 | 1.5rem / 2rem, weight 400 | Varsayılan bölüm başlığı yardımcı sınıfı. |
| text-h6 | 1.25rem / 2rem, weight 500 | Varsayılan küçük başlık yardımcı sınıfı. |
| text-body1 | 1rem / 1.5rem, weight 400 | Varsayılan büyük gövde metni yardımcı sınıfı. |
| text-body2 | 0.875rem / 1.25rem, weight 400 | Varsayılan kompakt gövde metni yardımcı sınıfı. |
| Application font | system-ui, sans-serif | Açıkça tanımlanmış özgün geçersiz kılma; Quasar’ın varsayılan Roboto yazı tipi ailesi burada indirilmez. |
### Kesme noktaları ve açıkça tanımlanmış uygulama geometrisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| sm minimum | 600px | Yerel Quasar kesme noktası başlangıcı. |
| md minimum | 1024px | Yerel Quasar kesme noktası başlangıcı. |
| lg minimum | 1440px | Yerel Quasar kesme noktası başlangıcı. |
| xl minimum | 1920px | Yerel Quasar kesme noktası başlangıcı. |
| Application stack breakpoint | 740px | Özgün iki sütundan tek sütuna geçiş. |
| Page title | 34px / 1.15; 29px mobile | Özgün tipografi hiyerarşisi. |
| Page gap / padding | 24px / 32px | Özgün genel düzen. |
| Participants slider | min 2, max 16, step 1 | Gerçek QSlider özellikleri; yalnızca görsel amaçlı bir aralık değil. |
## Quasar Tasarım Sistemi Kapsamlı 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ı.

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

1. Doğrulama mesajını görmek için ilk adımı boş bir başlıkla gönderin.

2. Anlamlı bir başlık girin ve oturum biçimini seçin.

3. Geri ile devam edip ilk adıma dönerek giriş değerlerinin gezinme boyunca korunduğunu doğrulayın.

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

## Quasar Tasarım Sistemi Bileşen Örnekleri

### Eksiksiz yerel stepper iş akışı

QStepper/QStep, QForm/QInput, QOptionGroup, QSlider, QToggle ve türetilmiş bir gündem.

```
<script setup>
import {ref,computed} from 'vue';import {QStepper,QStep,QStepperNavigation,QForm,QInput,QOptionGroup,QSlider,QToggle,QBtn,QCard,QCardSection,QBadge,QBanner} from 'quasar';
const step=ref(1),title=ref(''),format=ref('critique'),people=ref(8),remote=ref(false),saved=ref(false),form=ref();const formats=[{label:'Design critique',value:'critique'},{label:'Sketching session',value:'sketch'},{label:'Research synthesis',value:'research'}];const names={critique:'Design critique',sketch:'Sketching session',research:'Research synthesis'};const agenda=computed(()=>format.value==='critique'?[['10 min','Set the question'],['25 min','Review the work'],['10 min','Choose next actions']]:format.value==='sketch'?[['5 min','Frame the prompt'],['25 min','Sketch independently'],['15 min','Compare directions']]:[['10 min','Sort observations'],['20 min','Name the patterns'],['15 min','Record open questions']]);async function next(){if(await form.value.validate())step.value=2;}function reset(){step.value=1;title.value='';format.value='critique';people.value=8;remote.value=false;saved.value=false;}
</script>
<template><main class="session-builder"><header><div><p class="eyebrow">QUASAR · GUIDED WORKFLOW</p><h1>Make time for better work.</h1><p class="intro">Build a small session brief with a native stepper, validated fields and a live agenda.</p></div><QBadge color="primary" label="45 MINUTES"/></header><div class="builder-grid"><QStepper v-model="step" vertical color="primary" animated flat bordered class="session-stepper"><QStep :name="1" prefix="1" title="Name the session" caption="Purpose and format" :done="step>1"><QForm ref="form" @submit="next"><QInput v-model="title" outlined label="Session title" maxlength="60" counter lazy-rules :rules="[v=>v.trim().length>=5||'Use at least five non-space characters.']"/><p class="field-label">Session format</p><QOptionGroup v-model="format" :options="formats" color="primary"/><QStepperNavigation><QBtn color="primary" label="Continue" type="submit" no-caps/></QStepperNavigation></QForm></QStep><QStep :name="2" prefix="2" title="Shape the group" caption="People and participation" :done="step>2"><p class="field-label">Participants: <strong>{{people}}</strong></p><QSlider v-model="people" :min="2" :max="16" :step="1" label color="primary" aria-label="Participants"/><QToggle v-model="remote" label="Include remote participants" color="primary" class="q-mt-md"/><p class="hint">{{remote?'Reserve a shared board and a facilitator for the remote group.':'Use one shared table and keep the work visible to everyone.'}}</p><QStepperNavigation><QBtn color="primary" label="Review brief" no-caps @click="step=3"/><QBtn flat label="Back" no-caps class="q-ml-sm" @click="step=1"/></QStepperNavigation></QStep><QStep :name="3" prefix="3" title="Review the brief" caption="Save a local snapshot"><p class="review-title">{{title.trim()}}</p><p>{{names[format]}} · {{people}} people · {{remote?'Hybrid':'In person'}}</p><p class="hint">The agenda totals 45 minutes. Saving does not create a calendar event or invite anyone.</p><QStepperNavigation><QBtn color="primary" :label="saved?'Saved locally':'Save local brief'" :disable="saved" no-caps @click="saved=true"/><QBtn flat label="Back" no-caps class="q-ml-sm" :disable="saved" @click="step=2"/></QStepperNavigation><QBanner v-if="saved" rounded class="bg-green-1 text-green-10 q-mt-lg" role="status">Local brief saved for {{people}} people. No invitation was sent.<template #action><QBtn flat label="Start another" no-caps @click="reset"/></template></QBanner></QStep></QStepper><QCard flat bordered class="agenda-card"><QCardSection><p class="eyebrow">LIVE AGENDA</p><h2>{{title.trim()||'Your next working session'}}</h2><p class="agenda-format">{{names[format]}}</p><div class="time-art" aria-hidden="true"><i></i><i></i><i></i><span>45′</span></div><ol class="agenda-list"><li v-for="row in agenda" :key="row[1]"><span>{{row[0]}}</span><strong>{{row[1]}}</strong></li></ol><div class="session-meta"><span>{{people}} participants</span><span>{{remote?'Hybrid setup':'One shared table'}}</span></div><p class="local-note">Original sample agenda. Quasar supplies the form and navigation components.</p></QCardSection></QCard></div></main></template>
```

Kod referansı

- İlk geçiş, QForm.validate() tamamlanana kadar bekler.

- Başlık kuralı, baştaki ve sondaki boşlukları kaldırılmış anlamlı uzunluğu denetler.

- İnceleme adımı bir takvim etkinliği oluşturmaz.

### Orijinal gündem düzenlemesi

Yerel Quasar bileşenlerinin çevresinde duyarlı bir düzen ve dekoratif zaman illüstrasyonu.

```
html,body{height:auto;min-height:0}body{background:#f3f5f8;font-family:system-ui,sans-serif}.session-builder{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.eyebrow{font-size:11px;font-weight:650;letter-spacing:.13em;color:#5c6c80}h1{font-size:34px;line-height:1.15;font-weight:650;margin:14px 0;letter-spacing:-.02em}.intro{font-size:15px;line-height:1.7;max-width:610px;color:#5c6c80}.builder-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}.field-label{font-size:14px;font-weight:600;margin:20px 0 8px}.hint,.local-note{font-size:12px;line-height:1.7;color:#647187}.review-title{font-size:20px;font-weight:650;line-height:1.4}.agenda-card .q-card__section{padding:24px}.agenda-card h2{font-size:25px;line-height:1.25;font-weight:600;margin:16px 0 8px;letter-spacing:0}.agenda-format{font-size:14px;color:#647187}.time-art{height:140px;background:#e6eef8;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:24px 0}.time-art i{position:absolute;width:130px;height:130px;border:18px solid #8db8e8;border-radius:50%;left:10%;top:45%}.time-art i:nth-child(2){border-color:#c1d7ef;width:170px;height:170px;left:35%;top:-30%}.time-art i:nth-child(3){border-color:#d8e5f5;width:150px;height:150px;left:65%;top:40%}.time-art span{font-size:45px;font-weight:700;position:relative;color:#175a9e}.agenda-list{list-style:none;padding:0;margin:0}.agenda-list li{display:grid;grid-template-columns:65px 1fr;gap:16px;border-bottom:1px solid #dfe5ec;padding:16px 0;font-size:14px}.agenda-list span{color:#657991;font-size:12px}.agenda-list strong{font-weight:600}.session-meta{display:flex;justify-content:space-between;gap:12px;margin:24px 0;font-size:12px;color:#5c6c80}.local-note{margin-bottom:0}@media(max-width:740px){.session-builder{padding:24px 14px}header{flex-direction:column;gap:4px}h1{font-size:29px}.builder-grid{grid-template-columns:1fr}.session-stepper .q-stepper__step-inner{padding-right:18px}.agenda-card .q-card__section{padding:22px}}
```

Kod referansı

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

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

```
// 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 quasar@2.34.0 @quasar/extras@2.1.0
// 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

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

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

- Stepper Adım durumu, gezinme ve erişilebilirlik.

- Form Dahili kural doğrulaması ve gönderme davranışı.

- Input Etiketler, sayaç ve kurallar.

- Seçenek grubu Birbirini dışlayan biçim seçenekleri.

- Slider Sayısal klavye ve işaretçi kontrolü.

- Renkler Çalışma zamanı marka rolleri.

- Boşluklar Yerel boşluk yardımcı sınıfı sözdizimi.

- Tipografi Varsayılan tipografi yardımcı sınıfları.

- Entegrasyon Vue/Vite entegrasyon başvurusu.

## Quasar Tasarım Sistemiyle İlgili Kaynaklar

### React Native Elements

Gerçek tema rolleri, denetimli girdiler ve seçimler, doğrulama, yerel onay ve test edilmiş bir web derlemesiyle React Native Elements 5.0.0 kullanarak eksiksiz bir odak planı oluşturucusu geliştirin.

### React Suite

Doğrulanmış v6 CSS değişkenleri, tarih hücresi işaretçileri, seçili günün gündemi, iletişim kutusu doğrulaması ve açık yerel planlama kuralları içeren yerel bir React Suite inceleme takvimi.

### Skeleton

Eksiksiz bir okuma masasında Skeleton 5.0.1’in gerçek Cerberus, Mint ve Rose temalarını karşılaştırın; belirteçleri canlı inceleyin, koyu yüzey eşleşmelerini görün ve yerel durumu geri alın.


- [Uygulama başvurusu](https://quasar.dev/vue-components/stepper/)
- [Kaynak](https://quasar.dev/style/color-palette/)
- [Kaynak](https://quasar.dev/style/spacing/)
- [Kaynak](https://quasar.dev/style/typography/)
- [Kaynak](https://quasar.dev/style/breakpoints/)
- [Destekleyici belirtimi okuyun](https://quasar.dev/start/vite-plugin/)
- [Destekleyici belirtimi okuyun](https://quasar.dev/style/color-palette/)
- [Destekleyici belirtimi okuyun](https://quasar.dev/style/spacing/)
- [Destekleyici belirtimi okuyun](https://quasar.dev/vue-components/stepper/)
- [Destekleyici belirtimi okuyun](https://quasar.dev/vue-components/form/)
- [Destekleyici belirtimi okuyun](https://quasar.dev/vue-components/option-group/)
- [Destekleyici belirtimi okuyun](https://quasar.dev/vue-components/banner/)
- [Kod referansı](https://quasar.dev/vue-components/stepper/)
- [Kod referansı](https://quasar.dev/style/spacing/)
- [Stepper Adım durumu, gezinme ve erişilebilirlik.](https://quasar.dev/vue-components/stepper/)
- [Form Dahili kural doğrulaması ve gönderme davranışı.](https://quasar.dev/vue-components/form/)
- [Input Etiketler, sayaç ve kurallar.](https://quasar.dev/vue-components/input/)
- [Seçenek grubu Birbirini dışlayan biçim seçenekleri.](https://quasar.dev/vue-components/option-group/)
- [Slider Sayısal klavye ve işaretçi kontrolü.](https://quasar.dev/vue-components/slider/)
- [Renkler Çalışma zamanı marka rolleri.](https://quasar.dev/style/color-palette/)
- [Boşluklar Yerel boşluk yardımcı sınıfı sözdizimi.](https://quasar.dev/style/spacing/)
- [Tipografi Varsayılan tipografi yardımcı sınıfları.](https://quasar.dev/style/typography/)
- [Entegrasyon Vue/Vite entegrasyon başvurusu.](https://quasar.dev/start/vite-plugin/)