# Oruga UI Tasarım Sistemi

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

Denetimli bir terim dağarcığında arama yapın, en fazla üç konu ekleyin, bir etiketi kaldırın ve yerel not açıklamasını kaydedin.

## Oruga UI Tasarım Sistemi Tasarım Referansı

@oruga-ui/theme-oruga 0.10.0 ile Oruga Vue 3 paketi 0.14.4. Aşağıdaki değerler değişmez bir başsız çekirdeğe değil, bu isteğe bağlı varsayılan temaya aittir. MDI 7.4.47 simgeleri yerel olarak sağlanır. Çevreleyen katalog düzeni ve klasör görselleri özgündür.

### İsteğe bağlı Oruga temasının anlamsal renkleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --oruga-primary | #445e00 | Seçili etiketler ve ana eylem. |
| --oruga-primary-invert | #fff | Birincil etiketlerdeki metin. |
| --oruga-success | #006724 | Başarı varyantı. |
| --oruga-info | #005c98 | Bilgi varyantı. |
| --oruga-warning | #f4c300 | Uyarı varyantı. |
| --oruga-danger | #b60000 | Alan hata varyantı. |
| --oruga-control-border-color | #dbdbdb | Varsayılan alan kenarlığı. |
### İsteğe bağlı temanın tipografisi, boşlukları ve geometrisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --oruga-font-size | 1rem | Varsayılan metin boyutu. |
| --oruga-line-height | 1.5 | Varsayılan satır yüksekliği oranı. |
| --oruga-border-radius | 4px | Standart denetim köşeleri. |
| --oruga-control-spacer | .5em | Paylaşılan denetim aralığı. |
| --oruga-control-height | 2.25em | Yazı tipine göre denetim yüksekliği. |
| --oruga-control-padding-vertical | calc(.375em - 1px) | Kenarlık hesaba katılarak belirlenen dikey iç boşluk. |
| --oruga-control-padding-horizontal | calc(.8em - 1px) | Kenarlık hesaba katılarak belirlenen yatay iç boşluk. |
| --oruga-control-disabled-opacity | .5 | Devre dışı görsel durumu. |
| --oruga-animation-speed-fast | .15s | Hızlı geçiş süresi. |
| --oruga-animation-speed | .3s | Standart geçiş süresi. |
### Özgün uygulamanın açıkça belirtilmiş ölçekleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Font stack | system-ui, sans-serif | Dış uygulama metni; isteğe bağlı tema da platform yazı tipi yığınını kullanır. |
| Page title | 34px / 1.15; 29px narrow | Özgün hiyerarşi. |
| Catalog card title | Georgia, serif; 29px / 1.25 | Özgün editoryal kontrast; Oruga varsayılanı değildir. |
| Supporting type | 10 / 11 / 12 / 13 / 14 / 15px | Açıkça belirtilmiş özgün başlıklar, tanımlar ve metinler. |
| Spacing | 4 / 5 / 7 / 12 / 13 / 14 / 16 / 20 / 22 / 24 / 28 / 32px | Gerçek yerleşim değerleri; başsız kitaplık bir ızgara ölçeği sağlamaz. |
| Layout | Flexible editor + 330px catalog card; stack at 760px | Özgün ızgara. |
| Topic constraints | 1–3 unique existing labels | allow-new=false, allow-duplicates=false, maxitems=3. |
| Title constraint | 5–80 characters; minimum evaluated after trim | Uygulama doğrulaması ve yerel uzunluk sınırı. |
## Oruga UI Tasarım Sistemi Kapsamlı Rehberi

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

## Oruga UI Tasarım Sistemi Oruga'nın Bileşen Davranışını İsteğe Bağlı Temasından Ayrı Tutun

### Oruga'nın Bileşen Davranışını İsteğe Bağlı Temasından Ayrı Tutun

> Oruga, belirli bir CSS çerçevesini zorunlu kılmadan Vue bileşenleri sunar. Bu örnek, Vue 3 paketini ayrı Oruga varsayılan temasıyla eşleştirir. Seçili yeşil etiketler ve ana hatlı alanlar bu temadan gelir; arama, seçme ve kaldırma ise bileşenlerin yerel davranışıdır.

Kitaplığı değerlendirirken bu ayrım işe yarar. Ekipler bileşen API yapısını koruyup sınıf yapılandırmasını değiştirebilir veya desteklenen başka bir tema seçebilir. Bu nedenle referans tablosu, temanın paketini ve sürümünü belirtir; yeşil birincil rengini tüm Oruga uygulamaları için evrensel bir gereklilik olarak tanımlamaz.

Destekleyici belirtimi okuyun

## Oruga UI Tasarım Sistemi Gerçek Varsayılan Tema Değişkenlerini Kullanın

### Gerçek Varsayılan Tema Değişkenlerini Kullanın

Yüklü isteğe bağlı tema, --oruga-primary değerini #445e00 ve --oruga-primary-invert değerini white olarak tanımlar. Tehlike rengi #b60000, denetim kenarlıkları ise #dbdbdb değerindedir. Bileşenin variant özelliği, her alan veya etiket için ayrı bir CSS kuralı gerektirmek yerine uygun anlamsal renk ailesini seçer.

Aynı tema, standart köşe yarıçapını dört piksel, denetim yüksekliğini 2.25em olarak tanımlar; iç boşluk formüllerinde bir piksellik kenarlık çıkarılır. Bu değerler denetim metnine göreli olduğundan yazı tipi ölçeğini değiştirmek geometriyi etkiler. Temanın yarım em'lik aralığı, bileşenler arasındaki ilişkiyi ifade eder; eksiksiz bir sayfa düzeni aralığı ölçeğinin varlığını göstermez.

Destekleyici belirtimi okuyun

## Oruga UI Tasarım Sistemi Oruga'nın Bilerek Sunmadığı Yerleşimi Sağlayın

### Oruga'nın Bilerek Sunmadığı Yerleşimi Sağlayın

Katalogda esnek bir düzenleyici sütunu ile 330px genişliğinde bir kart sütunu kullanılır; 760px altında bunlar alt alta dizilir. Sayfa başlığında sistem sans yazı tipi, kart başlığında ise editoryal bir kayıt izlenimi vermek için Georgia kullanılır. Her iki seçim de özgündür; bu yazı tipleri için harici bir dosya gerekmez.

Oruga bir ızgara veya yardımcı sınıf çerçevesi dayatmaz. Bu nedenle stil sayfasının tamamı panel iç boşluğunu, dar ekranlardaki kenar boşluklarını ve satır kaydırma kurallarını açıkça gösterir. Etiket sayacı payını ve toplamı bir arada tutar; kart başlığı da uzun not adlarının, gömülü sayfayı yatay yönde taşırmadan satırlara bölünmesine izin verir.

Destekleyici belirtimi okuyun

## Oruga UI Tasarım Sistemi Seçilen Değerleri Arama Sorgusundan Ayrı Tutun

### Seçilen Değerleri Arama Sorgusundan Ayrı Tutun

OTaginput, seçilen konu dizisini v-model ile eşleştirir. Bileşenin içindeki otomatik tamamlama metni, bu diziyi değiştirmeden aday etiketleri filtreler. Terim dağarcığında somut tanımları olan altı özgün konu bulunur; canlı kartta yalnızca seçilen konuların tanımları yinelenir.

Varsayılan arama karşılaştırması büyük/küçük harfe duyarsızdır. Yerel testte Color yazıldı ve sonuç seçilmeden önce filtrelemenin tamamlanması beklendi. Girişin gecikmeli işlemesi sürerken yapılan anlık bir doğrulama, filtrelemenin başarısız olduğu izlenimini yanlışlıkla yaratırdı. Seçim yapıldığında sorgu temizlenir ve daha önce seçilmiş etiketler korunur.

1. Color için arama yapın ve eşleşen seçeneği seçin.

2. Navigation'a ek olarak üç konuya ulaşmak için Forms'u ekleyin.

3. Bir etiketi kaldırın, kartın değiştiğini doğrulayın ve kaydetmeden önce yerine başka bir etiket seçin.

Destekleyici belirtimi okuyun

## Oruga UI Tasarım Sistemi Terim Dağarcığını, Yinelenenleri ve Sayacı Birbirinden Bağımsız Denetleyin

### Terim Dağarcığını, Yinelenenleri ve Sayacı Birbirinden Bağımsız Denetleyin

allow-new=false, rastgele yazılmış bir ifadenin etikete dönüşmesini önler. allow-duplicates=false, aynı mevcut etiketin iki kez eklenmesini önler. maxitems=3, toplam seçimi sınırlar ve sayacı gösterir. Her ayar, denetimli terim dağarcığının farklı bir yönünü korur.

Kaydetme girişimi sırasında uygulama, en az bir konu seçilmiş olduğunu yine de denetler. En fazla seçim davranışı, en az seçim gereksinimi olduğu anlamına gelmez. Ayrıca başlığın kırpılmış hâlinde en az beş anlamlı karakter bulunup bulunmadığını denetler; yerel girişin maxlength özelliği ise üst sınırı seksen karakterle sınırlar.

Destekleyici belirtimi okuyun

## Oruga UI Tasarım Sistemi Etiketler ve Belirli Doğrulama İletileri için OField Kullanın

### Etiketler ve Belirli Doğrulama İletileri için OField Kullanın

OField, görünür Not başlığını ve Konular etiketlerini ve bunlara ait mesajları sağlar. Geçersiz bir kaydetme işleminden sonra ilgili alan danger varyantını ve düzeltmeye yönelik açık bir mesajı alır. Konu açıklaması, hata oluşmadan önce izin verilen aralığı ve sözcük dağarcığı kısıtlamasını açıklar.

Yerel etiket girişi açılır menüsü combobox/listbox örüntüsünü izler. Bu sürümde combobox rolü bir kapsayıcıya aittir ve düzenlenebilir metin kutusu bunun içine yerleştirilmiştir. Bu nedenle QA, combobox rolüne sahip öğenin kendisinin bir input olduğunu varsaymak yerine gerçek Konuları ara input alanını doldurur.

Destekleyici belirtimi okuyun

## Oruga UI Tasarım Sistemi: Varsayılan Simge Paketi İçin Hâlâ Font Varlığı Gerekli

### Varsayılan Bir Simge Paketi de Yazı Tipi Varlığı Gerektirir

Etiket kaldırma denetimi, Oruga’nın varsayılan MDI simge paketini kullanır. Bileşen temasını yüklemek bu fontu otomatik olarak yüklemez; bu nedenle eksiksiz kurulum @mdi/font paketini de içerir. Bağımsız önizleme, uzak font bağımlılığından kaçınmak için yerel bir WOFF2 varlığını ve gerekli simge kurallarını kullanır.

Kaldırma işlemi, erişilebilir Remove topic etiketi bulunan gerçek bir button olarak kalır. Dekoratif klasör görseli bu denetim simgeleriyle ilişkili değildir ve yardımcı teknolojilerden gizlenir. Bu ayrım, süs amaçlı bir işaretin etkileşimli bir denetim sanılmasını önler.

Destekleyici belirtimi okuyun

## Oruga UI Tasarım Sistemi: Girdileri Değiştiğinde Kaydedilmiş Anlık Görüntüyü Geçersiz Kılın

### Girdileri Değiştiğinde Kaydedilmiş Anlık Görüntüyü Geçersiz Kılın

Kaydet işlemi, kırpılmış başlığı ve seçilen konu sayısını belirten bir cümle kaydeder. Bir izleyici hem başlığı hem de konu dizisini derinlemesine izler; bu nedenle bir öğenin kaldırılması da tıpkı başlığın değiştirilmesi gibi onay mesajını temizler. Kaydet yalnızca geçerli anlık görüntü kaydedilmiş durumdayken devre dışıdır.

Notu temizle başlığı, seçilen tüm konuları, denenmiş doğrulamayı ve kaydedilmiş durumunu sıfırlar. Kartta Untitled research note ve No topics selected ifadeleri gösterilir. Kullanıcı, düğmenin arkasına gizlenmiş bir backend, yükleme veya yayınlama işlemi olmadan boş durumdan düzenlemeye ve kaydetmeye kadar tüm akışı görebilir.

- Sorgu değişirken seçili dizi modelini koruyun.

- İç içe dizi değişikliklerinde kaydedildi geri bildirimini temizleyin.

- Sonucu yayın olarak değil, yerel durum olarak tanımlayın.

Destekleyici belirtimi okuyun

## Oruga UI Tasarım Sistemi: Bileşenleri Güncel Oruga Kaydıyla Açıkça İçe Aktarın

### Güncel Oruga Kaydıyla Bileşenleri Açıkça İçe Aktarın

Doğrulanmış 0.14.4 kurulumu bir Oruga örneği oluşturur ve Vue uygulamasına yükler. App.vue, OField, OInput, OTaginput, OTag ve OButton bileşenlerini açıkça içe aktarır. Bu yaklaşım güncel kayıt modelini izler; tüm bileşenlerin global olarak kaydedildiğini varsayan eski örneklere güvenmek, uygulamanın eksik kalmasına yol açabilir.

Tema README dosyası, bu varsayılan temanın Oruga’nın mevcut sınıf adlarını kullandığını ve ek bir tema yapılandırma nesnesi olmadan stil sayfasına ihtiyaç duyduğunu belirtir. Giriş dosyası bu stil sayfasını, MDI varlığını ve özgün düzeni sırasıyla içe aktarır. Yukarıdaki eksiksiz kaynak örnekleri ve aşağıdaki Vite kök dizini gerekli tüm parçaları içerir.

Destekleyici belirtimi okuyun

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

### Eksiksiz konu kataloğu SFC’si

OTaginput, OField, OInput, OTag ve OButton, kısıtlı bir sözcük dağarcığını canlı bir katalog kartına bağlar.

```
<script setup>
import {ref,computed,watch} from 'vue';
import {OField,OInput,OTaginput,OButton,OTag} from '@oruga-ui/oruga-next';
const title=ref('Finding a calmer navigation'),topics=ref(['Navigation']),attempted=ref(false),saved=ref('');
const definitions={'Navigation':'Menus, wayfinding and the path through a product.','Typography':'Type hierarchy, reading rhythm and legibility.','Color':'Semantic roles, contrast and theme behavior.','Forms':'Input labels, validation and correction.','Motion':'Transitions, reduced motion and continuity.','Accessibility':'Keyboard flow, semantics and assistive technology.'};
const options=Object.keys(definitions),valid=computed(()=>title.value.trim().length>=5&&topics.value.length>=1&&topics.value.length<=3);
watch([title,topics],()=>saved.value='',{deep:true});
function save(){attempted.value=true;if(valid.value)saved.value=`Saved locally: “${title.value.trim()}” with ${topics.value.length} ${topics.value.length===1?'topic':'topics'}.`}
function reset(){title.value='';topics.value=[];attempted.value=false;saved.value=''}
</script>
<template><main class="catalog-shell"><header><p class="eyebrow">RESEARCH CATALOG · LABEL A NOTE</p><h1>Give the next reader a useful starting point.</h1><p>Name a research note and choose up to three topics from a controlled vocabulary.</p></header><div class="catalog-layout"><section class="editor"><h2>Note details</h2><OField label="Note title" :variant="attempted&&title.trim().length<5?'danger':undefined" :message="attempted&&title.trim().length<5?'Use at least five meaningful characters.':undefined"><OInput v-model="title" maxlength="80" expanded placeholder="What did you learn?"/></OField><OField label="Topics" :variant="attempted&&!topics.length?'danger':undefined" :message="attempted&&!topics.length?'Choose at least one topic.':'Choose 1–3 existing topics; duplicate and new labels are not added.'"><OTaginput v-model="topics" :options="options" :allow-new="false" :allow-duplicates="false" :maxitems="3" open-on-focus :keep-open="false" expanded variant="primary" placeholder="Search topics" aria-close-label="Remove topic"><template #empty>No matching topic. Try Color, Forms or Motion.</template></OTaginput></OField><div class="actions"><OButton variant="primary" @click="save" :disabled="!!saved">Save local note</OButton><OButton @click="reset">Clear note</OButton></div><p role="status" class="result">{{saved||'The preview keeps only local page state.'}}</p><h3>Vocabulary guide</h3><dl class="vocabulary"><div v-for="(meaning,name) in definitions" :key="name"><dt>{{name}}</dt><dd>{{meaning}}</dd></div></dl></section><aside class="note-card"><div class="folder-art" aria-hidden="true"><i></i><b></b><span></span></div><p class="eyebrow">CATALOG CARD PREVIEW</p><h2>{{title.trim()||'Untitled research note'}}</h2><div class="topic-tags"><OTag v-for="topic in topics" :key="topic" variant="primary">{{topic}}</OTag><span v-if="!topics.length" class="empty-topics">No topics selected</span></div><p class="card-label">This note will appear under</p><ul><li v-for="topic in topics" :key="topic"><strong>{{topic}}</strong><span>{{definitions[topic]}}</span></li></ul><p class="card-foot">Original sample note · no upload or publishing</p></aside></div></main></template>
```

Kod referansı

- Seçili dizi modeli, iç arama metninden farklıdır.

- Seçim, mevcut ve yinelenmeyen etiketlerle sınırlıdır.

- Derin bir izleyici, konu kaldırıldıktan sonra kaydedildi onayını temizler.

### Eksiksiz özgün katalog düzeni

Duyarlı düzenleyici/kart ızgarası, kontrollü satır kaydırma ve özgün CSS klasör görseli.

```
html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#f4f4ed;color:#34392b}.catalog-shell{max-width:1100px;margin:auto;padding:32px}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:700;color:#6e775f}h1{font-size:34px;line-height:1.15;max-width:700px;margin:12px 0}header>p:last-child{font-size:15px;line-height:1.6;color:#727965;max-width:630px}.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;margin-top:28px}.editor,.note-card{background:white;border:1px solid #dfe3d4;border-radius:14px;padding:24px;min-width:0}.editor>h2{font-size:20px;margin:0 0 24px}.editor .o-field{margin-bottom:22px}.editor .o-field__message{font-size:12px;line-height:1.6}.actions{display:flex;gap:12px;flex-wrap:wrap}.result{font-size:12px;line-height:1.6;color:#596d2e;margin:16px 0 28px}.editor h3{font-size:14px}.vocabulary{margin:0}.vocabulary>div{padding:12px 0;border-bottom:1px solid #eaede3}.vocabulary dt{font-size:13px;font-weight:650}.vocabulary dd{font-size:12px;line-height:1.6;margin:4px 0 0;color:#707763}.note-card{align-self:start;background:#fcfcf5}.note-card h2{font-family:Georgia,serif;font-size:29px;line-height:1.25;font-weight:400;overflow-wrap:anywhere}.folder-art{height:145px;background:#e3e8cf;border-radius:8px;position:relative;overflow:hidden;margin-bottom:24px}.folder-art i{position:absolute;left:15%;top:40px;width:70%;height:100px;border-radius:7px;background:#7e8e52;transform:rotate(-8deg)}.folder-art b{position:absolute;left:21%;top:24px;width:60%;height:115px;background:#fffef5;transform:rotate(5deg);border-radius:4px}.folder-art span{position:absolute;left:16%;top:71px;width:70%;height:80px;background:#a6b57a;border-radius:7px}.topic-tags{display:flex;gap:7px;flex-wrap:wrap}.card-label{font-size:11px;color:#737b65;margin-top:24px}.note-card ul{list-style:none;padding:0}.note-card li{border-top:1px solid #e0e4d6;padding:13px 0}.note-card li strong{font-size:13px;display:block}.note-card li span{font-size:12px;color:#6c765b;line-height:1.6;display:block;margin-top:5px}.card-foot{font-size:10px;line-height:1.6;color:#7c846e;margin-top:20px}.empty-topics{font-size:12px;color:#7c846e}.o-taginput{max-width:100%}.o-taginput__container{min-width:0}.o-taginput .o-input{min-width:0}@media(max-width:760px){.catalog-layout{grid-template-columns:minmax(0,1fr)}.catalog-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.catalog-shell{padding:14px}.editor,.note-card{padding:16px}.actions>*{width:100%}}
.o-taginput__counter{white-space:nowrap;flex-shrink:0}
```

Kod referansı

- Oruga zorunlu bir ızgara sistemi sağlamaz; bu düzen uygulamada açıkça tanımlanır CSS.

- Sayaç metni dar genişliklerde tek satırda kalır.

## Oruga UI Tasarım Sistemi Ajan Kurulumu

### Uygulamaya Başlangıç Noktası

Doğrulanmış Oruga 0.14.4, isteğe bağlı varsayılan tema 0.10.0 ve MDI 7.4.47. Bileşenler açıkça içe aktarılır; varsayılan tema için ek JavaScript tema yapılandırması gerekmez.

```
// npm create vite@latest oruga-catalog -- --template vue
// cd oruga-catalog && npm install
// npm install @oruga-ui/oruga-next@0.14.4 @oruga-ui/theme-oruga@0.10.0 @mdi/font@7.4.47
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createOruga} from '@oruga-ui/oruga-next';
import '@oruga-ui/theme-oruga/style.css';
import '@mdi/font/css/materialdesignicons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createOruga()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
```

### Projeniz İçin Bir İstem

```
Oruga 0.14.4 araştırma notu kataloğu ve 0.10.0 temasıyla başlayın. Altı konuluk sözcük dağarcığından OTaginput kontrollü seçimini, büyük/küçük harfe duyarsız aramayı, yeni/yinelenen etiketlerin devre dışı bırakılmasını ve en fazla üç etiket sınırını koruyun. Canlı konu tanımlarını ve başlık doğrulamasını kaydedilmiş anlık görüntüye bağlayın; değişikliklerden sonra kaydedildi geri bildirimini temizleyin. createOruga, tema CSS ve yerel MDI varlığı kurulumunu ekleyin. Boş bir taslağa sıfırlayın; ürün karşılaştırma verisi veya uzak katalog güncellemesi uydurmayın.
```

## Oruga UI Tasarım Sistemi Kaynakları ve Kapsamı

Oruga 0.14.4 ve isteğe bağlı varsayılan tema 0.10.0. Özgün sözcük dağarcığı ve katalog görseli. Kaydetme işlemi yalnızca yerel sayfa durumunu değiştirir; yükleme, yayınlama veya yeniden yüklemeler arasında kalıcılık yoktur.

- Giriş Güncel eklenti ve açık bileşen kaydı.

- Tema seçenekleri İsteğe bağlı stil sınırı.

- Yapılandırma Global ve yerel sınıf özelleştirmesi.

- Etiket girişi Sözcük dağarcığı kısıtlamaları, model, sınırlar ve kaldırma.

- Otomatik tamamlama Filtreleme, iç içe combobox davranışı ve yerel popover.

- Field Görünür etiketler ve doğrulama mesajları.

- Simge Simge paketi yapılandırması.

- Varsayılan tema kaynağı Resmî tema kurulumu ve tasarım token’ı kaynağı.

## Oruga UI Tasarım Sistemiyle İlgili Kaynaklar

### Pico CSS

Pico CSS, anlamsal HTML stillerini rem tabanlı duyarlı bir yazı ölçeği ve tema değişkenleriyle tanımlar. Standart, sınıfsız ve koşullu dağıtımların tümleştirme kapsamları farklıdır; bu kılavuz, yerel açılır içerik ve iletişim kutusu davranışları içeren bir okuma tercihleri formu için standart derlemeyi kullanır.

### Preline UI

Bağlantılı sekmeler, sınırlandırılmış bir input-number eklentisi, yüklü tema takma adları, gerçek Tailwind ölçekleri ve seçilen oturuma göre güncellenen yerel bir malzeme tahmini içeren yerel bir Preline oturum planlayıcısı.

### Prime UI

Prime UI ekosisteminin sürümü sabitlenmiş bir PrimeVue uygulaması: gerçek ön ayar referansları, denetimli genişletme, filtreleme, seçim ve yerel sabitleme içeren Aura temalı bir belge ağacı.


- [Uygulama başvurusu](https://oruga-ui.com/components/taginput)
- [Kaynak](https://oruga-ui.com/documentation/themes)
- [Kaynak](https://oruga-ui.com/components/taginput)
- [Destekleyici belirtimi okuyun](https://oruga-ui.com/documentation/)
- [Destekleyici belirtimi okuyun](https://oruga-ui.com/documentation/themes)
- [Destekleyici belirtimi okuyun](https://oruga-ui.com/components/taginput)
- [Destekleyici belirtimi okuyun](https://oruga-ui.com/components/field)
- [Destekleyici belirtimi okuyun](https://oruga-ui.com/components/icon)
- [Destekleyici belirtimi okuyun](https://oruga-ui.com/components/button)
- [Kod referansı](https://oruga-ui.com/components/taginput)
- [Kod referansı](https://oruga-ui.com/documentation/configuration)
- [Giriş Güncel eklenti ve açık bileşen kaydı.](https://oruga-ui.com/documentation/)
- [Tema seçenekleri İsteğe bağlı stil sınırı.](https://oruga-ui.com/documentation/themes)
- [Yapılandırma Global ve yerel sınıf özelleştirmesi.](https://oruga-ui.com/documentation/configuration)
- [Etiket girişi Sözcük dağarcığı kısıtlamaları, model, sınırlar ve kaldırma.](https://oruga-ui.com/components/taginput)
- [Otomatik tamamlama Filtreleme, iç içe combobox davranışı ve yerel popover.](https://oruga-ui.com/components/autocomplete)
- [Field Görünür etiketler ve doğrulama mesajları.](https://oruga-ui.com/components/field)
- [Simge Simge paketi yapılandırması.](https://oruga-ui.com/components/icon)
- [Varsayılan tema kaynağı Resmî tema kurulumu ve tasarım token’ı kaynağı.](https://github.com/oruga-ui/theme-oruga)