Aranabilir ve kaldırılabilir konu etiketleri, zorunlu sözlük sınırları, isteğe bağlı bir temanın gerçek belirteçleri ve seçilen etiketleri yansıtan canlı bir kart içeren yerel bir Oruga katalog düzenleyicisi.
@oruga-ui/oruga-next 0.14.4, @oruga-ui/theme-oruga 0.10.0 ve yerel MDI simgeleriyle. · Uygulama başvurusu
02
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.
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.
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.
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.
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.
Color için arama yapın ve eşleşen seçeneği seçin.
Navigation'a ek olarak üç konuya ulaşmak için Forms'u ekleyin.
Bir etiketi kaldırın, kartın değiştiğini doğrulayın ve kaydetmeden önce yerine başka bir etiket seçin.
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.
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.
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.
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.
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.
OTaginput, OField, OInput, OTag ve OButton, kısıtlı bir sözcük dağarcığını canlı bir katalog kartına bağlar.
vue
<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>
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.
04
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.
JavaScript
// npm create vite@latest oruga-catalog -- --template vue
// cd oruga-catalog && npm install
// npm install @oruga-ui/[email protected] @oruga-ui/[email protected] @mdi/[email protected]
// 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
Ajan İstemi
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.
05
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.
