01Arco Design デザインシステムのインターフェースプレビュー
レポートのセクションを検索・選択し、追加または削除して、独立したローカルの構成案を作成します。
Arco Transfer の動作と検証済みのテーマアンカーに関する、独立したHTMLの解釈です。ネイティブなReactの例は別途提供されています。·
実装リファレンス 02Arco Design デザインシステムのデザインリファレンス
Arco のReact上流ソースです。Less の定数は @ 付きで示し、実行時のCSS変数には -- を使います。プレビューのスペーシングとパネルレイアウトは、これらのスケールに基づく独自のアプリケーション設計です。
| 名前 / ルール | 値 / 設定 | 用途 |
|---|
@size-mini | 24px | コンパクトなコンポーネントの高さの別名。 |
@size-small | 28px | 小サイズのコンポーネントの高さ。 |
@size-default | 32px | デフォルトサイズのコンポーネントの高さ。 |
@size-large | 36px | 大サイズのコンポーネントの高さ。 |
@spacing-1 … @spacing-6 | 2, 4, 6, 8, 10, 12px | 小さい間隔の段階。 |
@spacing-7 … @spacing-10 | 16, 20, 24, 32px | グループ化に使う間隔の段階。 |
@border-radius-small | 2px | 小さな角丸。 |
@border-radius-medium | 4px | 中程度の角丸。 |
@border-radius-large | 8px | 大きな角丸。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|
@font-size-body | 14px | 全体に適用される本文の文字サイズ。 |
@line-height-base | 1.5715 | 14px の文字サイズに対する、約 22px の行ボックス。 |
@font-family | Inter, system and CJK fallbacks | Inter と指定しても、フォントがダウンロードされるわけではありません。 |
@code-family | Consolas, Menlo | コード向けのフォントスタック。 |
@transition-duration-1 / 2 / 3 | 0.1s / 0.2s / 0.3s | 最初の 3 つの時間定数。 |
@transition-timing-function-standard | cubic-bezier(.34,.69,.1,1) | 公開されている標準のイージングカーブ。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|
@arcoblue-6 | #165dff | Arco ブルーのアンカー。 |
@gray-1 | #f7f8fa | ライトテーマのニュートラルカラー。 |
@gray-2 | #f2f3f5 | 二次的な塗りのニュートラルカラー。 |
@gray-3 | #e5e6eb | ボーダーのニュートラルカラー。 |
@gray-8 | #4e5969 | 二次テキストのニュートラルカラー。 |
@gray-10 | #1d2129 | メインテキストのニュートラルカラー。 |
@red-6 | #f53f3f | 赤のアンカー。小さい文字で十分なコントラストが得られるとは限りません。 |
@green-6 | #00b42a | 緑のアンカー。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|
--color-text-1 | Primary text role | デフォルトの変数プレフィックスは arco ではありません。 |
--color-fill-2 | Secondary fill role | テーマに対応する領域では、ハードコードしたグレーの代わりに使用します。 |
--border-radius-medium | Medium corner role | 実行時にエクスポートされます。 |
body[arco-theme="dark"] | Dark theme selector | body 属性を設定または削除します。 |
--color-bg-2 | Container surface | ダークモードでは別の値に解決されます。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|
dataSource | {key:string,value:string,disabled?:boolean}[] | 安定したキーでセクションを識別します。 |
targetKeys | string[] | 移動先の列に所属していること。 |
selectedKeys | string[] | チェックボックスの選択状態であり、移動先への所属ではありません。 |
onChange | (newTargetKeys,direction,moveKeys) | 新しい所属配列を確定します。 |
onSelectChange | (leftSelectedKeys,rightSelectedKeys) | 制御対象の selectedKeys には両方を結合します。 |
filterOption | (inputValue,item) => boolean | デフォルトの検索は、大文字と小文字を区別する部分文字列一致です。 |
showSearch | Boolean or per-list configuration | この例では、両方の列で検索できます。 |
oneWay | Boolean | 移動先から削除したくない場合にのみ使用します。 |
simple | Boolean or retainSelectedItems options | 選択時に移動できますが、明示的な移動操作とは同じではありません。 |
03Arco Design デザインシステム完全ガイド
実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
DESIGN-arco-design.md詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
ガイドをダウンロードArco Design デザインシステム：Transfer が表すのは、単なるチェックボックス一覧ではなく、所属関係です
レポートのセクションを意図的に選ぶ
Arco Transfer は、利用可能なセクションとレポートに含めるセクションという、2 つの集合を担当者が比較する必要がある場合に便利です。行にチェックを付けると、後続の操作対象になります。simple モードが有効でない限り、セクションがすぐに移動するわけではありません。
このサンプルでは、明示的な 2 段階の操作を維持しています。ユーザーは「獲得チャネル」を選択して「追加」を実行し、その後で構成案を作成します。構成案は独立したスナップショットなので、エディターで後から変更しても、作成済みの内容が暗黙に書き換わることはありません。
関連する仕様を確認する
Arco Design デザインシステム：サイズのスケールとスペーシングのスケールは分けて使う
同じ数値でも、寸法の意味は異なる
Arco のサイズ定数は 4 ピクセル刻みで増加します。一方、スペーシングのスケールは 2、4、6、8、10、12 から始まり、その後はより大きな間隔で増加します。デフォルトのコンポーネントサイズは 32px に相当します。すべてのサイズやスペーシングの接尾辞が同じ量を表すと考えると、コントロールに一貫性がなくなります。
この独自のレイアウトでは、2 つの Transfer パネルに中程度の角丸を使い、ページの余白を 24px にしています。小さなチェックボックスと行区切りで、密度の高い選択作業に対応します。ページの大きな領域で余白を確保しつつ、カードを過度に大きくして有用なコンテンツを置き換えることは避けています。
関連する仕様を確認する
Arco Design デザインシステム：アプリケーションのスタイリングではセマンティックな役割を保つ
CSS変数には独自の命名規則があります
デフォルトのテーマでは、--color-text-1 や --color-fill-2 などの変数が arco プレフィックスなしでエクスポートされます。カスタムビルドではプレフィックスを変更できるため、名前空間を使うアプリケーションに組み込む際は、コンパイル済みのテーマを確認してください。パレットの主要な変数は RGB の各チャンネルを表します。完全な hex カラーとして扱うのではなく、rgb(var(--primary-6)) のように使用する必要があります。
プレビューでは、検証済みの Arco ブルーのアンカーを主要なアクションと選択行に使用しています。制限付きのセクションには、操作担当者が解決できるエラーを誤って示す赤ではなく、無効化したチェックボックスと説明テキストを使っています。
関連する仕様を確認する
Arco Design デザインシステム：項目が密集したラベルや長いセクション名に対応する
実用的な本文のスケール
デフォルトの本文サイズは 14px、行の高さの倍率は 1.5715 です。公開されているフォントファミリーは Inter から始まり、システムフォントと CJK 向けのフォールバックを含みます。これはCSSのフォントスタックであり、Inter のフォントファイルが読み込まれた証拠ではありません。
レポートのセクション名は、サンプルより長い場合があります。オフライン版では、小さな画面で行のテキストを折り返し、パネルを縦に並べることで、「追加」と「削除」のラベルを読みやすく保ちます。テキストが読めなくなるほど Transfer ウィジェット全体を縮小することはありません。
関連する仕様を確認する
Arco Design デザインシステム：2 つの制御配列で、動作の曖昧さを防ぐ
所属関係と選択状態は意味が異なる
targetKeys は、どの項目がレポートに含まれているかを示します。selectedKeys は、両方のリストにあるどのチェックボックスが現在選択されているかを示します。onSelectChange は左側と右側の配列を返すため、selectedKeys を制御するときは両方を結合します。onChange は、新しい所属状態、方向、移動したキーを返します。
- 表示ラベルが変わっても、すべてのソース項目のキーは安定した状態に保ちます。
- onSelectChange では、左側と右側の選択配列を結合します。
- onChange が返す新しい配列で targetKeys を置き換えます。
- 移動後に一時的な選択状態を解除し、その操作がこの画面内に限られることを伝えます。
関連する仕様を確認する
Arco Design デザインシステム：検索では所属関係を削除せず、表示範囲を絞り込む
一致条件を明示する
ソースのデフォルトフィルターは、大文字と小文字を区別する部分文字列判定で、クエリと項目の値を比較します。提示された例では、小文字に変換して比較する方式に置き換えています。非表示の選択済み行を検索しても、その行がレポートへの所属から外れたように見えてはいけません。
この小規模なリストでは、ページネーションや仮想化の効果はほとんどありません。Arco はデータ量が多い場合に備えてこれらのオプションを提供していますが、安定したキー、完全な移動先の集合、フィルター適用中に項目を選ぶルールは、引き続きアプリケーション側で管理する必要があります。
- 利用可能リストと追加済みリストには、それぞれ個別の検索フィールドがあります。
- 該当なしのメッセージは、データセットが空なのではなく、絞り込み後の表示に該当項目がないことを示します。
- アウトラインの準備には、現在表示されている行だけでなくtargetKeysを使用します。
関連する仕様を確認する
Arco Design デザインシステム ダークモードではテキストだけでなく、界面表面も変わります
公開済みのセレクターを設定する
Arcoは、arco-theme="dark"を持つthemeタグの下でダークモードの上書きスタイルを公開します。デフォルトのビルドでは、このタグはbodyです。この属性を削除すると通常のルールに戻ります。darkという無関係なクラスを追加しても同じではありません API。
ダークモードのプレビューを追加する場合は、コンテナとテキストのロールをまとめて解決してください。オフラインのサンプルは意図的にライト表示のままにし、ネイティブの例ではすでにインポートされているテーマ CSS を使用できます。レポートのサムネイルやイラストに一律のフィルターをかけて反転しないでください。
js
document.body.setAttribute('arco-theme', 'dark');
// Restore default:
document.body.removeAttribute('arco-theme');コードリファレンス
関連する仕様を確認する
Arco Design デザインシステム パッケージ、スタイルシート、実際の境界
レポートのアウトラインからレポートデータはエクスポートされません
React パッケージは@arco-design/web-reactで、完全なCSSエントリーはdist/css/arco.cssです。サンプルではパッケージのルートからTransferとButtonをインポートし、レポートビルダーAPIを独自に作るのではなく、制御された状態を使用しています。
単体プレビューでは、オフラインで動作するよう、ネイティブのチェックボックスとボタンで選択動作を再現しています。インタラクションのロジックとレスポンシブな構成を検証するものであり、利用側のプロジェクトでネイティブパッケージがコンパイルできることを保証するものではありません。本番用のエクスポーターには、無効化されたサンプル行だけでは補えないバックエンドと権限チェックが必要です。
関連する仕様を確認する
Arco Design デザインシステム コンポーネントの例
完全なスタンドアロンのインタラクティブ見本
ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。Arco Transferの動作と確認済みのテーマアンカーを独立してHTML解釈したものです。ネイティブのReactの例は別途提供されています。
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>
コードリファレンス
- 制限付きのレポートセクションは移動できません。選択された行と含まれるセクションは別々の状態で管理され、ネイティブのTransferで説明されている区別に対応しています。
レポートセクションの制御された移動
Transferは移動元と移動先の所属を管理し、アプリケーションの状態は別途準備したアウトラインを保持します。制限付きの行は無効な選択肢の例であり、サーバー側の認可を実施するかのように見せるものではありません。
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 />);コードリファレンス
- チェックボックスの選択状態と、レポートに含める項目の状態は別々の配列です。
- カスタムフィルターでは大文字と小文字を区別しません。
- サンプルデータはオリジナルで、分析データの読み込みやエクスポートは行いません。ネイティブ環境でのコンパイルは別途、統合チェックが必要です。
04Arco Design デザインシステム エージェントの設定
実装の出発点
arco.cssスタイルシート全体を一度だけインポートし、Reactの例をルート要素にマウントしてください。このReactパッケージにArco Vueのインポートを混在させないでください。
bash
npm install @arco-design/web-react react react-dom
あなたのプロジェクト向けプロンプト
AI エージェント用プロンプト
Arco React Transferを使用し、安定したdataSourceキーと、個別に制御するtargetKeysおよびselectedKeysを設定してください。大文字と小文字を区別しないフィルター、明示的な「含める／削除」操作、準備済みのアウトラインスナップショットを用意します。Arco CSSの変数構文を維持し、オフラインでの再現であることを明記してください。
05Arco Design デザインシステム 参照元と対象範囲
独立したOpenDesignリファレンスです。レポートデータはオリジナルで、プレビューはローカルのみで動作します。無効な行は認可の境界ではありません。
