# Arco Design-Designsystem ## Arco Design-Designsystem – Interface-Vorschau Berichtsabschnitte suchen, auswählen, hinzufügen oder entfernen und anschließend eine unabhängige lokale Gliederung erstellen. ## 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. ### Größen und Abstände | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | @size-mini | 24px | Alias für die Höhe kompakter Komponenten. | | @size-small | 28px | Kleine Komponenten-Höhe. | | @size-default | 32px | Standard-Komponenten-Höhe. | | @size-large | 36px | Große Komponenten-Höhe. | | @spacing-1 … @spacing-6 | 2, 4, 6, 8, 10, 12px | Kleine Abstände. | | @spacing-7 … @spacing-10 | 16, 20, 24, 32px | Abstände für Gruppierungen. | | @border-radius-small | 2px | Kleine Eckenradien. | | @border-radius-medium | 4px | Mittlere Eckenradien. | | @border-radius-large | 8px | Große Eckenradien. | ### Typografie und Bewegung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | @font-size-body | 14px | Globale Schriftgröße für Fließtext. | | @line-height-base | 1.5715 | Ungefähr 22 px Zeilenhöhe bei 14 px. | | @font-family | Inter, system and CJK fallbacks | Die Angabe Inter lädt die Schriftart nicht herunter. | | @code-family | Consolas, Menlo | Schriftfamilie für codeorientierte Inhalte. | | @transition-duration-1 / 2 / 3 | 0.1s / 0.2s / 0.3s | Die ersten drei Konstanten für Zeitdauern. | | @transition-timing-function-standard | cubic-bezier(.34,.69,.1,1) | Veröffentlichte Standardkurve. | ### Farbpaletten-Anker | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | @arcoblue-6 | #165dff | Arco-Blau-Anker. | | @gray-1 | #f7f8fa | Helles Neutral. | | @gray-2 | #f2f3f5 | Neutrale Sekundärfüllung. | | @gray-3 | #e5e6eb | Neutrale Rahmenfarbe. | | @gray-8 | #4e5969 | Neutrale Sekundärtextfarbe. | | @gray-10 | #1d2129 | Neutrale Haupttextfarbe. | | @red-6 | #f53f3f | Rot-Anker; gehen Sie nicht davon aus, dass der Kontrast für kleine Schrift ausreicht. | | @green-6 | #00b42a | Grün-Anker. | ### Konventionen für Laufzeitvariablen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --color-text-1 | Primary text role | Das Standardpräfix für Variablen ist nicht arco. | | --color-fill-2 | Secondary fill role | In Theme-abhängigen Bereichen statt eines fest codierten Grautons verwenden. | | --border-radius-medium | Medium corner role | Zur Laufzeit exportiert. | | body[arco-theme="dark"] | Dark theme selector | Das Attribut des body-Elements setzen oder entfernen. | | --color-bg-2 | Container surface | Wird im Dunkelmodus anders aufgelöst. | ### Transfer-Status und Ereignisse | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | dataSource | {key:string,value:string,disabled?:boolean}[] | Stabile Schlüssel identifizieren Abschnitte. | | targetKeys | string[] | Zugehörigkeit zur Zielspalte. | | selectedKeys | string[] | Checkbox-Auswahl, nicht Zugehörigkeit zum Ziel. | | onChange | (newTargetKeys,direction,moveKeys) | Das neue Zugehörigkeitsarray übernehmen. | | onSelectChange | (leftSelectedKeys,rightSelectedKeys) | Beides für kontrolliertes selectedKeys kombinieren. | | filterOption | (inputValue,item) => boolean | Die ursprüngliche Standardeinstellung sucht nach einer Teilzeichenfolge unter Beachtung der Groß- und Kleinschreibung. | | showSearch | Boolean or per-list configuration | Das Beispiel aktiviert die Suche in beiden Spalten. | | oneWay | Boolean | Nur verwenden, wenn Elemente beim Entfernen aus der Auswahl nicht aus dem Ziel entfernt werden sollen. | | simple | Boolean or retainSelectedItems options | Kann Elemente bereits bei der Auswahl verschieben; ist nicht gleichbedeutend mit expliziten Übertragungsaktionen. | ## Arco Design – Vollständiger Designsystem-Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. 1. Behalten Sie die Schlüssel aller Quellelemente stabil, auch wenn sich ihre angezeigte Beschriftung ändert. 2. Verketten Sie in onSelectChange die Auswahl-Arrays der linken und rechten Seite. 3. Ersetzen Sie targetKeys durch das neue Array aus onChange. 4. Setzen Sie die temporäre Auswahl nach einem Verschieben zurück und geben Sie die lokale Auswirkung bekannt. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. ``` document.body.setAttribute('arco-theme', 'dark'); // Restore default: document.body.removeAttribute('arco-theme'); ``` Code-Referenz Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. ``` 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

``` Code-Referenz - 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. ``` // 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(); ``` Code-Referenz - 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. ## 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. ``` npm install @arco-design/web-react react react-dom ``` ### Ein Prompt für dein Projekt ``` 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. ``` ## Arco Design Quellen und Geltungsbereich des Arco-Designsystems Unabhängige Referenz zu OpenDesign. Originale Berichtsdaten und lokale Vorschau; deaktivierte Zeilen sind keine Autorisierungsgrenze. - React-Paket Installation und Stylesheet-Einstiegspunkt. - Globale Design-Tokens Abmessungen, Abstände und semantische Zuordnungen. - Standard-Theme Typografie und Bewegung. - Farbpalette Verifizierte Farbwerte. - CSS-Variablen Laufzeitnamen und Dark-Mode-Selektor. - Transfer in API Signaturen für gesteuerten Zustand und Callbacks. ## Weiterführende Ressourcen zum Designsystem von Arco Design ### Atlassian Designsystem Erstelle ein Board zur Issue-Planung mit semantischen Atlassian-Tokens, einer Abstandsfolge in Acht-Pixel-Schritten, echten Button-, Lozenge- und Toggle-APIs sowie der erforderlichen Einrichtung für Compiled-Styling. Prüfe ein Issue, filtere das Board und verschiebe ein lokales Arbeitselement, ohne Auswahl und Status zu verwechseln. ### AWS Cloudscape Ein Konfigurationsleitfaden für Cloudscape mit echten Tokens zur visuellen Aktualisierung, dichteabhängigen Abständen, APIs für kontrollierte Formulare und einem funktionsfähigen zweistufigen Ressourcen-Assistenten. ### Backbase Designsystem Erstellen Sie mit den Angular-Modulen von Backbase, einem semantischen Theme-Export und klar definierten Prüfstatus einen gebrandeten Prüfablauf für Bankgeschäfte. Vergleichen Sie Web-APIs mit separat dokumentierten nativen Abmessungen. - [Implementierungsreferenz](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Quelle](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Quelle](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Quelle](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [Quelle](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Quelle](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Code-Referenz](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Code-Referenz](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [React-Paket Installation und Stylesheet-Einstiegspunkt.](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Globale Design-Tokens Abmessungen, Abstände und semantische Zuordnungen.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Standard-Theme Typografie und Bewegung.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Farbpalette Verifizierte Farbwerte.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [CSS-Variablen Laufzeitnamen und Dark-Mode-Selektor.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Transfer in API Signaturen für gesteuerten Zustand und Callbacks.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)