# Prime UI Tasarım Sistemi

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

Hiyerarşik bir sorunu filtreleyin, belge seçin, klasörleri genişletip daraltın ve yerel referansları sabitleyin.

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

### Aura zümrüt ilkelleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| primitive.emerald.50 | #ecfdf5 | Varsayılan birincil renk skalasında kullanılan gerçek ilkel renk. |
| primitive.emerald.100 | #d1fae5 | Varsayılan birincil renk skalasında kullanılan gerçek ilkel renk. |
| primitive.emerald.200 | #a7f3d0 | Varsayılan birincil renk skalasında kullanılan gerçek ilkel renk. |
| primitive.emerald.300 | #6ee7b7 | Varsayılan birincil renk skalasında kullanılan gerçek ilkel renk. |
| primitive.emerald.400 | #34d399 | Varsayılan birincil renk skalasında kullanılan gerçek ilkel renk. |
| primitive.emerald.500 | #10b981 | Varsayılan birincil renk skalasında kullanılan gerçek ilkel renk. |
| primitive.emerald.600 | #059669 | Varsayılan birincil renk skalasında kullanılan gerçek ilkel renk. |
| primitive.emerald.700 | #047857 | Varsayılan birincil renk skalasında kullanılan gerçek ilkel renk. |
| primitive.emerald.800 | #065f46 | Varsayılan birincil renk skalasında kullanılan gerçek ilkel renk. |
| primitive.emerald.900 | #064e3b | Varsayılan birincil renk skalasında kullanılan gerçek ilkel renk. |
| primitive.emerald.950 | #022c22 | Varsayılan birincil renk skalasında kullanılan gerçek ilkel renk. |
### Aura açık mod anlamsal rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| semantic.colorScheme.light.primary.color | {primary.500} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.colorScheme.light.primary.contrastColor | #ffffff | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.colorScheme.light.primary.hoverColor | {primary.600} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.colorScheme.light.primary.activeColor | {primary.700} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.colorScheme.light.highlight.background | {primary.50} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.colorScheme.light.highlight.focusBackground | {primary.100} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.colorScheme.light.highlight.color | {primary.700} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.colorScheme.light.highlight.focusColor | {primary.800} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.colorScheme.light.text.color | {surface.700} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.colorScheme.light.text.hoverColor | {surface.800} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.colorScheme.light.text.mutedColor | {surface.500} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.colorScheme.light.text.hoverMutedColor | {surface.600} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
### Aura yarıçapları ve alan aralıkları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| primitive.borderRadius.none | 0 | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| primitive.borderRadius.xs | 2px | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| primitive.borderRadius.sm | 4px | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| primitive.borderRadius.md | 6px | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| primitive.borderRadius.lg | 8px | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| primitive.borderRadius.xl | 12px | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.formField.paddingX | 0.75rem | Gerçek ortak alan iç boşluğu veya yarıçap referansı. |
| semantic.formField.paddingY | 0.5rem | Gerçek ortak alan iç boşluğu veya yarıçap referansı. |
| semantic.formField.borderRadius | {border.radius.md} | Gerçek ortak alan iç boşluğu veya yarıçap referansı. |
| semantic.focusRing.width | 1px | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.focusRing.style | solid | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.focusRing.color | {primary.color} | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.focusRing.offset | 2px | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
| semantic.focusRing.shadow | none | Gerçek Aura hazır ayar değeri; süslü parantezler belirteç referansını korur. |
### Yerel Tree geometrisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| components.tree.root.padding | 1rem | Gerçek Tree kök düzeni değeri. |
| components.tree.root.gap | 2px | Gerçek Tree kök düzeni değeri. |
| components.tree.root.indent | 1rem | Gerçek Tree kök düzeni değeri. |
| components.tree.node.padding | 0.25rem 0.5rem | Gerçek düğüm aralığı veya seçili durum rolü. |
| components.tree.node.gap | 0.25rem | Gerçek düğüm aralığı veya seçili durum rolü. |
| components.tree.node.selectedBackground | {highlight.background} | Gerçek düğüm aralığı veya seçili durum rolü. |
| components.tree.node.selectedColor | {highlight.color} | Gerçek düğüm aralığı veya seçili durum rolü. |
| components.tree.nodeToggleButton.size | 1.75rem | Yerel açma-kapama hedefinin geometrisi. |
### Açıkça belirtilmiş uygulama türü ve aralığı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Root font size | 16px | Bu örneğin özgün ve açıkça belirtilmiş temel değeri. |
| Font family | system-ui, sans-serif | Sayfanın özgün yazı tipi; Aura'dan indirilen bir yazı tipi değildir. |
| Page heading | 34px / 1.15; 29px mobile | Özgün editoryal hiyerarşi. |
| Detail body | 15px / 1.7 | Özgün belge okuma stili. |
| Sidebar / gap | 340px / 24px | Özgün masaüstü düzeni. |
| Mobile breakpoint | 760px | Özgün dikey düzen sınırı. |
## Prime 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ı.

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

1. “maps” için arama yapın ve korunan sorun/klasör bağlamını inceleyin.

2. Belge panelini güncellemek için Three regional maps belgesini seçin.

3. Filtreyi temizleyin ve seçili belgenin hiyerarşide hâlâ erişilebilir olduğunu doğrulayın.

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

### Yerel Tree bileşeni ve eksiksiz ayrıntı görünümü

Kararlı düğüm anahtarları, denetimli genişletme/seçim eşlemeleri, filtre ve düğüm seçimi işleme.

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

Kod referansı

- Klasör düğümlerinde selectable:false kullanılır; ayrıntı görünümünü yalnızca belge yaprakları değiştirir.

- Yerel filtre esnektir ve eşleşen hiyerarşiyi korur.

- Sabitlenmiş belgeler uygulama durumunda ayrı tutulur.

### Özgün editoryal düzen

Aura stilli yerel bileşenlerle oluşturulmuş duyarlı belge gezgini.

```
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:#f4f6f4;color:#26342d;font-family:system-ui,sans-serif}.editorial-library{max-width:1120px;padding:32px;margin:auto}header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#5f7566}h1{font-size:34px;line-height:1.15;margin:14px 0}.intro{font-size:15px;line-height:1.7;color:#5f6b63}.library-layout{display:grid;grid-template-columns:340px 1fr;gap:24px}.library-nav,.document{background:white;border:1px solid #dfe5df;border-radius:12px;min-width:0}.nav-heading{padding:18px 18px 0}.nav-heading h2,.pinned h2{font-size:15px;margin:0 0 8px}.nav-heading>div{display:flex;gap:4px}.pinned{border-top:1px solid #dfe5df;padding:20px}.pinned h2{display:flex;justify-content:space-between}.pinned p{font-size:13px;color:#6a766e}.pinned ul{list-style:none;padding:0;margin:0}.pinned li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;padding:8px 0}.document{padding:28px}.document-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#617265}.document h2{font-size:28px;line-height:1.2;margin:16px 0 8px}.owner{font-size:11px;letter-spacing:.08em;color:#6a766e}.map-art{height:130px;background:#dae4d4;border-radius:6px;position:relative;overflow:hidden;margin:24px 0}.map-art i{position:absolute;width:300px;height:130px;border:1px solid #63845a;opacity:.55;border-radius:50%;left:10%;top:30%;transform:rotate(-20deg)}.map-art i:nth-child(2){width:240px;height:100px;top:42%;left:16%}.map-art i:nth-child(3){width:180px;height:70px;top:54%;left:22%}.map-art span{position:absolute;top:16px;left:18px;font-size:9px;font-weight:700;letter-spacing:.16em;color:#496342}.document h3{font-size:15px;margin-top:24px}.document ol{padding-left:21px;font-size:14px;line-height:1.7}.document li{margin:10px 0}.document-note{border-left:3px solid #8aad88;background:#f1f5ee;padding:12px 16px;font-size:13px;line-height:1.7;margin:24px 0}.local-note,.selection-status{font-size:12px;color:#6a766e;line-height:1.6}.selection-status{margin-top:20px}@media(max-width:760px){.editorial-library{padding:24px 14px}header{flex-direction:column;gap:6px}h1{font-size:29px}.library-layout{grid-template-columns:1fr}.document{padding:22px}}
```

Kod referansı

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

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

```
// 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 primevue@4.5.5 @primeuix/themes@1.2.5
// 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

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

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

- Sabitlenmiş PrimeVue sürümü Bu sayfada kullanılan tam uygulama sürümü.

- Sabitlenmiş lisans Örnek paket için MIT lisansı.

- Tree özellikleri Denetimli durum ve filtreleme özellikleri.

- Tree uygulaması Seçim ve hiyerarşi davranışı.

- Aura ön ayarı kaynağı İlkel, anlamsal ve bileşen ön ayarı yapısı; buradaki değerler yüklenmiş 1.2.5 sürümüne sabitlenmiştir.

- Güncel tema kılavuzu Mimari başvuru; değerleri kopyalamadan önce ana sürüm farklılıklarını kontrol edin.

- Tree kılavuzu Hiyerarşi ve klavye kullanımı başvurusu.

## Prime UI Tasarım Sistemi İlgili Kaynaklar

### Pure CSS

Pure CSS; çalışma zamanı bileşenleri olmadan ızgaralar, formlar, düğmeler, menüler ve tablolar için kullanılan modüler bir stil sayfasıdır. Bu kılavuz, isteğe bağlı duyarlı ızgara modülünün ve yerel anlamsal öğelerin filtrelenebilir bir ekipman kataloğunda nasıl birlikte çalıştığını gösterir; sıralama ve seçim açıkça uygulanmıştır.

### Quasar

Gerçek marka ve aralık değerleri, QForm doğrulaması, üç adımlı brief oluşturucu, radyo biçim seçenekleri ve canlı 45 dakikalık gündem içeren yerel bir Quasar rehberli iş akışı.

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


- [Uygulama başvurusu](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Kaynak](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [Kaynak](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Kaynak](https://primevue.org/theming/styled/)
- [Destekleyici belirtimi okuyun](https://github.com/primefaces/primevue/blob/4.5.5/LICENSE.md)
- [Destekleyici belirtimi okuyun](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [Destekleyici belirtimi okuyun](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/BaseTree.vue)
- [Destekleyici belirtimi okuyun](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Destekleyici belirtimi okuyun](https://primevue.org/tree/)
- [Destekleyici belirtimi okuyun](https://primevue.org/button/)
- [Destekleyici belirtimi okuyun](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/config/PrimeVue.js)
- [Kod referansı](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Kod referansı](https://primevue.org/theming/styled/)
- [Sabitlenmiş PrimeVue sürümü Bu sayfada kullanılan tam uygulama sürümü.](https://github.com/primefaces/primevue/tree/4.5.5)
- [Sabitlenmiş lisans Örnek paket için MIT lisansı.](https://github.com/primefaces/primevue/blob/4.5.5/LICENSE.md)
- [Tree özellikleri Denetimli durum ve filtreleme özellikleri.](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/BaseTree.vue)
- [Tree uygulaması Seçim ve hiyerarşi davranışı.](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Aura ön ayarı kaynağı İlkel, anlamsal ve bileşen ön ayarı yapısı; buradaki değerler yüklenmiş 1.2.5 sürümüne sabitlenmiştir.](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [Güncel tema kılavuzu Mimari başvuru; değerleri kopyalamadan önce ana sürüm farklılıklarını kontrol edin.](https://primevue.org/theming/styled/)
- [Tree kılavuzu Hiyerarşi ve klavye kullanımı başvurusu.](https://primevue.org/tree/)