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ı.
Vue 3 ve @primeuix/themes 1.2.5 Aura ile PrimeVue 4.5.5. Bu, çerçeveler arası bir paket değil, Vue'ya özgü bir uygulamadır. · Uygulama başvurusu
02
Prime UI Tasarım Sistemi Tasarım Referansı
Bu Prime UI kaynağı, PrimeVue, PrimeReact ve PrimeNG arasında birbirinin yerine kullanılabilen tek bir API olduğu iddiasında bulunmak yerine, PrimeVue 4.5.5'i @primeuix/themes 1.2.5 Aura ile uygular. Değerler, yüklenmiş bu hazır ayar üzerinden incelenmiştir. Sayfa kök boyutunu 16px olarak sabitler; rem ölçüleri bu açık tercihe göre yorumlanır.
Prime UI Tasarım Sistemi Tek Bir İçe Aktarımdan İbaret Değil, Bir Ekosistemdir
Prime UI Tek Bir İçe Aktarımdan İbaret Değil, Bir Ekosistemdir
PrimeTek'in kullanıcı arayüzü ekosistemi, farklı çerçeveler için uygulamalar içerir. Bu sayfa somut bir seçeneği ele alıyor: Vue 3 ve @primeuix/themes 1.2.5 Aura hazır ayarıyla PrimeVue 4.5.5. Giriş dosyasının tamamı, içe aktarımlar ve bileşen örneği bu Vue kurulumuna aittir. Bir React veya Angular projesi, bu Vue etiketlerini değiştirmeden kopyalamak yerine kendi paketini ve API kaynağını kullanmalıdır.
Sürümün sabitlenmesi burada önemlidir. Yüklenmiş 4.5.5 paketi MIT lisansına sahiptir ve doğrulanmış yerel örnek lisans anahtarı olmadan çalışır. Daha yeni 5.0.2 çalışma zamanı üzerinde yapılan bir testte PrimeUI lisans hatası görüntülendi. Bu nedenle örnek, sürüm belirtmeden en yeni sürümü yükleme komutu sunmaz ve sürümler arasında yetkilendirme koşullarının aynı olduğunu ima etmez.
Prime UI Tasarım Sistemi İlkel, Anlamsal ve Bileşen Belirteçleri Bir Zincir Oluşturur
İlkel, Anlamsal ve Bileşen Belirteçleri Bir Zincir Oluşturur
Aura, ham renk ilkellerini anlamsal rollerden ve bileşen değerlerinden ayırır. Varsayılan birincil renk skalası zümrüt ilkellerine başvurur. Açık modda primary.color, primary.500 değerine; hoverColor, primary.600 değerine; activeColor ise primary.700 değerine başvurur. Vurgu rolleri, seçim için daha açık birincil yüzeyler ve daha koyu ön planlar kullanır.
Ardından Tree, seçili arka planını ve metnini ilgisiz başka bir yeşili sabit kodlamak yerine vurgu rollerine bağlar. Bir referans, temadaki değişikliklerin nasıl yayıldığını açıkladığı için belirtim süslü parantezli referansları korur. Her takma adı ayrı bir hex değerine dönüştürmek bu yararlı bağımlılığı gizler.
Prime UI tasarım sistemi Değerleri Eşleşen Hazır Ayardan Okuyun
Değerleri Eşleşen Hazır Ayardan Okuyun
Sabitlenmiş Aura hazır ayarında Tree kök iç boşluğu ve girintisi birer rem, düğüm iç boşluğu 0.25rem 0.5rem, açma-kapama düğmesi ise 1.75rem'dir. Örnek, html boyutunu on altı piksel olarak sabitleyerek bu ölçüleri açıkça tanımlar. Bileşen işaretlemesi benzer görünse bile farklı hazır ayar sürümleri veya kök boyutları yoğunluğu değiştirebilir.
Kenar yuvarlama ilkelleri sıfırdan başlayarak iki, dört, altı, sekiz ve on iki piksele kadar uzanır. Ortak alanların yatay iç boşluğu 0.75rem, dikey iç boşluğu ise 0.5rem'dir. Sayfadaki otuz dört piksellik başlık, sistem yazı tipi ve yirmi dört piksellik sütun aralığı, yerel bileşen temasının dışındaki özgün düzen tercihleridir.
Prime UI tasarım sistemi Düğüm Anahtarları Genişletme ve Seçimi Kararlı Hâle Getirir
Düğüm Anahtarları Genişletme ve Seçimi Kararlı Hâle Getirir
Ağaç, bir sorunu, üç klasörü ve altı belge yaprağını modeller. Her düğümün kararlı bir anahtarı ve etiketi vardır. Klasör düğümlerinde selectable:false kullanılır; böylece okunabilir bir belgeymiş gibi davranmadan hiyerarşiyi düzenlerler. expandedKeys modeli açık klasörleri denetler; Genişlet ve Daralt işlemleri bu eşlemeyi bilinçli olarak değiştirir.
Tekli seçimde selectionKeys ve node-select işleyicisi kullanılır. Yalnızca belge kayıtları eşlemesinde bulunan bir anahtar ayrıntı panelini günceller. Görünen bir etiketi yeniden adlandırmak, kimliğini değiştirmeyi gerektirmez; bir klasörü daraltmak da seçili belgeyi veya sabitlenmiş durumunu silmez.
Prime UI tasarım sistemi Yerel Filtreleme, Eşleşmenin Bağlamını Korur
Yerel Filtreleme, Eşleşmenin Bağlamını Korur
Tree, yerleşik filtresini filterMode lenient ve görünür bir Belge bul yer tutucusuyla etkinleştirir. maps araması, görüntülenen hiyerarşiyi eşleşen belgeye ve üst öğelerine indirger. Böylece okuyucu, birbiriyle ilgisiz düz bir öneri listesi yerine sonucun hiyerarşide nereye ait olduğunu anlayabilir.
Filtreyi temizlemek hiyerarşiyi geri yükler. Filtreleme kaynak düğümlerini yeniden yazmaz veya sabitlenmiş belgeleri kaldırmaz. Ayrıntı paneli, her tuş vuruşunda beklenmedik içerik değişiklikleri yaşanmaması için kullanıcının en son açıkça seçtiği yaprağı korur. Daha büyük bir koleksiyon için tembel veri yükleme gerekebilir; ancak bu eksiksiz örnek altı yerel kayıt kullanır ve sunucu tarafında arama yaptığını iddia etmez.
“maps” için arama yapın ve korunan sorun/klasör bağlamını inceleyin.
Belge panelini güncellemek için Three regional maps belgesini seçin.
Filtreyi temizleyin ve seçili belgenin hiyerarşide hâlâ erişilebilir olduğunu doğrulayın.
Prime UI tasarım sistemi Seçilen Bir Belgenin Ayırt Edici ve Yararlı İçeriği Olmalı
Seçilen Bir Belgenin Ayırt Edici ve Yararlı İçeriği Olmalı
Her belgede bir tür, sahip, durum, giriş, inceleme listesi ve özel bir not bulunur. Bir denemede sıralama ve altyazı kontrolleri istenir; harita referansında yönün tutarlı olması ve ölçeğin her haritada bağımsız gösterilmesi gerekir; prova kontrol listesinde ise okunaklılık ve kırpma sorgulanır. İçerik, altı başlık altında aynı paragrafı yinelemek yerine seçime göre değişir.
Durum etiketleri yalnızca açıklayıcı örnek meta verileri olarak kalır. Harici bir yayın iş akışını tetiklemezler. Kontur çizimi, gerektiği yerlerde dekoratif ve özgün geometri olarak işaretlenmiştir; coğrafi bir harita değildir ve öyle yorumlanmamalıdır.
Prime UI Tasarım Sistemi Sabitlenmiş Durumu Ağaç Modelinden Bağımsızdır
Sabitlenmiş Durum, Ağaç Modelinden Bağımsızdır
Bu belgeyi sabitle, geçerli belge anahtarını yerel bir diziye ekler. Anahtar dizide yer aldığında düğme Sabitlendi olarak değişir ve yinelenen kayıtları önlemek için devre dışı kalır. Sabitlenmiş bir satırı kaldırmak yalnızca o anahtarı siler, ağaç seçiminde değişiklik yapmaz. Sabitlenmiş belge sayısı diziden hesaplanır.
Bu ayrım önemlidir; çünkü seçim, genişletme ve kaydedilmiş başvurular farklı ihtiyaçları karşılar. Kullanıcı, seçili denemeyi açık tutarken tüm klasörleri daraltabilir veya sabitlenmiş bir başvuruyu kaybetmeden sayının başka bir bölümüne filtre uygulayabilir. Bu işlemlerin hiçbiri uzaktaki bir belgenin düzenlendiği anlamına gelmez.
Prime UI Tasarım Sistemi Yerel Ağaç Klavye Modelini Koruyun
Yerel Ağaç Klavye Modelini Koruyun
Yerel Tree bileşeni; ağaç ve treeitem rolleri, seçim ve genişletme nitelikleri, iç içe düzeyler arasındaki ilişki aracılığıyla hiyerarşiyi sunar. Klavye modeli, ok tuşlarıyla görünür düğümler arasında gezinmeyi ve dalları genişletip daraltmayı; Enter veya Space tuşlarıyla odaklanmış düğümü seçmeyi sağlar. Sayfa, koleksiyon için açık bir aria-label sunar.
Ayrıntı bölmesi ve sabitlenmiş listesinde standart başlıklar, listeler ve adlandırılmış düğmeler kullanılır. Mobil cihazlarda gezgin, okuma sıralamasında belgeden önce gelir. Düzen, özgün 760px kesme noktasında yığın hâline gelir; ağaç kırpılmaz ve belge yönergeleri kaldırılmaz. Durum satırı geçerli seçimi bildirir.
Görünür ağaç sırası değiştiğinde kararlı anahtarlar kullanın.
Kendileriyle ilişkili ayrıntı içeriği olmayan klasörleri seçilemez tutun.
Kaldır düğmelerine, yinelenen ve belirsiz bir etiket yerine ilgili belgenin adını verin.
Prime UI Tasarım Sistemi Temayı Vue Kökünde Bir Kez Kaydedin
Temayı Vue Kökünde Bir Kez Kaydedin
Giriş dosyası; primevue/config içinden PrimeVue'yu, @primeuix/themes/aura içinden Aura'yı ve App.vue dosyasının tamamını içe aktarır. Eklentiyi, theme.preset değeri Aura olacak şekilde kaydeder. Bu sabit, açık renkli örnekte darkModeSelector false değerindedir. Üretim ortamındaki tema geçişi, farklı bir ana sürümün belgelerini birbiriyle karıştırmak yerine ilgili sürümün desteklenen seçenekleriyle yapılandırılmalıdır.
PrimeVue'nun stilli bileşenleri, ön ayardan gerekli bileşen stillerini oluşturur. Sağlanan style.css yalnızca özgün sayfa düzenini ve çizimi tanımlar. Eski primevue/resources/theme.css içe aktarımı kullanılmaz. Doğrulanmış kurulumda bir ağaç yaprağı seçildi, sabitlendi, hiyerarşiye filtre uygulandı ve 390px genişlikte geçersiz lisans bildirimi olmadan görüntülendi.
<script setup>
import {ref,computed} from 'vue';import Tree from 'primevue/tree';import Button from 'primevue/button';import Tag from 'primevue/tag';
const nodes=[{key:'issue',label:'Issue 04 · Fieldwork',selectable:false,children:[{key:'essays',label:'Essays',selectable:false,children:[{key:'ridge',label:'The ridge path'},{key:'river',label:'A river after rain'}]},{key:'visuals',label:'Visual material',selectable:false,children:[{key:'maps',label:'Three regional maps'},{key:'captions',label:'Caption reference sheet'}]},{key:'production',label:'Production',selectable:false,children:[{key:'proof',label:'Print proof checklist'},{key:'credits',label:'Credits and permissions'}]}]}];
const documents={ridge:{type:'Essay',owner:'Alex Morgan',status:'Editing',title:'The ridge path',intro:'A field essay about following the contour rather than the shortest route.',items:['Opening: the first view above the tree line','Middle: how a contour changes the pace of walking','Close: the landmarks remembered on the return'],note:'Review the transition between the weather observation and the first-person account.'},river:{type:'Essay',owner:'Jules Chen',status:'Review',title:'A river after rain',intro:'An observational essay that follows sediment, sound and changing water levels.',items:['Keep the time sequence explicit','Pair each field image with an observation','Check the final geographic names'],note:'Compare the image captions with the text before locking the layout.'},maps:{type:'Visual reference',owner:'Sam Rivera',status:'Review',title:'Three regional maps',intro:'A consistent reference treatment for ridge, river and open plain.',items:['Same north orientation','Shared legend and label size','Scale shown independently on each map'],note:'The miniature map below is original decorative geometry, not a geographic claim.'},captions:{type:'Reference',owner:'Maya Patel',status:'Editing',title:'Caption reference sheet',intro:'One place to keep subject, location, credit and contextual description.',items:['Subject and date','Location at an appropriate level of precision','Author or source credit'],note:'Do not use the visible caption as a substitute for a useful image alt description.'},proof:{type:'Checklist',owner:'Alex Morgan',status:'Ready',title:'Print proof checklist',intro:'Review the physical proof at actual scale before choosing the final stock.',items:['Body text and small labels remain legible','Images preserve the intended tonal range','Trim and page sequence match the layout'],note:'This is a sample editorial workflow, not a print vendor specification.'},credits:{type:'Reference',owner:'Maya Patel',status:'Review',title:'Credits and permissions',intro:'Keep attribution close to each asset record so it survives layout changes.',items:['Creator name and source','Allowed uses recorded separately','Credit wording copied accurately'],note:'This sample does not provide legal permission for any external image.'}};
const expanded=ref({issue:true,essays:true,visuals:true,production:true}),selection=ref({'ridge':true}),current=ref('ridge'),saved=ref([]);const doc=computed(()=>documents[current.value]);function select(node){if(documents[node.key])current.value=node.key;}function pin(){if(!saved.value.includes(current.value))saved.value.push(current.value);}function expandAll(){expanded.value={issue:true,essays:true,visuals:true,production:true};}
</script>
<template><main class="editorial-library"><header><div><p class="eyebrow">PRIME UI · PRIMEVUE IMPLEMENTATION</p><h1>Find the thread of an issue.</h1><p class="intro">A native tree navigator for an editorial collection, using the Aura theme.</p></div><Tag value="Local specimen" severity="secondary" /></header><div class="library-layout"><aside class="library-nav"><div class="nav-heading"><h2>Issue contents</h2><div><Button label="Expand" text size="small" @click="expandAll"/><Button label="Collapse" text size="small" @click="expanded={}"/></div></div><Tree :value="nodes" v-model:expandedKeys="expanded" v-model:selectionKeys="selection" selectionMode="single" :filter="true" filterMode="lenient" filterPlaceholder="Find a document" aria-label="Editorial document tree" @node-select="select" /><section class="pinned"><h2>Pinned documents <span>{{saved.length}}</span></h2><ul v-if="saved.length"><li v-for="key in saved" :key="key"><span>{{documents[key].title}}</span><Button label="Remove" text size="small" :aria-label="`Remove ${documents[key].title}`" @click="saved=saved.filter(x=>x!==key)"/></li></ul><p v-else>No documents pinned yet.</p></section></aside><article class="document"><div class="document-top"><span>{{doc.type}}</span><Tag :value="doc.status" :severity="doc.status==='Ready'?'success':doc.status==='Review'?'info':'warn'"/></div><h2>{{doc.title}}</h2><p class="owner">{{doc.owner}} · ISSUE 04</p><div class="map-art" aria-hidden="true"><i></i><i></i><i></i><span>FIELD NOTES / 04</span></div><p class="intro">{{doc.intro}}</p><h3>What to inspect</h3><ol><li v-for="item in doc.items" :key="item">{{item}}</li></ol><aside class="document-note">{{doc.note}}</aside><Button :label="saved.includes(current)?'Pinned':'Pin this document'" :disabled="saved.includes(current)" @click="pin"/><p class="local-note">Sample records only. Pinning changes this page’s local state.</p></article></div><p class="selection-status" role="status">Selected document: {{doc.title}}</p></main></template>
Kontur çizimi, gerçek bir harita değil, dekoratif ve özgün geometridir.
rem boyutlarının tekrarlanabilir olması için kök boyutu açıkça 16px olarak ayarlanmıştır.
04
Prime UI Tasarım Sistemi Yapılandırması
Uygulamaya Başlangıç Noktası
PrimeVue 4.5.5 ve @primeuix/themes 1.2.5 ile doğrulanmıştır. Yüklenen PrimeVue 4 paketi MIT lisanslıdır. Farklı bir ana sürüm için aynı kurulumun veya lisans koşullarının geçerli olduğunu varsaymayın.
JavaScript
// Create the project first:
// npm create vite@latest prime-ui-specimen -- --template vue
// cd prime-ui-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected] @primeuix/[email protected]
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
import App from './App.vue';
import './style.css';
createApp(App).use(PrimeVue, {
theme: {preset: Aura, options: {darkModeSelector: false}}
}).mount('#app');
// index.html contains <div id="app"></div>.
// This example is pinned to 4.5.5, not the newer 5.x runtime.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Sağlanan PrimeVue 4.5.5 editoryal belge kitaplığını, @primeuix/themes 1.2.5 içindeki uyumlu Aura ön ayarıyla oluşturun. Yerel Tree genişletme, filtreleme ve seçimini kararlı düğüm anahtarlarıyla koruyun; seçili belge ayrıntısını sabitlenmiş belge listesinden ayrı tutun. Kategori düğümlerini belgeye dönüştürmeden veya sabitlemeleri çoğaltmadan gerçek belgeleri sabitleyip sabitlemeyi kaldırın. Sağlayıcının eksiksiz kurulumunu ve özgün duyarlı CSS yapısını koruyun. Bu, doğrulanmış dördüncü sürüm örneğidir; daha yeni bir ana sürüm çalışma zamanıyla sessizce değiştirmeyin veya bunu bir satın alma iş akışına dönüştürmeyin.
05
Prime UI Tasarım Sistemi Kaynakları ve Kapsamı
Prime UI ekosistemi; PrimeVue 4.5.5 ve Aura 1.2.5 ile somut olarak uygulanmıştır. Bu sayfa, çerçeve paketleri veya daha yeni ana sürümler arasında API'lerin ya da lisans koşullarının aynı olduğunu iddia etmez. Tüm kayıtlar ve sabitlemeler yereldir.
