Erstelle mit Arcos gesteuerter Transfer-Komponente eine Auswahl für Berichtsabschnitte. Entdecke die tatsächlichen Abstands- und Größenabstufungen, CSS-Variablenkonventionen, semantischen Oberflächen und den Unterschied zwischen dem Auswählen und dem Verschieben von Zeilen.
Eigenständige HTML-Interpretation des Verhaltens von Arco Transfer und überprüfter Theme-Anker; ein natives React-Beispiel ist separat verfügbar. · Implementierungsreferenz
02
Arco Design-Designsystem – Designreferenz
Arcos vorgelagerte Quelle für React. Less-Konstanten sind mit @ gekennzeichnet; Laufzeitvariablen von CSS verwenden --. Abstände und Panel-Layout der Vorschau sind eigene Entscheidungen der Anwendung und basieren auf diesen Skalen.
Arco Design-Designsystem: Transfer bildet Zugehörigkeit ab, nicht bloß eine Checkbox-Liste
Berichtsabschnitte gezielt auswählen
Arco Transfer eignet sich, wenn eine Person zwei Gruppen vergleichen muss: verfügbare Abschnitte und die im Bericht enthaltenen Abschnitte. Durch das Markieren einer Zeile wird sie für eine spätere Aktion ausgewählt; der Abschnitt wird dadurch nicht sofort verschoben, es sei denn, der einfache Modus ist aktiviert.
Das Beispiel behält die explizite Aktion in zwei Schritten bei. Eine Person wählt Acquisition channels aus, aktiviert Include und erstellt anschließend eine Gliederung. Diese Gliederung ist eine separate Momentaufnahme. Spätere Änderungen im Editor schreiben die vorbereitete Version daher nicht unbemerkt um.
Arco Design-Designsystem: Größen- und Abstands-Skala getrennt voneinander verwenden
Dieselbe Zahl kann unterschiedliche Dimensionen bezeichnen
Arcos Größenkonstanten steigen in Vier-Pixel-Schritten, während die Abstandsskala mit 2, 4, 6, 8, 10 und 12 beginnt und dann größere Sprünge macht. Die Standardgröße einer Komponente entspricht 32px. Wenn Sie davon ausgehen, dass jeder Größen- oder Abstandsindex denselben Wert bezeichnet, entstehen uneinheitliche Steuerelemente.
Die beiden Transferbereiche haben Ecken mit mittlerem Radius und einen Seitenrand von 24px in dieser originellen Komposition. Kleine Kontrollkästchen und Zeilentrenner unterstützen die dichte Auswahlaufgabe; größere Seitenbereiche schaffen Abstand, ohne nützliche Inhalte durch übergroße Karten zu ersetzen.
Arco Design Arco-Designsystem: Semantische Rollen in der Anwendungsformatierung beibehalten
CSS Variablen haben eine eigene Benennungskonvention
Das Standard-Theme stellt Variablen wie --color-text-1 und --color-fill-2 ohne arco-Präfix bereit. Bei benutzerdefinierten Builds kann sich dieses Präfix ändern. Prüfen Sie daher beim Einbinden in eine Anwendung mit Namensraum das kompilierte Theme. Die Variablen der Primärpalette enthalten RGB-Kanäle; verwenden Sie rgb(var(--primary-6)), statt die Variable als vollständigen Hex-Farbwert zu behandeln.
Die Vorschau verwendet den verifizierten Arco-Blauwert für die primäre Aktion und ausgewählte Zeilen. In einem eingeschränkten Abschnitt kommen ein deaktiviertes Kontrollkästchen und erläuternder Text zum Einsatz, statt einer roten Farbe, die fälschlich einen vom Bediener behebbaren Fehler signalisieren könnte.
Arco Design Arco-Designsystem: Dichte Beschriftungen und lange Abschnittsnamen unterstützen
Eine praxisgerechte Fließtextgröße
Die Standardgröße für Fließtext beträgt 14px bei einem Zeilenhöhenfaktor von 1.5715. Die veröffentlichte Schriftfamilie beginnt mit Inter und umfasst System- und CJK-Ausweichschriften. Dies ist ein CSS-Schriftstapel und kein Beleg dafür, dass eine Inter-Schriftdatei geladen wurde.
Die Beschriftung eines Berichtsabschnitts kann länger sein als im Beispiel. In der Offline-Version wird Zeilentext umgebrochen, und auf kleinen Viewports werden die Bereiche untereinander angeordnet, sodass die Beschriftungen Include und Remove lesbar bleiben. Das gesamte Transfer-Widget wird nicht so weit verkleinert, dass der Text unleserlich wird.
Arco Design Arco-Designsystem: Zwei getrennte Arrays verhindern Mehrdeutigkeiten
Zugehörigkeit und Auswahl haben unterschiedliche Bedeutungen
targetKeys gibt an, welche Elemente zum Bericht gehören. selectedKeys gibt an, welche Kontrollkästchen aktuell in beiden Listen aktiviert sind. onSelectChange liefert Arrays für die linke und rechte Seite; verketten Sie diese, wenn Sie selectedKeys steuern. onChange liefert die neue Zugehörigkeit, die Richtung und die verschobenen Schlüssel.
Behalten Sie die Schlüssel aller Quellelemente stabil, auch wenn sich ihre angezeigte Beschriftung ändert.
Verketten Sie in onSelectChange die Auswahl-Arrays der linken und rechten Seite.
Ersetzen Sie targetKeys durch das neue Array aus onChange.
Setzen Sie die temporäre Auswahl nach einem Verschieben zurück und geben Sie die lokale Auswirkung bekannt.
Arco Design Arco-Designsystem: Die Suche soll die Ansicht eingrenzen, ohne die Zugehörigkeit zu ändern
Die Vergleichsregel klar festlegen
Der Standardfilter der Quelle vergleicht die Abfrage mithilfe einer Suche nach Teilzeichenfolgen unter Beachtung der Groß- und Kleinschreibung mit dem Wert des Elements. Das bereitgestellte Beispiel ersetzt dies durch einen Vergleich in Kleinschreibung. Die Suche nach einer ausgeblendeten ausgewählten Zeile sollte nicht den Eindruck erwecken, sie sei nicht mehr Teil des Berichts.
Für diese kleine Liste bieten Paginierung und Virtualisierung nur wenig Mehrwert. Arco stellt diese Optionen für größere Datenmengen bereit; stabile Schlüssel, die vollständige Zielmenge und die Regeln für die Auswahl von Elementen in gefilterten Ansichten bleiben jedoch Aufgabe der Anwendung.
Die Listen „Verfügbar“ und „Enthalten“ haben jeweils ein eigenes Suchfeld.
Eine Meldung, dass keine Treffer gefunden wurden, bezieht sich auf die gefilterte Ansicht, nicht auf einen leeren Datensatz.
Zum Erstellen einer Gliederung wird targetKeys verwendet, nicht nur die aktuell sichtbaren Zeilen.
Arco Design Arco-Designsystem: Im Dark Mode ändern sich auch die Oberflächen, nicht nur der Text
Den veröffentlichten Selektor festlegen
Arco veröffentlicht seine Dark-Mode-Überschreibungen unter dem Theme-Tag mit arco-theme="dark". Im Standard-Build ist dieses Tag body. Durch Entfernen dieses Attributs werden die normalen Regeln wiederhergestellt; eine beliebige Klasse namens dark ist nicht dasselbe API.
Wenn Sie eine Dark-Mode-Vorschau hinzufügen, stimmen Sie die Rollen für Container und Text gemeinsam ab. Das Offline-Beispiel bleibt bewusst hell, während das native Beispiel das bereits importierte Theme CSS verwenden kann. Berichtsvorschaubilder oder Illustrationen dürfen nicht pauschal mit einem Filter invertiert werden.
Arco Design Arco-Designsystem: Paket, Stylesheet und tatsächliche Abgrenzung
Eine Berichtsgliederung exportiert keine Berichtsdaten
Das Paket React heißt @arco-design/web-react; der vollständige Stylesheet-Einstiegspunkt CSS lautet dist/css/arco.css. Das Beispiel importiert Transfer und Button aus dem Paketstamm und verwendet einen gesteuerten Zustand, statt eine Funktion zum Erstellen von Berichten zu erfinden API.
Die eigenständige Vorschau bildet das Auswahlverhalten mit nativen Kontrollkästchen und Schaltflächen nach, damit sie offline funktioniert. Sie prüft die Interaktionslogik und die responsive Komposition; sie belegt nicht, dass das native Paket in einem Verbraucherprojekt kompiliert wurde. Ein Export in einer Produktionsumgebung würde ein Backend und Berechtigungsprüfungen erfordern, die über ein deaktiviertes Beispiel-Element hinausgehen.
Arco Design Komponentenbeispiele des Arco-Designsystems
Vollständige, eigenständige interaktive Demo
Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Eigenständige HTML-Nachbildung des Verhaltens von Arco Transfer und verifizierter Theme-Farbwerte; ein natives React-Beispiel wird separat bereitgestellt.
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>
Der eingeschränkte Berichtsabschnitt kann nicht verschoben werden. Ausgewählte Zeilen und enthaltene Abschnitte sind separate Zustände und entsprechen damit der für das native Transfer erläuterten Unterscheidung.
Gesteuerter Transfer von Berichtsabschnitten
Transfer verwaltet die Zugehörigkeit zu Quell- und Zielliste, während der Anwendungszustand eine separat vorbereitete Gliederung speichert. Eine eingeschränkte Zeile veranschaulicht eine deaktivierte Option, ohne vorzugeben, eine serverseitige Autorisierung durchzusetzen.
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 />);
Die Auswahl über Kontrollkästchen und die Zugehörigkeit zum Bericht sind unterschiedliche Arrays.
Der benutzerdefinierte Filter unterscheidet nicht zwischen Groß- und Kleinschreibung.
Die Beispieldaten sind original; es werden keine Analysedaten geladen oder exportiert. Die native Kompilierung bleibt eine separate Integrationsprüfung.
04
Arco Design Einrichtung des Arco-Designsystem-Agenten
Ausgangspunkt für die Implementierung
Importieren Sie das vollständige Stylesheet arco.css einmalig und mounten Sie das React-Beispiel in ein Root-Element. Mischen Sie dieses React-Paket nicht mit Arco-Vue-Importen.
Verwenden Sie Arco React Transfer mit stabilen dataSource-Schlüsseln sowie separaten, gesteuerten targetKeys und selectedKeys. Stellen Sie einen Filter bereit, der nicht zwischen Groß- und Kleinschreibung unterscheidet, explizite Aktionen für Include und Remove sowie eine vorbereitete Momentaufnahme der Gliederung. Behalten Sie die CSS-Variablensyntax von Arco bei und kennzeichnen Sie die Offline-Nachbildung eindeutig.
05
Arco Design Quellen und Geltungsbereich des Arco-Designsystems
Unabhängige Referenz zu OpenDesign. Originale Berichtsdaten und lokale Vorschau; deaktivierte Zeilen sind keine Autorisierungsgrenze.
