# REI Cedar Tasarım Sistemi ## REI Cedar Tasarım Sistemi Arayüz Önizlemesi Klavye gezintisi ve kullanılamayan bir seçenek dahil olmak üzere gönderim veya teslim alma seçimi için yerel Cedar kutucuklarını kullanın. ## REI Cedar Tasarım Sistemi Tasarım Referansı Değerler, @rei/cdr-tokens 14.0.1 REI temasından çıkarılmıştır; yerel bileşen davranışı @rei/cedar 17.1.0 ile doğrulanmıştır. ### REI teması renk rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | cdr-color-background-button-primary-rest | #1f513f | Birincil düğme dolgusu. | | cdr-color-background-button-primary-hover | #c7dfd1 | Birincil üzerine gelme dolgusu. | | cdr-color-background-primary | #ffffff | Varsayılan içerik yüzeyi. | | cdr-color-background-secondary | #F4F2ED | İkincil yüzey. | | cdr-color-text-button-primary | #fafbf9 | Birincil düğme etiketi. | | cdr-color-text-primary | #4b4a48 | Ana metin rolü. | | cdr-color-text-secondary | #736e65 | Yardımcı metin. | | cdr-color-text-error | #811823 | Hata mesajı metni. | | cdr-color-border-primary | #d5cfc3 | Birincil yüzey sınırı. | | cdr-color-border-secondary | #958e83 | İkincil kenarlık rolü. | ### 10px kök değerinde boşluk ve yarıçap | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | cdr-space-zero | 0 | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-sixteenth-x | 0.1rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-eighth-x | 0.2rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-three-sixteenth-x | 0.3rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-quarter-x | 0.4rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-three-eighth-x | 0.6rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-half-x | 0.8rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-three-quarter-x | 1.2rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-one-x | 1.6rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-one-and-a-half-x | 2.4rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-two-x | 3.2rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-three-x | 4.8rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-space-four-x | 6.4rem | Cedar kökünde 1rem, 10px'tir; bu değerleri 16px kök değerinde olduğu gibi kullanmayın. | | cdr-radius-sharp | 0 | Sabitlenmiş belirteç paketindeki köşe biçimi. | | cdr-radius-soft | 0.2rem | Sabitlenmiş belirteç paketindeki köşe biçimi. | | cdr-radius-softer | 0.4rem | Sabitlenmiş belirteç paketindeki köşe biçimi. | | cdr-radius-softest | 0.6rem | Sabitlenmiş belirteç paketindeki köşe biçimi. | | cdr-radius-round | 999.9rem | Sabitlenmiş belirteç paketindeki köşe biçimi. | ### Fulfillment tile API | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | checked | boolean | Seçili yöntemi yansıtın. | | disabled | boolean | Kullanılamayan seçenek; durum değişikliklerine izin vermeyin. | | role | radio \| checkbox | Tek bir teslimat yöntemi için radio kullanın. | | tabindex | 0 / -1 | Uygulama tek bir sekme durağını ve ok tuşlarıyla gezinmeyi yönetir. | | header slot | method label | Ekran okuyucular için anlaşılır seçim adı. | | body slot | supporting details | Teslimat zamanı veya teslim alma konumu. | | footer slot | prominent detail | Ücret veya kullanılabilirlik. | | icon-right slot | selection indicator | Örnek, seçili yönteme onay işareti ekler. | | loading | boolean | Üstbilgi ve boyutları korurken gövdeyi/altbilgiyi maskeler. | ## REI Cedar 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ı. ## REI Cedar Tasarım Sistemi Vue Çalışma Zamanı ve Stil Bağımlılıkları ### Bileşenleri ve tasarım belirteçlerini birlikte sabitleyin > Çalışan örnek, @rei/cedar 17.1.0 paketini @rei/cdr-tokens 14.0.1 ve Vue 3 ile kullanır. Bileşen paketi modüler giriş noktaları sunar. Bu örnek yalnızca CdrButton ve CdrFulfillmentTile bileşenlerini ve iç içe geçmiş yüzey, yerleşim ve metin bileşenleri için gereken CSS öğelerini içe aktarır. Kaynakta tüm içe aktarmalar listelenmiştir; çünkü yalnızca JavaScript davranışının olması, stillerin uygulanacağını garanti etmez. ### Özel yazı tiplerini örneğin dışında tutun Cedar’ın kurulum yönergeleri, bileşen kullanımını REI yazı tipi haklarından ayrı ele alır. Örnek, cdr-fonts.css dosyasını veya yazı tipi tanımlarını içeren birleştirilmiş stil sayfasını içe aktarmaz. Arayüz metninde sistem sans-serif yazı tipini, özgün editoryal başlıkta ise Georgia’yı kullanır. Bu yedek yazı tipleri uygulama tercihidir; REI marka yazı tipi değildir. ## REI Cedar Tasarım Sistemi Belirteç Birimleri ve Yüzey Renkleri ### Cedar’ın kök ölçeğini kullanın Cedar belirteçlerinde 16px aralık, beklenen kök boyutu 10px olduğu için 1.6rem olarak ifade edilir. Kök boyutunu 16px yapmak, aynı değeri 25.6px’e çıkarır. İzole örnekte html boyutu 62.5% olarak ayarlanır ve body için 1.6rem kullanılır. Farklı bir kök boyutu kullanan ana ürün, mevcut siteye genel bir sıfırlama kuralı yapıştırmak yerine bilinçli bir entegrasyon sınırı belirlemelidir. ### Belirteçleri bileşen rollerine eşleyin Birincil düğmede normal durumda koyu yeşil, üzerine gelindiğinde ise açık yeşil dolgu kullanılır. İçerik yüzeylerinde ve kenarlıklarda sıcak nötr renkler kullanılır. Tablo, dokümantasyon sitesinin temasını değil, REI temasındaki anlamsal değerleri kaydeder. Görselleştirilen çantada özgün dekoratif renkler kullanılmıştır; bu renkler resmî Cedar belirteçleri olarak sunulmaz. ## REI Cedar Tasarım Sistemi Teslimat Karosu Bileşimi ### Değişen her seçeneği tek bir karoda sunun Teslimat karosu; yöntem adını, zamanlamayı ve ücreti veya kullanılabilirlik bilgisini bir arada sunar. İkinci bir etkileşimli bağlantı ya da düğme içermemelidir. Örnekte inceleme eylemi radyo grubunun dışında yer alır ve kullanılamayan hızlı teslimat seçeneğine okunabilir kalan bir açıklama eklenir. Üstbilgi/gövde/altbilgi yuvaları hiyerarşiyi belirginleştirir. ### Seçimi yalnızca kenarlıkla göstermeyin Seçili yöntemin checked=true değeri ayarlanır ve icon-right yuvasında onay işareti gösterilir. Böylece ince kenarlıkların ayırt edilmesinin zor olduğu durumlarda bile mevcut seçim açıkça görülür. Kullanılabilir bir seçeneğe tıklamak yalnızca seçimi günceller; ayrı inceleme adımı yerel seçimi onaylar. Devre dışı yöntemler modeli hiçbir zaman güncellemez. ## REI Cedar Tasarım Sistemi Ürün Bağlamı ve Duyarlı Yerleşim ### Ürünü seçeneklerinin yanında tutun Daha geniş ekranlarda, özgün bir CSS günlük sırt çantası görseli ve ürün özeti teslimat seçeneklerinin yanında yer alır. Ürün kurgusaldır ve teslimat taahhütleri örnek olarak etiketlenmiştir. Bu düzen, REI ürün fotoğraflarını kopyalamadan veya güncel stok bilgisi uydurmadan Cedar’ın sıcak yüzeylerini gösterir. ### Denetimleri küçültmek yerine düzeni yeniden akıtın 700px altında seçenekler, kompakt ürün özetinin ardından tam genişlikli bir bölüme dönüşür. 700px eşiği, Cedar kesme noktası belirteci değil, uygulama yerleşimi tercihidir. Karo içeriği satır sonuna geçebilir ve örneğin toplam yüksekliği sabit görünüm alanına değil, içeriğine bağlıdır. Ürün görseli dekoratif kalır. ## REI Cedar Tasarım Sistemi Seçimi, Klavye ve Geri Bildirim ### Uygulama düzeyinde radyo düğmesi davranışını sağlayın Karolar radyo düğmesi anlambilimini sunar; ancak grup etiketinin, seçili değerin ve odak modelinin sorumluluğu uygulamaya aittir. Sekme sırasına yalnızca seçili ve kullanılabilir seçenek girer. Ok tuşları kullanılabilir seçenekler arasında dolaşır; Home ve End uçlardaki seçenekleri seçer, kullanılamayan hızlı teslimat seçeneği atlanır. Bu davranış, erişilebilirlik yapılacaklar listesine bırakılmak yerine eksiksiz kaynak koda eklenmiştir. ### Eski inceleme geri bildirimini geçersiz kılın Seçimi incelemek, sipariş verildiğini iddia etmeden yerel bir durum mesajı yazar. Seçili karoyu değiştirmek eski sonucu temizler. Durum bölgesi yöntem açıklamasından ayrıdır; böylece yardımcı teknoloji, radyonun erişilebilir adını değiştirmeden geri bildirimi duyurabilir. ## REI Cedar Tasarım Sistemi Eksiksiz Vue Uygulaması ### Aynı yerel ekranı oluşturun Bir Vite Vue projesi oluşturun, sürümleri sabitlenmiş paketleri kurun ve aşağıdaki eksiksiz main.js ile cedar.css örneklerini kullanın. Kök öğenin adını root olarak bırakın veya bağlama seçicisini Vite şablonuna göre güncelleyin. Örnek, okurdan gizli bir SFC ön işlemesi gerektirmemek için Vue render işlevlerini kullanır. 1. Bileşen ve belirteç paketlerinin sabitlenmiş sürümlerini yükleyin. 2. main.js içindeki tüm CSS içe aktarmalarını koruyun. 3. Uygulamayı root öğesine bağlayın. 4. Teslimat yöntemini değiştirmek için ok tuşlarını kullanın ve yerel sonucu inceleyin. ### Yerleşimde sorun aramadan önce stilleri kontrol edin İlk entegrasyon kontrolünde karoların yüzeyleri, sınırları ve iç boşlukları; düğmenin ise Cedar stillerini kullandığı doğrulanmalıdır. Arayüz çalışıyor ama düz metin gibi görünüyorsa bileşen CSS ve belirteç CSS içe aktarmalarını kontrol edin. Boşluklar çok büyükse kök yazı tipi boyutunu inceleyin. Bunlar farklı nedenlerdir ve farklı çözümler gerektirir. ## REI Cedar Tasarım Sistemi Yapay Zekâ Aracısına Devir ve Kabul ### Entegrasyon sınırını belirtin Yapay zekâ aracısından, özel yazı tipleri kullanmadan ve sürümleri sabitlenmiş Cedar bileşenleriyle ve belirteç paketiyle bir Vue 3 teslimat seçicisi oluşturmasını isteyin. Kesin karo durumlarını ve klavye davranışını belirtin. Gerçek bir ürün için kurgusal zamanlamayı arka uç sözleşmesiyle değiştirin; sipariş eylemini etkinleştirmeden önce yükleme ve hata durumlarını ele alın. ### Davranışı ve kaynak kodunu birlikte inceleyin Yerel doğrulama; ok tuşlarıyla seçimi, görünür seçili durumunu, yerel onayı, eski sonucun temizlenmesini ve dar ekran düzenlerini kapsar. İndirilebilir kılavuzda önizlemeyle aynı uygulama kodu bulunur. Çalışma zamanında yerel olarak doğrulanmış olması, örnek teslimat taahhütlerini gerçek kılmaz veya REI markasını yeniden kullanma izni vermez. - Kullanılamayan yöntemler seçilemez. - Seçimi değiştirmek eski onay bilgisini temizler. - Yazı tipi dosyası veya servis çağrısı gerekmez. ## REI Cedar Tasarım Sistemi Bileşen Örnekleri ### main.js — eksiksiz Vue teslimat seçicisi Yerel bileşenler, yerel durum, dolaşan radyo odağı ve gereken tüm stil içe aktarmaları. ``` import { createApp, h, ref } from "vue"; import CdrButton from "@rei/cedar/CdrButton"; import CdrFulfillmentTile from "@rei/cedar/CdrFulfillmentTile"; import "@rei/cedar/dist/cdr-reset.css"; import "@rei/cedar/dist/style/cdr-button.css"; import "@rei/cedar/dist/style/cdr-fulfillment-title.css"; import "@rei/cedar/dist/style/cdr-surface-selection.css"; import "@rei/cedar/dist/style/cdr-layout.css"; import "@rei/cdr-tokens/css"; import "@rei/cedar/dist/style/cdr-surface.css"; import "@rei/cedar/dist/style/cdr-body.css"; import "@rei/cedar/dist/style/cdr-subheading-sans.css"; import "./cedar.css"; const choices = [ { id: "ship", label: "Ship to home", detail: "Sample delivery: 3–5 days", price: "No delivery charge", available: true, }, { id: "pickup", label: "Pick up nearby", detail: "Sample location: North Trail", price: "Ready tomorrow", available: true, }, { id: "express", label: "Express delivery", detail: "Unavailable for this sample item", price: "Choose another method", available: false, }, ]; createApp({ setup() { const selected = ref("ship"), result = ref(""); function choose(id) { selected.value = id; result.value = ""; } function keyboard(e, id) { if ( [ "ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End", ].includes(e.key) ) { e.preventDefault(); const ids = choices.filter((x) => x.available).map((x) => x.id); let next = e.key === "Home" ? ids[0] : e.key === "End" ? ids.at(-1) : ids[ (ids.indexOf(id) + (e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : ids.length - 1)) % ids.length ]; choose(next); document.getElementById("choice-" + next).focus(); } } return () => h("main", [ h("header", [ h("p", { class: "eyebrow" }, "OUTDOOR GEAR / ORIGINAL SPECIMEN"), h("h1", "Ready for the next trail"), h("p", "Choose a fulfillment method for this fictional daypack."), ]), h("div", { class: "composition" }, [ h("section", { class: "product", "aria-label": "Sample product" }, [ h("div", { class: "art", "aria-hidden": "true" }, [ h("div", { class: "pack" }, [h("i"), h("span"), h("b")]), ]), h("div", [ h("h2", "Ridge daypack · 24 L"), h("p", "A lightweight everyday pack for short outings."), h( "p", { class: "note" }, "Illustrated sample product · no inventory or purchase connection", ), ]), ]), h("section", { class: "options" }, [ h( "h2", { id: "fulfillment-label" }, "How would you like to receive it?", ), h( "div", { class: "tiles", role: "radiogroup", "aria-labelledby": "fulfillment-label", }, choices.map((c) => h( CdrFulfillmentTile, { id: "choice-" + c.id, role: "radio", tabindex: c.available && selected.value === c.id ? 0 : -1, checked: selected.value === c.id, disabled: !c.available, "aria-label": c.label, onClick: () => c.available && choose(c.id), onKeydown: (e) => keyboard(e, c.id), }, { header: () => c.label, "icon-right": () => selected.value === c.id ? h( "span", { "aria-hidden": "true", style: "font-size:2rem;color:#1f513f", }, "✓", ) : null, body: () => c.detail, footer: () => c.price, }, ), ), ), h("div", { class: "review" }, [ h( CdrButton, { onClick: () => { result.value = `Local selection: ${choices.find((c) => c.id === selected.value).label}. No order has been placed.`; }, }, () => "Review selection", ), h("p", { role: "status", class: "result" }, result.value), ]), ]), ]), h( "footer", "Native Cedar 17.1.0 fulfillment tiles and button. Original composition with system-font fallback; no REI proprietary fonts or photography.", ), ]); }, }).mount("#root"); ``` Kod referansı - index.html içinde
kullanın. ### cedar.css — özgün ürün düzeni Duyarlı yerleşim, bir CSS görseli ve açıkça belirtilmiş yedek yazı tipleri. ``` html { font-size: 62.5%; } body { margin: 0; color: #2e2e2b; background: #fafbf9; font: 1.6rem/1.5 system-ui, sans-serif; } * { box-sizing: border-box; } main { padding: 3.2rem; } header { border-bottom: 1px solid #dcd6cb; margin-bottom: 3.2rem; padding-bottom: 2.4rem; } h1 { font: 700 3.6rem/1.1 Georgia, serif; margin: 1.2rem 0; } h2 { font: 700 2.2rem/1.25 system-ui, sans-serif; margin: 0 0 1.6rem; } p { margin: 0.8rem 0; } .eyebrow, footer, .note { font-size: 1.4rem; color: #4b4a48; } .composition { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4.8rem; } .product { display: grid; gap: 2.4rem; align-content: start; } .art { height: 25rem; background: #edeae3; border-radius: 0.4rem; display: grid; place-items: center; } .pack { position: relative; width: 12rem; height: 17rem; border-radius: 4rem 4rem 2rem 2rem; background: #48633c; border: 0.6rem solid #34492c; box-shadow: 2rem 1rem 0 -1.2rem #b3ad9f; } .pack i { position: absolute; top: -2.2rem; left: 3.2rem; width: 4.4rem; height: 2.4rem; border: 0.7rem solid #34492c; border-bottom: 0; border-radius: 1.4rem 1.4rem 0 0; } .pack span { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; height: 7rem; border-radius: 1rem; background: #607b52; border-top: 0.5rem solid #34492c; } .pack b { position: absolute; left: 4.4rem; top: 4rem; width: 2rem; height: 2rem; background: #edeae3; border-radius: 50%; } .tiles { display: grid; gap: 1.6rem; } .tiles > * { font-family: system-ui, sans-serif !important; } .review { margin-top: 2.4rem; } .result { color: #355e28; font-size: 1.4rem; margin-top: 1.6rem; } footer { margin-top: 3.2rem; padding-top: 1.6rem; border-top: 1px solid #dcd6cb; } :focus-visible { outline: 3px solid #406eb5; outline-offset: 3px; } @media (max-width: 700px) { main { padding: 2rem; } .composition { grid-template-columns: 1fr; gap: 3.2rem; } .product { grid-template-columns: 12rem 1fr; gap: 1.6rem; } .art { height: 17rem; } .pack { transform: scale(0.7); } h1 { font-size: 2.8rem; } .product h2 { font-size: 1.8rem; } } ``` Kod referansı - REI’ye ait özel yazı tipi dosyaları içe aktarılmaz. ## REI Cedar Tasarım Sistemi Yapay Zekâ Aracısı Kurulumu ### Uygulamaya Başlangıç Noktası Önizleme, bu yerel modülleri birlikte paketler. Yazı tiplerinde sistem yedekleri kullanılır. ``` npm create vite@latest cedar-study -- --template vue cd cedar-study npm install npm install @rei/cedar@17.1.0 @rei/cdr-tokens@14.0.1 # Replace src/main.js and add src/cedar.css with the complete examples. # Change the index.html mount element to id="root". npm run dev ``` ### Projeniz İçin Bir İstem ``` Bu eksiksiz kaynak kodu kullanarak Cedar 17.1.0 ve tokens 14.0.1 ile bir Vue 3 teslimat seçicisi oluşturun. 10px kök ölçeğini yalıtılmış tutun, gerekli bileşen ve belirteç CSS öğelerini içe aktarın, özel yazı tiplerinden kaçının ve dolaşan radyo odağıyla devre dışı seçenekleri koruyun. Gerçek bir envanter sözleşmesi sağlanana kadar kurgusal kullanılabilirlik bilgisi kullanın. ``` ## REI Cedar Tasarım Sistemi Kaynakları ve Kapsamı OpenDesign, REI Cedar için hazırlanmış bir kılavuzdur. Örnek, Cedar 17.1.0’ı tokens 14.0.1 ile çalıştırır. Ürün, görsel, mağaza ve teslimat bilgileri kurgusaldır; REI’ye ait özel yazı tipleri ve fotoğraflar dahil değildir. - Cedar’ı yükleme Vue kurulumu, CSS entegrasyonu ve yazı tipi sınırı. - Teslimat karosu Yuvalar, durumlar ve uygulamanın erişilebilirlikle ilgili sorumlulukları. - Token referansı Web belirteci rolleri ve değerleri. - Cedar kaynak kodu Bileşen kaynak kodu ve paket sürümleri. ## REI Cedar Tasarım Sistemi İlgili Kaynaklar ### Sainsbury's tasarım sistemi Gerçek palet ve boyut referansları, erişilebilir radyo seçenekleri, güncellenen bir özet ve doğru yerel geri bildirimle eksiksiz bir koleksiyon zamanı akışına Sainsbury’s’in herkese açık tasarım yönergelerini uygulayın. ### Salesforce Lightning Yoğun kayıt işlemleri için bir Lightning tasarım kılavuzu: gerçek aralıklar, tipografi ve anlamsal renkler, düzenlenebilir bir vaka çalışma alanı, alan doğrulaması ve yerel değişiklikleri yansıtan bir etkinlik geçmişi. ### Samsung One UI Özgün ve eksiksiz bir okuma tercihleri önizlemesi üzerinden One UI’ın görüntüleme ve etkileşim yapısını, 24dp kenar boşluğu yönergelerini ve %200 metin ölçekleme gereksinimini inceleyin. Koyu görünüm ve açık sıfırlama kurtarma akışı da içerir. - [Uygulama başvurusu](https://cedar.rei.com/components/fulfillment-tile) - [Kaynak](https://cedar.rei.com/tokens/web) - [Kaynak](https://cedar.rei.com/components/fulfillment-tile) - [Kod referansı](https://cedar.rei.com/components/fulfillment-tile) - [Kod referansı](https://cedar.rei.com/tools-resources/installing-cedar) - [Cedar’ı yükleme Vue kurulumu, CSS entegrasyonu ve yazı tipi sınırı.](https://cedar.rei.com/tools-resources/installing-cedar) - [Teslimat karosu Yuvalar, durumlar ve uygulamanın erişilebilirlikle ilgili sorumlulukları.](https://cedar.rei.com/components/fulfillment-tile) - [Token referansı Web belirteci rolleri ve değerleri.](https://cedar.rei.com/tokens/web) - [Cedar kaynak kodu Bileşen kaynak kodu ve paket sürümleri.](https://github.com/rei/rei-cedar)