Codex Tasarım Sistemi.

Codex Tasarım Sistemi: Yalnızca CSS ve Vue rotaları

İhtiyacınıza uygun uygulamayı seçin

Codex, Vue bileşenleri ve belgelenmiş, yalnızca CSS kullanan bileşen yapıları sunar. Canlı örnek, ikincisini kullanır: arama denetiminde Codex tarafından belgelenen tam sarmalayıcı, metin alanı ve uç düğme sınıfları bulunur; yerel bir uygulama betiği de özgün üç makale özetini filtreler. Ayrı Vue örneğinde eşdeğer paket içe aktarımları gösterilir.

Yalnızca CSS kullanan bir arama, sırf benzer görünüyor diye tahminli bir birleşik kutuya dönüşmez. Bu örnek bir sorgu gönderir ve sonuç listesi görüntüler. ARIA liste kutusu desenini kullanmaz ve TypeaheadSearch uyguladığını iddia etmez.

Destekleyici belirtimi okuyun

Codex Tasarım Sistemi: Okuma için tipografi

İçerik ve kontrol rollerini birbirinden ayırın

font-family-base token’ı sans-serif olarak çözümlenir; kullanılabilir system-sans yığını ayrı bir roldür. Codex ayrıca Linux Libertine temelli, Georgia, Times ve diğer yedekleri içeren serif heading-main rolü sunar. Önizlemede yazı tipi indirmeden serif makale başlığı ve sans-serif kontroller kullanılır.

Aşağıdaki başvuruda 1rem olan font-size-medium ile 1.625rem olan line-height-medium birbirinden ayrı gösterilir. Birimsiz line-height-content değeri, kullanıcı tarafından oluşturulan içerik için tasarlanmıştır; her bileşenin kendi satır yüksekliğini değiştirmeye yönelik genel bir talimat değildir. Yerel input ve button CSS bileşenlerinin kendi kontrol ölçülerini korumasını sağlayın.

Destekleyici belirtimi okuyun

Codex Tasarım Sistemi: Aralıklar ve kesme noktaları

Adlandırılmış ölçeği ve istisnalarını kullanın

Codex spacing-100 değeri 16px, spacing-150 değeri 24px ve spacing-200 değeri 32px’tir. Ölçekte açıkça belirtilmiş istisnalar da vardır: spacing-30 değeri 5px’tir ve varsayılan 32px kontrol yüksekliği için dikey kontrol dolgusunu destekler. Her aralığı 8px’lik bir ızgaraya yuvarlamak, belgelenmiş bir bileşen kararını ortadan kaldırır.

Örnek, belgelenmiş tablet sınırını kullanarak 640px’in altında sonuç listesini tam genişliğe çıkarır. Okuma genişliğinin uygulama tarafından belirlenen üst sınırı 56rem’dir. Masaüstü kesme noktası 1120px, geniş masaüstü kesme noktası ise 1680px’tir; bu eşikler, her uygulamaya otomatik olarak sağlanan bir ızgarayı değil, görünüm alanı kategorilerini tanımlar.

Destekleyici belirtimi okuyun

Codex Tasarım Sistemi: Renk ve eylem rolleri

Progressive, genel bir mavi süsleme değildir

Codex, eylem türünü düğmenin görsel ağırlığından ayırır. Progressive bir eylem süreci ilerletirken primary ağırlığı, o görünümdeki ana eylemi belirtir. Bu yerel dizinde arama yapmak için nötr normal düğme uygundur; düşük vurgulu bir kontrol ise sonuçlarla rekabet etmeden aramayı temizleyebilir.

Derlenmiş CSS, base text #202122 ve progressive #36c dâhil, özel özellikleri için yedek renkler içerir. Önizleme bu durumlarda yerel bileşen CSS kullanır. Sonuç panelinin açık renkli arka planı uygulama düzenine aittir; yeni bir Codex durum token’ı olarak tanımlanmamıştır.

Destekleyici belirtimi okuyun

Codex Tasarım Sistemi: SearchInput anatomisi

Input ve düğmeyi bilinçli biçimde birleştirin

Yalnızca CSS kullanan yapı, kök öğede .cdx-search-input--has-end-button sınıfını, bir .cdx-search-input__input-wrapper öğesini, start-icon değiştiricisi bulunan bir .cdx-text-input öğesini ve .cdx-search-input__end-button sınıfına sahip bir düğmeyi gerektirir. Sarmalayıcıları çıkarırsanız birleşik geometri ve simge hizalaması kaybolur.

Görünür etiket, aramanın kapsamını belirtir. Simge aralığı dekoratiftir ve erişilebilirlik API’lerinden gizlenmiştir. Form, Enter tuşunu ve düğme etkinleştirmesini tek bir gönderme dinleyicisi üzerinden işler; sonuçlar güncellendikten sonra sayı, nazikçe duyurulan bir durum bölgesi aracılığıyla bildirilir. Boş giriş, tüm yerel örnekleri yeniden gösterir.

• Bir sayfadaki içeriği bulmak için SearchInput kullanın.
• Tahminli gezinme önerileri gerekiyorsa TypeaheadSearch kullanın.
• Bir form değeri olarak seçenek belirlemek için Lookup kullanın.

Destekleyici belirtimi okuyun

Codex Tasarım Sistemi: Sonuçlar ve ayrıntılı okuma

Okurun bulunduğu yeri koruyun

Her sonuçta adlandırılmış bir başlık, özgün kısa bir açıklama ve yerel okuma panelini açan bir düğme bulunur. Panel uygulama tarafından oluşturulmuştur; Codex Dialog değildir: belge akışında kalır, modal arka planı yoktur ve odağı hapsetmez.

Bir örneği açtığınızda odak panel başlığına taşınır. Paneli kapattığınızda odak, paneli açan düğmeye döner. Yeniden arama yapıldığında önceki ayrıntı kapatılır ve sonuç sayısı yeniden hesaplanır; böylece eski bir makale yeni sorgunun sonucuymuş gibi görünmez. Eşleşme bulunmayan bir sorguda açıklayıcı metin ve açık bir temizleme eylemi gösterilir.

Destekleyici belirtimi okuyun

Codex Tasarım Sistemi: Yön ve giriş davranışı

İngilizce dışındaki dilleri de hesaba katın

Bileşen belgelerinde soldan sağa ve sağdan sola örnekler bulunur. Codex çok dilli bir bilgi ekosisteminde kullanıldığından uygulama düzeninde, tüm simgelerin ve okuma eylemlerinin solda olduğunu varsaymak yerine mantıksal inline/block aralıkları kullanılmalıdır. Örneğin özel düzeninde, yönün önemli olduğu yerlerde margin-inline ve padding-inline kullanılır.

Buradaki arama yalnızca gönderildiğinde çalışır. Böylece IME ile oluşturulmakta olan metnin tamamlanmış bir sorgu gibi ele alınması önlenir. Üretim ortamında kullanılacak bir otomatik tamamlama özelliğinde, metin bileşimi sırasında girişin doğru işlenmesi, asenkron isteklerin iptali ve doğru bir menü etkileşim modeli gerekir; yalnızca CSS kullanan yerel örnek bunların hiçbirini sunduğunu iddia etmez.

Destekleyici belirtimi okuyun

Codex Tasarım Sistemini Entegre Etme ve Genişletme

Kitaplığın sürümünü sabitleyin, sonuç mantığını siz yönetin

Doğrulanmış paket @wikimedia/codex 2.7.0’dır ve stil girişi olarak dist/codex.style.css dosyasını sunar. Yalnızca CSS kullanan demo, tüm kontrolleri yerel HTML bileşenleri olduğundan ve küçük yerel betik filtreleme ile okuma paneli durumunu yönettiğinden Vue çalışma zamanına ihtiyaç duymaz. Vue varyantı, uygulama durumu çerçeve tarafından yönetildiğinde CdxSearchInput ve CdxButton bileşenlerini içe aktarır.

Kod paketi GPL-2.0-or-later lisanslıdır ve lisans dosyası yerel varlıklarla birlikte sunulur. Örnekler Wikipedia’nın kimliğini veya makale içeriğini kopyalamaz. Gerçek bir arama uç noktasına bağlanmadan önce yerel eşleşme yok durumu etiketini değiştirmekle yetinmeyin; ağ hatalarını, yüklenme durumunu ve güncelliğini yitirmiş yanıtları ayrıca ele alın.

1. Sabitlenmiş paketi yükleyin veya lisansı ile birlikte stil dosyasını kopyalayın.
2. Belgelenmiş, yalnızca CSS kullanan yapıyı oluşturun veya dışa aktarılan Vue bileşenlerini kullanın.
3. Sorgu ve sonuç mantığını uygulamaya ekleyin; arama anlamını koruyun.
4. Klavye odağını ve dar ekran düzenlerini çevrilmiş gerçek içerikle doğrulayın.

Destekleyici belirtimi okuyun

Codex Tasarım Sistemi Bileşen Örnekleri

<form id="article-search" role="search">
  <label for="query">Find an example article</label>
  <div class="cdx-search-input cdx-search-input--has-end-button">
    <div class="cdx-search-input__input-wrapper">
      <div class="cdx-text-input cdx-text-input--has-start-icon">
        <input id="query" class="cdx-text-input__input" type="search">
        <span class="cdx-text-input__icon cdx-text-input__start-icon" aria-hidden="true"></span>
      </div>
    </div>
    <button type="submit" class="cdx-button cdx-search-input__end-button">Search</button>
  </div>
</form>
<p id="result-count" role="status"></p>

<script setup>
import { ref } from 'vue';
import { CdxSearchInput, CdxButton } from '@wikimedia/codex';
import '@wikimedia/codex/dist/codex.style.css';
const query = ref('');
const submitted = ref('');
function search() { submitted.value = String(query.value).trim(); }
</script>
<template>
  <form role="search" @submit.prevent="search">
    <CdxSearchInput v-model="query" aria-label="Find an example article" />
    <CdxButton action="progressive" weight="primary" type="submit">Search</CdxButton>
  </form>
  <p role="status">Submitted query: {{ submitted || 'All examples' }}</p>
</template>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Codex knowledge search</title><link rel="stylesheet" href="vendor/codex-2.7.0/codex.style.css"><style>*{box-sizing:border-box}body{font:16px/1.625 sans-serif;color:#202122;margin:0}main{max-width:56rem;margin:auto;padding:32px 24px}h1{font:normal 32px/1.3 Georgia,serif;border-bottom:1px solid #a2a9b1;padding-bottom:12px}h2{font-size:20px;margin:0 0 8px}label{display:block;font-weight:700;margin-bottom:8px}.top{font-size:14px;color:#54595d}.result{padding:24px 0;border-bottom:1px solid #c8ccd1}.result p{margin:8px 0 16px}.tools{display:flex;align-items:center;gap:16px;justify-content:space-between}.reading{padding:24px;background:#f8f9fa;border:1px solid #a2a9b1;margin-block:24px}.reading h2:focus{outline:2px solid #36c;outline-offset:4px}small{display:block;margin-top:32px;color:#54595d;font-size:14px}[hidden]{display:none!important}@media(max-width:639px){main{padding:24px 16px}.tools{align-items:stretch;flex-direction:column}.result .cdx-button{width:100%}}
</style><main><p class="top">Independent knowledge index · Codex CSS-only</p><h1>Explore the example collection</h1><p>Find an original topic summary and open its reading panel. This small index runs entirely in your browser.</p><form id="article-search" role="search">
  <label for="query">Find an example article</label>
  <div class="cdx-search-input cdx-search-input--has-end-button">
    <div class="cdx-search-input__input-wrapper">
      <div class="cdx-text-input cdx-text-input--has-start-icon">
        <input id="query" class="cdx-text-input__input" type="search">
        <span class="cdx-text-input__icon cdx-text-input__start-icon" aria-hidden="true"></span>
      </div>
    </div>
    <button type="submit" class="cdx-button cdx-search-input__end-button">Search</button>
  </div>
</form>
<p id="result-count" role="status"></p><div class="tools"><p id="empty" hidden>No matching topics. Try “river” or clear the search.</p><button type="button" class="cdx-button cdx-button--weight-quiet" id="clear">Clear search</button></div><div id="results"></div><section class="reading" id="reading" hidden><h2 id="reading-title" tabindex="-1"></h2><p id="reading-text"></p><button type="button" class="cdx-button" id="close">Close reading panel</button></section><small>Original example content. Wikimedia Codex 2.7.0 controls; application-owned results and inline panel. No external search request.</small></main><script>
const data=[{title:'River observation notes',text:'A field notebook can record water level, weather and observation time together. Repeated observations from the same location help readers compare conditions without confusing a new measurement with a changed method.',summary:'Organising repeated observations at a river station.'},{title:'Community archive descriptions',text:'An archive description records what an item is, when it was created and how it relates to other items. A clear description distinguishes an original document from a later copy and identifies uncertain dates without hiding that uncertainty.',summary:'Describing original documents and their context.'},{title:'Garden seed collection',text:'A seed record can distinguish the plant name, collection date and storage method. Keeping those attributes separate makes it easier to compare batches, while a free-text note preserves observations that do not fit a controlled field.',summary:'Keeping plant, date and storage information readable.'}];let opener;const results=document.querySelector('#results'),query=document.querySelector('#query'),reading=document.querySelector('#reading'),count=document.querySelector('#result-count');function render(){reading.hidden=true;results.replaceChildren();const found=data.filter(d=>(d.title+' '+d.summary).toLowerCase().includes(query.value.trim().toLowerCase()));count.textContent=found.length+' example topics';document.querySelector('#empty').hidden=found.length>0;for(const d of found){let a=document.createElement('article');a.className='result';let h=document.createElement('h2');h.textContent=d.title;let p=document.createElement('p');p.textContent=d.summary;let b=document.createElement('button');b.type='button';b.className='cdx-button';b.textContent='Read '+d.title;b.onclick=()=>{opener=b;document.querySelector('#reading-title').textContent=d.title;document.querySelector('#reading-text').textContent=d.text;reading.hidden=false;document.querySelector('#reading-title').focus()};a.append(h,p,b);results.append(a)}}document.querySelector('form').onsubmit=e=>{e.preventDefault();render()};document.querySelector('#clear').onclick=()=>{query.value='';render();query.focus()};document.querySelector('#close').onclick=()=>{reading.hidden=true;opener?.focus()};render();
</script></html>