Arco’nun kontrollü Transfer bileşeniyle bir rapor bölümü seçicisi oluşturun. Gerçek boşluk ve boyut ölçeklerini, CSS değişken adlandırma kurallarını, anlamsal arka plan katmanlarını ve satırları seçmekle taşımak arasındaki farkı keşfedin.
Arco Transfer davranışının bağımsız HTML yorumu ve doğrulanmış tema sabitleri; yerel React örneği ayrıca sunulur. · Uygulama başvurusu
02
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.
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.
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.
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.
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.
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.
Görüntülenen etiket değişse bile her kaynak öğenin anahtarını sabit tutun.
onSelectChange içindeki sol ve sağ seçim dizilerini birleştirin.
onChange tarafından sağlanan yeni diziyle targetKeys değerini değiştirin.
Taşıma işleminden sonra geçici seçimi temizleyin ve işlem yerelindeki etkisini duyurun.
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.
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.
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.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Arco report section transfer</title><style>
*{box-sizing:border-box}body{margin:0;color:#1d2129;background:#f7f8fa;font:14px/22px Arial,sans-serif}header{padding:20px 28px;background:white;border-bottom:1px solid #e5e6eb;display:flex;justify-content:space-between}.logo{font-size:18px;font-weight:bold;letter-spacing:-.02em}.logo i{font-style:normal;color:#165dff;margin-right:8px}header small{color:#4e5969}main{max-width:1050px;padding:28px;margin:auto}h1{font-size:24px;line-height:32px;margin:0 0 8px}.lead{color:#4e5969;margin:0 0 24px}.transfer{display:grid;grid-template-columns:minmax(0,1fr) 106px minmax(0,1fr);align-items:stretch}.list{border:1px solid #e5e6eb;background:white;border-radius:4px;min-width:0}.head{padding:16px;background:#f2f3f5;display:flex;gap:8px;justify-content:space-between}.head h2{font-size:14px;margin:0}.count{font-size:12px;color:#4e5969}.search{padding:12px;border-bottom:1px solid #e5e6eb}.search label{font-size:12px;display:block;margin-bottom:4px;color:#4e5969}.search input{height:32px;width:100%;border:1px solid transparent;background:#f2f3f5;padding:4px 12px;font:inherit;border-radius:2px}input:focus,button:focus-visible{outline:2px solid #165dff;outline-offset:2px}.items{min-height:290px;padding:8px}.item{display:flex;gap:10px;padding:12px 8px;border-radius:2px;align-items:start;cursor:pointer}.item:has(input:checked){background:#e8f3ff}.item input{width:16px;height:16px;accent-color:#165dff;margin-top:3px;flex-shrink:0}.item small{display:block;color:#4e5969;font-size:12px}.item:has(input:disabled){color:#86909c;cursor:not-allowed}.ops{padding:16px 12px;display:flex;flex-direction:column;gap:12px;justify-content:center}button{font:14px/22px Arial;border:1px solid #e5e6eb;background:white;color:#1d2129;border-radius:2px;padding:5px 12px;cursor:pointer}.ops button{padding:5px 4px}.primary{background:#165dff;border-color:#165dff;color:#fff}button:disabled{background:#f2f3f5;color:#86909c;border-color:#e5e6eb;cursor:not-allowed}.footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0}.footer p{font-size:12px;color:#4e5969;margin:0}.outline{background:white;border:1px solid #e5e6eb;border-radius:4px;padding:24px}.outline h2{font-size:16px;margin:0 0 12px}.outline ol{margin:0;padding-left:20px}.note{color:#4e5969;font-size:12px;margin-top:20px}.empty{padding:20px 8px;color:#4e5969}.selection{font-size:12px;color:#4e5969;padding:10px 16px;border-top:1px solid #e5e6eb}@media(max-width:650px){main{padding:24px 16px}.transfer{grid-template-columns:1fr}.ops{flex-direction:row;padding:12px}.ops button{padding:6px 16px}.items{min-height:160px}.footer{align-items:start;flex-direction:column}header{padding:16px}}
</style><header><span class="logo"><i>A /</i> Analytics workspace</span><small>Report studio</small></header><main><h1>Choose report sections</h1><p class="lead">Build an outline from the sections available to this workspace.</p><div class="transfer"><section class="list"><div class="head"><h2>Available sections</h2><span id="left-count" class="count"></span></div><div class="search"><label for="left-search">Find available section</label><input id="left-search" type="search" placeholder="Search by section name"></div><div class="items" id="left"></div><div class="selection" id="left-selected"></div></section><div class="ops"><button class="primary" id="include" disabled>Include →</button><button id="remove" disabled>← Remove</button></div><section class="list"><div class="head"><h2>Included in report</h2><span id="right-count" class="count"></span></div><div class="search"><label for="right-search">Find included section</label><input id="right-search" type="search" placeholder="Search included sections"></div><div class="items" id="right"></div><div class="selection" id="right-selected"></div></section></div><div class="footer"><p id="status" role="status">Select a section, then choose Include or Remove.</p><button id="prepare" class="primary">Prepare outline</button></div><section class="outline"><h2>Prepared outline</h2><div id="snapshot">No outline prepared yet.</div></section><p class="note">HTML interpretation of Arco Transfer · Original sample sections · Local outline only, no analytics data exported</p></main><script>
const data=[{key:'overview',value:'Executive overview',detail:'A concise summary of the reporting period'},{key:'traffic',value:'Acquisition channels',detail:'How people arrive at your product'},{key:'retention',value:'Retention cohorts',detail:'Returning usage by cohort'},{key:'revenue',value:'Revenue breakdown',detail:'Revenue categories and trends'},{key:'raw',value:'Raw event export',detail:'Restricted · unavailable in this specimen',disabled:true}];const $=id=>document.getElementById(id);let target=new Set(['overview']),selected=new Set();
function render(){for(const side of ['left','right']){const items=data.filter(x=>target.has(x.key)===(side==='right')),query=$(side+'-search').value.toLowerCase(),host=$(side);host.replaceChildren();$(side+'-count').textContent=items.length+' sections';const visible=items.filter(x=>x.value.toLowerCase().includes(query));if(!visible.length){const p=document.createElement('p');p.className='empty';p.textContent=query?'No matching sections.':'No sections in this column.';host.append(p)}for(const item of visible){const label=document.createElement('label');label.className='item';const input=document.createElement('input');input.type='checkbox';input.id='check-'+item.key;input.checked=selected.has(item.key);input.disabled=!!item.disabled;input.setAttribute('aria-label',item.value);input.onchange=()=>{input.checked?selected.add(item.key):selected.delete(item.key);render();$('check-'+item.key)?.focus()};const text=document.createElement('span'),small=document.createElement('small');text.textContent=item.value;small.textContent=item.detail;text.append(small);label.append(input,text);host.append(label)}$(side+'-selected').textContent=items.filter(x=>selected.has(x.key)).length+' selected'}$('include').disabled=!data.some(x=>selected.has(x.key)&&!target.has(x.key)&&!x.disabled);$('remove').disabled=!data.some(x=>selected.has(x.key)&&target.has(x.key)&&!x.disabled);$('prepare').disabled=!target.size}
function move(toTarget){const moved=data.filter(x=>selected.has(x.key)&&target.has(x.key)!==toTarget&&!x.disabled);for(const item of moved)toTarget?target.add(item.key):target.delete(item.key);selected.clear();render();$('status').textContent=moved.length+' section(s) '+(toTarget?'included in':'removed from')+' the local draft.';$(toTarget?'right-search':'left-search').focus()}
$('include').onclick=()=>move(true);$('remove').onclick=()=>move(false);for(const side of ['left','right'])$(side+'-search').oninput=render;$('prepare').onclick=()=>{const ol=document.createElement('ol');for(const item of data.filter(x=>target.has(x.key))){const li=document.createElement('li');li.textContent=item.value;ol.append(li)}$('snapshot').replaceChildren(ol);$('status').textContent='Local report outline prepared. No data exported.'};render();
</script></html>
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.
jsx
// 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 <main style={{padding:24,maxWidth:960,margin:'auto'}}>
<h1>Report sections</h1>
<Transfer dataSource={data} targetKeys={target} selectedKeys={selected}
titleTexts={['Available sections','Included in report']}
operationTexts={['Include','Remove']}
showSearch searchPlaceholder={['Find available section','Find included section']}
filterOption={(query,item)=>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.`);
}} />
<p role="status">{status}</p>
<Button type="primary" disabled={!target.length} onClick={()=>{
setSnapshot([...target]);setStatus('Local report outline prepared. No data exported.');
}}>Prepare outline</Button>
<h2>Prepared outline</h2>
{snapshot.length ? <ol>{snapshot.map(key=><li key={key}>{data.find(item=>item.key===key).value}</li>)}</ol> : <p>No outline prepared yet.</p>}
</main>;
}
createRoot(document.getElementById('root')).render(<ReportBuilder />);
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.
04
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.
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.
05
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.
