# Sistema di design Arco Design

## Sistema di design Arco Design: anteprima dell’interfaccia

Cerca, seleziona, includi o rimuovi sezioni del report, quindi prepara uno schema locale indipendente.

## Sistema di design Arco Design: riferimento di progettazione

Codice sorgente upstream di Arco React. I valori Less sono indicati con @; le variabili CSS a runtime usano --. Le spaziature dell’anteprima e il layout dei pannelli sono scelte originali dell’applicazione basate su queste scale.

### Dimensioni e spaziature

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| @size-mini | 24px | Alias dell’altezza del componente compatto. |
| @size-small | 28px | Altezza del componente piccola. |
| @size-default | 32px | Altezza predefinita del componente. |
| @size-large | 36px | Altezza del componente grande. |
| @spacing-1 … @spacing-6 | 2, 4, 6, 8, 10, 12px | Intervalli di spaziatura ridotti. |
| @spacing-7 … @spacing-10 | 16, 20, 24, 32px | Intervalli per raggruppare gli elementi. |
| @border-radius-small | 2px | Angoli piccoli. |
| @border-radius-medium | 4px | Angoli medi. |
| @border-radius-large | 8px | Angoli grandi. |
### Tipografia e movimento

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| @font-size-body | 14px | Dimensione globale del testo del corpo. |
| @line-height-base | 1.5715 | Interlinea approssimativa di 22px con caratteri da 14px. |
| @font-family | Inter, system and CJK fallbacks | Indicare Inter come nome non comporta il suo download. |
| @code-family | Consolas, Menlo | Stack di caratteri orientato al codice. |
| @transition-duration-1 / 2 / 3 | 0.1s / 0.2s / 0.3s | Le prime tre costanti di durata. |
| @transition-timing-function-standard | cubic-bezier(.34,.69,.1,1) | Curva standard pubblicata. |
### Ancoraggi della palette

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| @arcoblue-6 | #165dff | Ancoraggio del blu Arco. |
| @gray-1 | #f7f8fa | Neutro chiaro. |
| @gray-2 | #f2f3f5 | Neutro per il riempimento secondario. |
| @gray-3 | #e5e6eb | Neutro per i bordi. |
| @gray-8 | #4e5969 | Neutro per il testo secondario. |
| @gray-10 | #1d2129 | Neutro per il testo principale. |
| @red-6 | #f53f3f | Ancoraggio del rosso; non dare per scontato il contrasto con testi piccoli. |
| @green-6 | #00b42a | Ancoraggio del verde. |
### Convenzioni delle variabili a runtime

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --color-text-1 | Primary text role | Il prefisso predefinito delle variabili non è arco. |
| --color-fill-2 | Secondary fill role | Usalo al posto di un grigio codificato direttamente nelle aree compatibili con il tema. |
| --border-radius-medium | Medium corner role | Esportato a runtime. |
| body[arco-theme="dark"] | Dark theme selector | Imposta o rimuovi l’attributo del body. |
| --color-bg-2 | Container surface | Si risolve in modo diverso in modalità scura. |
### Stato ed eventi di Transfer

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| dataSource | {key:string,value:string,disabled?:boolean}[] | Le chiavi stabili identificano le sezioni. |
| targetKeys | string[] | Appartenenza alla colonna di destinazione. |
| selectedKeys | string[] | Selezione della checkbox, non appartenenza alla destinazione. |
| onChange | (newTargetKeys,direction,moveKeys) | Conferma il nuovo array di appartenenza. |
| onSelectChange | (leftSelectedKeys,rightSelectedKeys) | Combinali per controllare selectedKeys. |
| filterOption | (inputValue,item) => boolean | La modalità predefinita originale cerca corrispondenze di sott stringhe distinguendo tra maiuscole e minuscole. |
| showSearch | Boolean or per-list configuration | L’esempio abilita la ricerca in entrambe le colonne. |
| oneWay | Boolean | Usalo solo quando non si desidera rimuovere elementi dalla destinazione. |
| simple | Boolean or retainSelectedItems options | La selezione può spostare gli elementi; non equivale alle azioni di trasferimento esplicite. |
## Sistema di design Arco Design: guida completa

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

## Sistema di design Arco Design: Transfer rappresenta l’appartenenza, non un semplice elenco di checkbox

### Scegli con attenzione le sezioni del report

> Arco Transfer è utile quando un operatore deve confrontare due insiemi: le sezioni disponibili e quelle incluse in un report. Selezionare una riga la contrassegna per un’operazione successiva; la sezione non viene spostata immediatamente, a meno che non sia attiva la modalità semplice.

L’esempio mantiene esplicita l’azione in due passaggi. L’utente seleziona Canali di acquisizione, attiva Includi e poi prepara una scaletta. Questa scaletta è un’istantanea separata, quindi le modifiche successive nell’editor non riscrivono silenziosamente la versione preparata.

Leggi la specifica di supporto

## sistema di design Arco Design: usa separatamente la scala delle dimensioni e quella della spaziatura

### Lo stesso numero può indicare dimensioni diverse

Le costanti delle dimensioni di Arco aumentano di quattro pixel alla volta, mentre la scala della spaziatura inizia con 2, 4, 6, 8, 10 e 12 prima di passare a incrementi più ampi. La dimensione predefinita del componente corrisponde a 32px. Supporre che ogni suffisso di dimensione o spaziatura indichi la stessa quantità produrrebbe controlli incoerenti.

In questa composizione originale, i due pannelli di trasferimento hanno angoli con raggio medio e un margine della pagina di 24px. Caselle di selezione piccole e divisori tra le righe supportano la selezione densa; le aree più ampie della pagina creano separazione senza sostituire contenuti utili con schede sovradimensionate.

Leggi la specifica di supporto

## sistema di design Arco Design: mantieni i ruoli semantici negli stili dell’applicazione

### CSS: le variabili hanno una propria convenzione di denominazione

Il tema predefinito esporta variabili come --color-text-1 e --color-fill-2 senza il prefisso arco. Le build personalizzate possono modificare tale prefisso, quindi controlla il tema compilato quando lo integri in un’applicazione con namespace. Le variabili della palette principale sono canali RGB: chi le usa deve scrivere rgb(var(--primary-6)), senza trattare la variabile come un colore esadecimale completo.

L’anteprima usa il riferimento cromatico blu verificato di Arco per l’azione principale e le righe selezionate. Per una sezione con restrizioni usa una casella disabilitata e un testo esplicativo, anziché il rosso, che potrebbe suggerire un errore correggibile dall’operatore.

Leggi la specifica di supporto

## sistema di design Arco Design: gestisci etichette dense e nomi di sezioni lunghi

### Una scala pratica per il testo del corpo

La dimensione predefinita del testo del corpo è 14px, con un moltiplicatore di interlinea di 1.5715. La famiglia pubblicata inizia con Inter e comprende alternative di sistema e CJK. È uno stack CSS, non la prova che sia stato caricato un file del font Inter.

L’etichetta di una sezione del report può essere più lunga di quella dell’esempio. La versione offline manda a capo il testo delle righe e dispone i pannelli in colonna su schermi piccoli, mantenendo leggibili le etichette Includi e Rimuovi. Non riduce l’intero widget di trasferimento fino a rendere il testo illeggibile.

Leggi la specifica di supporto

## sistema di design Arco Design: due array controllati evitano comportamenti ambigui

### Appartenenza e selezione hanno significati diversi

targetKeys indica quali elementi sono inclusi nel report. selectedKeys indica quali caselle sono attive in quel momento in entrambi gli elenchi. onSelectChange fornisce array per sinistra e destra; concatenali per controllare selectedKeys. onChange fornisce la nuova appartenenza, la direzione e le chiavi spostate.

1. Mantieni stabile la chiave di ogni elemento di origine anche quando cambia l’etichetta visualizzata.

2. Combina gli array di selezione di sinistra e destra in onSelectChange.

3. Sostituisci targetKeys con il nuovo array restituito da onChange.

4. Azzera la selezione temporanea dopo uno spostamento e indica l’effetto locale.

Leggi la specifica di supporto

## sistema di design Arco Design: la ricerca restringe la visualizzazione senza modificare l’appartenenza

### Specifica chiaramente la regola di corrispondenza

Il filtro predefinito dell’origine confronta la query con il valore dell’elemento usando una ricerca per sottostringa che distingue maiuscole e minuscole. L’esempio fornito sostituisce questo comportamento con una ricerca che converte il testo in minuscolo. Cercare una riga selezionata ma nascosta non deve far pensare che la riga non faccia più parte del report.

Per un elenco così piccolo, paginazione e virtualizzazione offrono pochi vantaggi. Arco mette a disposizione queste opzioni per insiemi di dati più grandi, ma l’applicazione resta responsabile delle chiavi stabili, dell’insieme completo degli elementi di destinazione e delle regole di selezione degli elementi nelle visualizzazioni filtrate.

- Gli elenchi delle sezioni disponibili e incluse hanno campi di ricerca con etichette distinte.

- Il messaggio di mancata corrispondenza descrive la visualizzazione filtrata, non un insieme di dati vuoto.

- La preparazione di una scaletta usa targetKeys, non solo le righe attualmente visibili.

Leggi la specifica di supporto

## sistema di design Arco Design: la modalità scura modifica le superfici oltre al testo

### Imposta il selettore pubblicato

Arco pubblica le proprie regole di sovrascrittura per la modalità scura sotto il tag del tema con arco-theme="dark". Nella build predefinita, il tag è body. Rimuovendo quell’attributo si ripristinano le regole normali; aggiungere una classe non correlata chiamata dark non è la stessa cosa API.

Se aggiungi un’anteprima scura, definisci insieme i ruoli del contenitore e del testo. L’esempio offline resta intenzionalmente chiaro, mentre l’esempio nativo può usare il tema CSS già importato. Non invertire i colori delle miniature dei report o delle illustrazioni applicando un filtro indiscriminato.

```
document.body.setAttribute('arco-theme', 'dark');
// Restore default:
document.body.removeAttribute('arco-theme');
```

Riferimento del codice

Leggi la specifica di supporto

## sistema di design Arco Design: pacchetto, foglio di stile e confini effettivi

### Una scaletta del report non esporta i dati del report

Il pacchetto React è @arco-design/web-react e il relativo punto d’ingresso completo CSS è dist/css/arco.css. L’esempio importa Transfer e Button dalla radice del pacchetto e usa uno stato controllato, senza inventare un’API per la creazione di report.

L’anteprima autonoma riproduce il comportamento di selezione usando caselle e pulsanti nativi, così da funzionare offline. Verifica la logica di interazione e la composizione reattiva, ma non dimostra che il pacchetto nativo sia stato compilato in un progetto che lo utilizza. Un esportatore di produzione richiederebbe un backend e verifiche delle autorizzazioni, assenti in un esempio con righe disabilitate.

Leggi la specifica di supporto

## Esempi di componenti del sistema di design Arco Design

### Esempio interattivo completo e autonomo

Salva l’intero documento come index.html e aprilo in un browser. Interpretazione autonoma HTML del comportamento di Arco Transfer e riferimenti verificati al tema; esempio nativo React fornito separatamente.

```
<!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>
```

Riferimento del codice

- La sezione del report con restrizioni non può essere spostata. Le righe selezionate e le sezioni incluse sono stati distinti, in linea con la distinzione illustrata per Transfer nativo.

### Trasferimento controllato delle sezioni del report

Transfer gestisce l’appartenenza agli elenchi di origine e di destinazione, mentre lo stato dell’applicazione conserva una scaletta preparata separatamente. Una riga con restrizioni mostra un’opzione disabilitata senza fingere di imporre l’autorizzazione lato server.

```
// 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 />);
```

Riferimento del codice

- La selezione delle caselle e l’appartenenza al report sono array distinti.

- Il filtro personalizzato non distingue tra maiuscole e minuscole.

- I dati di esempio sono originali; non vengono caricati né esportati dati analitici. La compilazione nativa resta una verifica d’integrazione separata.

## Configurazione dell’agente del sistema di design Arco Design

### Punto di partenza per l’implementazione

Importa una sola volta il foglio di stile completo arco.css e monta l’esempio React in un elemento radice. Non combinare questo pacchetto React con importazioni di Arco Vue.

```
npm install @arco-design/web-react react react-dom
```

### Un prompt per il tuo progetto

```
Usa Arco React Transfer con chiavi stabili in dataSource e targetKeys e selectedKeys controllati separatamente. Fornisci un filtro senza distinzione tra maiuscole e minuscole, azioni esplicite Includi/Rimuovi e un’istantanea della scaletta preparata. Mantieni la sintassi delle variabili CSS di Arco e descrivi con precisione l’interpretazione offline.
```

## Fonti e ambito del sistema di design Arco Design

Riferimento indipendente OpenDesign. Dati originali del report e anteprima solo locale; le righe disabilitate non costituiscono un limite di autorizzazione.

- pacchetto React Installazione e punto d’ingresso del foglio di stile.

- Token globali Dimensioni, spaziatura e mappature semantiche.

- Tema predefinito Tipografia e animazioni.

- Palette Riferimenti cromatici verificati.

- Variabili CSS Nomi a runtime e selettore per la modalità scura.

- Transfer API Stato controllato e firme dei callback.

## Risorse correlate al sistema di design Arco Design

### Atlassian sistema di design

Crea una bacheca per la pianificazione delle issue con i token semantici Atlassian, una scala di spaziatura a intervalli di otto pixel, le API reali di Button, Lozenge e Toggle e la configurazione di stile Compiled richiesta. Esamina un’issue, filtra la bacheca e sposta un elemento di lavoro locale senza confondere la selezione con lo stato.

### AWS Cloudscape

Una guida alla configurazione di Cloudscape con token reali per l’aggiornamento visivo, spaziatura adattata alla densità, API controllate per i moduli e una procedura guidata funzionante in due passaggi per le risorse.

### Backbase sistema di design

Crea un flusso di revisione bancaria personalizzato con i moduli Angular di Backbase, l’esportazione semantica del tema e stati di revisione espliciti. Confronta le API web con le dimensioni native documentate separatamente.


- [Riferimento per l’implementazione](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)
- [Fonte](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less)
- [Fonte](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less)
- [Fonte](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less)
- [Fonte](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less)
- [Fonte](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)
- [Leggi la specifica di supporto](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)
- [Leggi la specifica di supporto](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less)
- [Leggi la specifica di supporto](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less)
- [Leggi la specifica di supporto](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less)
- [Riferimento del codice](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less)
- [Leggi la specifica di supporto](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md)
- [Riferimento del codice](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)
- [pacchetto React Installazione e punto d’ingresso del foglio di stile.](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md)
- [Token globali Dimensioni, spaziatura e mappature semantiche.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less)
- [Tema predefinito Tipografia e animazioni.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less)
- [Palette Riferimenti cromatici verificati.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less)
- [Variabili CSS Nomi a runtime e selettore per la modalità scura.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less)
- [Transfer API Stato controllato e firme dei callback.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)