# Arco Design Tasarım Sistemi ## Arco Design Tasarım Sistemi Arayüz önizlemesi Rapor bölümlerini ara, seç, dahil et veya çıkar; ardından bağımsız ve yerel bir taslak hazırla. ## Arco Design Tasarım Sistemi Tasarım başvurusu Arco React üst kaynak kodu. Less sabitleri @ ile; çalışma zamanı CSS değişkenleri ise -- ile gösterilir. Önizlemedeki aralık ve panel düzeni, bu ölçekleri temel alan özgün uygulama tercihleridir. ### Boyutlandırma ve aralık | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | @size-mini | 24px | Kompakt bileşen yüksekliği takma adı. | | @size-small | 28px | Küçük bileşen yüksekliği. | | @size-default | 32px | Varsayılan bileşen yüksekliği. | | @size-large | 36px | Büyük bileşen yüksekliği. | | @spacing-1 … @spacing-6 | 2, 4, 6, 8, 10, 12px | Küçük aralık adımları. | | @spacing-7 … @spacing-10 | 16, 20, 24, 32px | Gruplama adımları. | | @border-radius-small | 2px | Küçük köşe yarıçapları. | | @border-radius-medium | 4px | Orta köşe yarıçapları. | | @border-radius-large | 8px | Büyük köşe yarıçapları. | ### Yazı ve hareket | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | @font-size-body | 14px | Genel gövde metni boyutu. | | @line-height-base | 1.5715 | 14px boyutunda yaklaşık 22px satır yüksekliği. | | @font-family | Inter, system and CJK fallbacks | Inter adını kullanmak, yazı tipini indirmez. | | @code-family | Consolas, Menlo | Kod odaklı yazı tipi yığını. | | @transition-duration-1 / 2 / 3 | 0.1s / 0.2s / 0.3s | İlk üç süre sabiti. | | @transition-timing-function-standard | cubic-bezier(.34,.69,.1,1) | Yayımlanmış standart eğri. | ### Palet sabitleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | @arcoblue-6 | #165dff | Arco mavisi sabiti. | | @gray-1 | #f7f8fa | Açık nötr renk. | | @gray-2 | #f2f3f5 | İkincil dolgu nötr rengi. | | @gray-3 | #e5e6eb | Kenarlık nötr rengi. | | @gray-8 | #4e5969 | İkincil metin nötr rengi. | | @gray-10 | #1d2129 | Ana metin nötr rengi. | | @red-6 | #f53f3f | Kırmızı sabiti; küçük metinde yeterli kontrast olduğunu varsaymayın. | | @green-6 | #00b42a | Yeşil sabiti. | ### Çalışma zamanı değişkeni kuralları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --color-text-1 | Primary text role | Varsayılan değişken öneki arco değildir. | | --color-fill-2 | Secondary fill role | Tema duyarlı alanlarda sabit bir gri yerine bunu kullanın. | | --border-radius-medium | Medium corner role | Çalışma zamanında dışa aktarılır. | | body[arco-theme="dark"] | Dark theme selector | body özniteliğini ayarlayın veya kaldırın. | | --color-bg-2 | Container surface | Koyu modda farklı bir değere çözümlenir. | ### Transfer durumu ve olayları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | dataSource | {key:string,value:string,disabled?:boolean}[] | Bölümleri tanımlamak için kararlı anahtarlar kullanılır. | | targetKeys | string[] | Hedef sütunundaki üyelik. | | selectedKeys | string[] | Onay kutusu seçimi; hedef üyeliği değildir. | | onChange | (newTargetKeys,direction,moveKeys) | Yeni üyelik dizisini uygulayın. | | onSelectChange | (leftSelectedKeys,rightSelectedKeys) | Kontrollü selectedKeys için ikisini birlikte kullanın. | | filterOption | (inputValue,item) => boolean | Varsayılan davranış, büyük-küçük harfe duyarlı alt dize eşleştirmesidir. | | showSearch | Boolean or per-list configuration | Örnek, her iki sütunda da aramayı etkinleştirir. | | oneWay | Boolean | Yalnızca hedeften kaldırma istenmiyorsa kullanın. | | simple | Boolean or retainSelectedItems options | Seçimde aktarım yapabilir; açık aktarım eylemleriyle aynı değildir. | ## Arco Design Tasarım Sistemi Eksiksiz rehber 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ı. ## Arco Design Tasarım Sistemi Transfer, yalnızca onay kutularını değil, üyeliği temsil eder ### Rapor bölümlerini bilinçli olarak seç > Arco Transfer, bir operatörün iki kümeyi karşılaştırması gerektiğinde kullanışlıdır: kullanılabilir bölümler ve rapora eklenen bölümler. Bir satırı işaretlemek, o bölümü daha sonra yapılacak bir işlem için seçer; basit mod etkin değilse bölüm hemen taşınmaz. Örnek, açıkça tanımlanmış iki adımlı işlemi korur. Kullanıcı, Acquisition channels bölümünü seçer, Include düğmesine basar ve ardından bir taslak hazırlar. Bu taslak ayrı bir anlık görüntüdür; dolayısıyla düzenleyicide sonradan yapılan değişiklikler hazırlanmış sürümü sessizce değiştirmez. Destekleyici belirtimi okuyun ## Arco Design Tasarım Sistemi Boyut ölçeğini ve aralık ölçeğini ayrı kullanın ### Aynı sayı farklı boyutları ifade edebilir Arco boyut sabitleri dörder piksel artarken aralık ölçeği daha büyük artışlara geçmeden önce 2, 4, 6, 8, 10 ve 12 ile başlar. Varsayılan bileşen boyutu 32px'e karşılık gelir. Her boyut veya aralık son ekinin aynı miktarı ifade ettiğini varsaymak, tutarsız kontrollere yol açar. Bu özgün tasarımda iki aktarım paneli orta yarıçaplı köşeler ve 24px sayfa kenar boşluğu kullanır. Küçük onay kutuları ve satır ayraçları, yoğun seçim görevini destekler; geniş sayfa alanları ise yararlı içeriği gereğinden büyük kartlarla değiştirmeden bölümler arasında ayrım sağlar. Destekleyici belirtimi okuyun ## Arco Design Tasarım Sistemi Uygulama stillerinde anlamsal rolleri koruyun ### CSS değişkenlerinin kendine özgü bir adlandırma kuralı vardır Varsayılan tema, arco ön eki olmadan --color-text-1 ve --color-fill-2 gibi değişkenler dışa aktarır. Özel derlemelerde bu ön ek değişebileceğinden, ad alanı tanımlanmış bir uygulamayla bütünleştirirken derlenmiş temayı inceleyin. Birincil palet değişkenleri RGB kanallarıdır; bunları tam bir onaltılık renk kodu gibi ele almak yerine rgb(var(--primary-6)) biçiminde kullanın. Önizlemede, temel eylem ve seçili satırlar için doğrulanmış Arco mavi tonu kullanılır. Kısıtlı bir bölümde, operatörün düzeltebileceği bir hata izlenimi verebilecek kırmızı renk yerine devre dışı bir onay kutusu ve açıklayıcı metin kullanılır. Destekleyici belirtimi okuyun ## Arco Design Tasarım Sistemi Yoğun etiketleri ve uzun bölüm adlarını destekleyin ### Kullanışlı bir metin ölçeği Varsayılan gövde metni boyutu 14px, satır yüksekliği çarpanı ise 1.5715'tir. Yayımlanmış yazı tipi ailesi Inter ile başlar ve sistem yazı tipleri ile CJK geri dönüşlerini içerir. Bu bir CSS yığınıdır; Inter yazı tipi dosyasının yüklendiğinin kanıtı değildir. Bir rapor bölümü etiketi örnektekinden daha uzun olabilir. Çevrimdışı sürüm, satır metnini kaydırır ve küçük görünüm alanlarında panelleri alt alta dizer; böylece Include ve Remove etiketleri okunaklı kalır. Metin okunaksız hâle gelene kadar aktarım bileşeninin tamamını küçültmez. Destekleyici belirtimi okuyun ## Arco Design Tasarım Sistemi Belirsiz davranışı önlemek için iki denetimli dizi kullanın ### Üyelik ve seçim farklı anlamlara gelir targetKeys, hangi öğelerin raporda bulunduğunu belirtir. selectedKeys ise her iki listedeki hangi onay kutularının o anda etkin olduğunu belirtir. onSelectChange sol ve sağ dizileri sağlar; selectedKeys değerini denetlerken bu dizileri birleştirin. onChange ise yeni üyelik durumunu, yönü ve taşınan anahtarları sağlar. 1. Görüntülenen etiket değişse bile her kaynak öğenin anahtarını sabit tutun. 2. onSelectChange içindeki sol ve sağ seçim dizilerini birleştirin. 3. onChange tarafından sağlanan yeni diziyle targetKeys değerini değiştirin. 4. Taşıma işleminden sonra geçici seçimi temizleyin ve işlem yerelindeki etkisini duyurun. Destekleyici belirtimi okuyun ## Arco Design Tasarım Sistemi Arama, üyeliği silmeden görünümü daraltmalıdır ### Eşleştirme kuralını açıkça belirtin Kaynak bileşenin varsayılan filtresi, büyük/küçük harfe duyarlı bir alt dize denetimiyle sorguyu öğe değeriyle karşılaştırır. Verilen örnek bu davranışı küçük harflerle eşleştirme yapacak şekilde değiştirir. Gizlenmiş, seçili bir satırın aranması, satırın rapor üyeliğinden çıkarıldığı anlamına gelmemelidir. Bu küçük liste için sayfalandırma ve sanallaştırma pek fayda sağlamaz. Arco, daha büyük veri kümeleri için bu seçenekleri sunar; ancak sabit anahtarların, hedef kümenin tamamının ve filtrelenmiş görünümlerde öğe seçme kurallarının sorumluluğu yine uygulamadadır. - Kullanılabilir ve eklenen listelerin arama alanları ayrı adlandırılmıştır. - Eşleşme bulunamadı mesajı, boş bir veri kümesini değil filtrelenmiş görünümü açıklar. - Taslak hazırlanırken yalnızca o anda görünür satırlar değil, targetKeys kullanılır. Destekleyici belirtimi okuyun ## Arco Design Tasarım Sistemi Koyu mod, metnin yanı sıra yüzeyleri de değiştirir ### Yayımlanmış seçiciyi ayarlayın Arco, koyu tema geçersiz kılmalarını arco-theme="dark" özniteliğine sahip tema etiketi altında yayımlar. Varsayılan derlemede bu etiket body'dir. Bu özniteliği kaldırmak normal kuralları geri yükler; dark adlı ilgisiz bir sınıf eklemek aynı API değildir. Koyu bir önizleme ekliyorsanız kapsayıcı ve metin rollerini birlikte belirleyin. Çevrimdışı örnek bilinçli olarak açık temada kalırken yerel örnek, önceden içe aktarılmış temayı CSS kullanabilir. Rapor küçük resimlerini veya çizimleri genel bir filtreyle tersine çevirmeyin. ``` document.body.setAttribute('arco-theme', 'dark'); // Restore default: document.body.removeAttribute('arco-theme'); ``` Kod referansı Destekleyici belirtimi okuyun ## Arco Design Tasarım Sistemi Paket, stil sayfası ve gerçek kapsam sınırı ### Rapor taslağı, rapor verilerini dışa aktarmaz React paketi @arco-design/web-react, paketin tam CSS girişi ise dist/css/arco.css dosyasıdır. Örnek, paketin kökünden Transfer ve Button bileşenlerini içe aktarır ve rapor oluşturucuya ait olmayan bir API uydurmak yerine denetimli durum kullanır. Bağımsız önizleme, çevrimdışı çalışabilmesi için seçim davranışını yerel onay kutuları ve düğmelerle yorumlar. Etkileşim mantığını ve duyarlı yerleşimi doğrular; yerel paketin bir tüketici projesinde derlendiğini kanıtlamaz. Üretim ortamında kullanılacak bir dışa aktarıcı için devre dışı bırakılmış bir örnek satırın ötesinde bir arka uç ve izin denetimleri gerekir. Destekleyici belirtimi okuyun ## Arco Design Tasarım Sistemi Bileşen Örnekleri ### Tamamlanmış, bağımsız ve etkileşimli örnek Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Arco Transfer davranışının bağımsız HTML yorumu ve doğrulanmış tema dayanakları; yerel React örneği ayrıca sağlanmıştır. ``` Arco report section transfer
Report studio

Choose report sections

Build an outline from the sections available to this workspace.

Available sections

Included in report

Select a section, then choose Include or Remove.

Prepared outline

No outline prepared yet.

HTML interpretation of Arco Transfer · Original sample sections · Local outline only, no analytics data exported

``` Kod referansı - Kısıtlı rapor bölümü taşınamaz. Seçili satırlar ve rapora eklenmiş bölümler ayrı durumlardır; bu, yerel Transfer bileşeni için açıklanan ayrımı yansıtır. ### Denetimli rapor bölümü aktarımı Transfer, kaynak ve hedef üyeliğini yönetirken uygulama durumu ayrıca hazırlanmış bir taslağı saklar. Kısıtlı bir satır, sunucu tarafındaki yetkilendirmeyi uyguluyormuş gibi davranmadan devre dışı bir seçeneği gösterir. ``` // npm install @arco-design/web-react react react-dom import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {Transfer,Button} from '@arco-design/web-react'; import '@arco-design/web-react/dist/css/arco.css'; const data = [ {key:'overview',value:'Executive overview'}, {key:'traffic',value:'Acquisition channels'}, {key:'retention',value:'Retention cohorts'}, {key:'revenue',value:'Revenue breakdown'}, {key:'raw',value:'Raw event export (restricted)',disabled:true} ]; function ReportBuilder(){ const [target,setTarget]=useState(['overview']); const [selected,setSelected]=useState([]); const [snapshot,setSnapshot]=useState([]); const [status,setStatus]=useState('Choose sections for a local report.'); return

Report sections

item.value.toLowerCase().includes(query.toLowerCase())} onSelectChange={(left,right)=>setSelected([...left,...right])} onChange={(keys,direction,moved)=>{ setTarget(keys);setSelected([]); setStatus(`${moved.length} section(s) moved to ${direction}. Draft only.`); }} />

{status}

Prepared outline

{snapshot.length ?
    {snapshot.map(key=>
  1. {data.find(item=>item.key===key).value}
    2. )}
:

No outline prepared yet.

}
; } createRoot(document.getElementById('root')).render(); ``` Kod referansı - Onay kutusu seçimi ile rapora eklenen üyelik farklı dizilerdir. - Özel filtre, eşleştirmeyi büyük/küçük harfe duyarsız yapar. - Örnek veriler özgündür; hiçbir analiz verisi yüklenmez veya dışa aktarılmaz. Yerel derleme ayrı bir entegrasyon kontrolü olarak kalır. ## Arco Design Tasarım Sistemi Aracı Kurulumu ### Uygulamaya Başlangıç Noktası arco.css stil sayfasının tamamını bir kez içe aktarın ve React örneğini bir kök öğeye bağlayın. Bu React paketini Arco Vue içe aktarımlarıyla karıştırmayın. ``` npm install @arco-design/web-react react react-dom ``` ### Projeniz İçin Bir İstem ``` Arco React Transfer bileşenini sabit dataSource anahtarlarıyla ve ayrı, denetimli targetKeys ve selectedKeys değerleriyle kullanın. Büyük/küçük harfe duyarsız bir filtre, açıkça belirtilmiş Include/Remove eylemleri ve hazırlanmış bir taslak anlık görüntüsü sağlayın. Arco CSS değişken sözdizimini koruyun ve çevrimdışı yorumu doğru biçimde açıklayın. ``` ## Arco Design Tasarım Sistemi Kaynaklar ve Kapsam Bağımsız OpenDesign referansı. Özgün rapor verileri ve yalnızca yerel önizleme; devre dışı satırlar bir yetkilendirme sınırı oluşturmaz. - React paketi Kurulum ve stil sayfası girişi. - Genel belirteçler Boyutlar, aralıklar ve anlamsal eşlemeler. - Varsayılan tema Tipografi ve hareket. - Palet Doğrulanmış renk dayanakları. - CSS değişkenleri Çalışma zamanı adları ve koyu tema seçicisi. - Transfer API Denetimli durum ve geri çağırma imzaları. ## Arco Design Tasarım Sistemi İlgili Kaynaklar ### Atlassian tasarım sistemi Anlamsal Atlassian belirteçleri, sekiz piksellik boşluk ölçeği, gerçek Button, Lozenge ve Toggle API’leri ve gerekli Compiled stil ayarıyla bir iş planlama panosu oluşturun. Bir işi inceleyin, panoyu filtreleyin ve seçimi durumla karıştırmadan yerel bir iş öğesini taşıyın. ### AWS Cloudscape Gerçek görsel yenileme belirteçleri, yoğunluğa duyarlı boşluklar, kontrollü form API’leri ve çalışan iki adımlı kaynak sihirbazı içeren bir Cloudscape yapılandırma kılavuzu. ### Backbase tasarım sistemi Backbase’in Angular modülleri, anlamsal tema dışa aktarımı ve açıkça tanımlanmış inceleme durumlarıyla markalı bir bankacılık inceleme akışı oluşturun. Web API’lerini, ayrı olarak belgelenmiş yerel boyutlarla karşılaştırın. - [Uygulama başvurusu](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Kaynak](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Kaynak](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Kaynak](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [Kaynak](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Kaynak](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Kod referansı](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Kod referansı](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [React paketi Kurulum ve stil sayfası girişi.](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Genel belirteçler Boyutlar, aralıklar ve anlamsal eşlemeler.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Varsayılan tema Tipografi ve hareket.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Palet Doğrulanmış renk dayanakları.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [CSS değişkenleri Çalışma zamanı adları ve koyu tema seçicisi.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Transfer API Denetimli durum ve geri çağırma imzaları.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)