# Element Plus デザインシステム

## Element Plus デザインシステムのインターフェースプレビュー

2つのネイティブTransferリスト間でモジュールを絞り込んで移動し、選択したキーを確認して、選択内容をローカルに適用します。

## Element Plus デザインシステムのデザインリファレンス

Element Plus 2.14.7のデフォルトをコンパイルしたCSS。変数はセマンティックエイリアスを含め、パッケージで確認した値です。Transferのレイアウトには、システムの基盤とは切り離した独自のレスポンシブ構成ルールを使用しています。

### プライマリーカラーとステータスカラー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --el-color-primary | #409eff | デフォルトのプライマリーアクセント。 |
| --el-color-primary-light-3 | #79bbff | 明るいインタラクションに使うプライマリーの淡色。 |
| --el-color-primary-light-5 | #a0cfff | 中間の色調。 |
| --el-color-primary-light-7 | #c6e2ff | 淡い色調。 |
| --el-color-primary-light-9 | #ecf5ff | 選択項目／キーパネルに使う控えめな背景。 |
| --el-color-primary-dark-2 | #337ecc | 暗いプライマリー状態。 |
| --el-color-success | #67c23a | 成功状態の役割。 |
| --el-color-warning | #e6a23c | 警告ロール。 |
| --el-color-danger | #f56c6c | エラー／危険を示す役割。 |
| --el-color-info | #909399 | 情報を伝えるニュートラルな役割。 |
### セマンティックカラーのテキストと背景

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --el-text-color-primary | #303133 | 本文の主要テキスト。 |
| --el-text-color-regular | #606266 | 通常のコンポーネントテキスト。 |
| --el-text-color-secondary | #909399 | ヘルプとメタデータ。 |
| --el-text-color-placeholder | #a8abb2 | プレースホルダーの役割。 |
| --el-bg-color | #fff | デフォルトの背景。 |
| --el-bg-color-page | #f2f3f5 | ページの背景。 |
| --el-bg-color-overlay | #fff | オーバーレイの背景。 |
| --el-border-color | #dcdfe6 | 標準の境界線。 |
| --el-border-color-light | #e4e7ed | カード／サマリーの控えめな境界線。 |
### タイポグラフィ、コントロール、形状

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --el-font-family | "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif | デフォルトのフォントファミリー設定。 |
| --el-font-size-extra-large | 20px | 20pxのタイトルサイズ。 |
| --el-font-size-large | 18px | 18pxのサイズ。 |
| --el-font-size-medium | 16px | 16pxのサイズ。 |
| --el-font-size-base | 14px | 14pxの基本サイズ。 |
| --el-font-size-small | 13px | 13pxのサイズ。 |
| --el-font-size-extra-small | 12px | 12pxのサイズ。 |
| --el-border-radius-base | 4px | 標準的なコンポーネントの角丸。 |
| --el-border-radius-small | 2px | 小さな角丸。 |
| --el-component-size-large | 40px | 大きなコントロールの高さ。 |
| --el-component-size | 32px | デフォルトのコントロールの高さ。 |
| --el-component-size-small | 24px | 小さなコントロールの高さ。 |
### 独自のモジュール作業画面レイアウト

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Desktop panel arrangement | two panels with 180px reserved between | ネイティブTransferを中心とした独自の構成。 |
| Narrow layout | ≤700px: stacked panels | 独自のブレークポイントであり、Element Plusのトークンではありません。 |
| Page spacing | 32px desktop; 20px 16px mobile | 独自の外側の余白。 |
| Summary spacing | 24px padding / 24px gap | 選択済みキーとモジュールサマリーの独自の構成。 |
## Element Plus デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Element Plus デザインシステム：Transfer Listには2種類の選択があります

### Transfer Listには2種類の選択があります

> Element PlusのTransferは、利用可能なリストと移動先のリストを表示し、チェックした項目を移動するためのコントロールを備えています。このモジュール作業画面では、実際の2.14.7 Vueコンポーネントを使用しています。v-modelには移動先のキーが含まれ、初期値はcatalogとtokensです。リスト内のチェックボックスは、次の移動操作の対象を指定するものであり、その項目がすでに移動先に含まれていることを示すものではありません。

この違いは、モデルのライブ表示で確認できます。ソース項目にチェックを付けると「追加」できる状態になります。「追加」を押すと対象のキー配列が変更され、選択中のモジュールの概要が更新され、以前に適用した結果がクリアされます。そのため、静的な2つのリストから推測するのではなく、ライブラリのモデル仕様を確認できます。

関連する仕様を確認する

## Element Plus デザインシステム：デフォルトの役割と具体的なコンポーネント寸法

### デフォルトの役割と具体的なコンポーネント寸法

Element Plusは、--el-color-primaryとその明暗の派生色、ステータスの役割、テキストカラー、背景変数を公開しています。表には、インストール済みパッケージから取得した実際のコンパイル値を掲載しています。周囲のキーパネルにはprimary-light-9と通常のテキストを使用し、アクションボタンにはネイティブのプライマリー処理を使用しています。

デフォルトのタイポグラフィには、基本サイズの14ピクセルに加え、12、13、16、18、20ピクセルのサイズが含まれます。コンポーネントサイズの変数は、小・デフォルト・大の各コントロール寸法を表します。これらをページレイアウト用のスペーシングスケールと混同しないでください。ワークベンチの24ピクセルの間隔と32ピクセルの外側余白は、この構成のために明示的に選んだ値です。

関連する仕様を確認する

## Element Plus デザインシステム：安定したキー、ラベル、無効化された選択肢

### 安定したキー、ラベル、無効化されたオプション

各選択肢には、キー、ラベル、無効化フラグがあります。選択値の配列にはこれらのキーを格納するため、ラベルを変更しても識別情報は変わりません。サンプルモジュールには、アセットカタログ、トークンインスペクター、レビューキュー、バージョン履歴、プロジェクト横断検索が含まれます。監査データのエクスポートは、選択可能に見えても利用できない項目の例として無効化されています。

この例の利用可否は、デモ用に固定されたデータです。利用権限の確認を行うものでも、これらのモジュールがインストール可能な製品として存在することを保証するものでもありません。実際のアプリケーションでは、選択肢のデータソースと権限ルールを製品のモデルから取得する必要があります。Transferのチェックボックスをクリックできるからといって、認可済みだと判断しないでください。

関連する仕様を確認する

## Element Plus デザインシステム：検索で変わるのは表示状態であり、選択内容ではない

### 検索で変わるのは表示状態であり、項目構成ではありません

filterableを指定すると、各パネルに独立した検索機能が追加されます。検索欄のプレースホルダーには「モジュールを検索」と表示し、具体的な操作を示します。デフォルトの検索では、選択肢のラベルが照合されます。検索中に選択済みの項目が移動先リストに表示されなくなっても、選択中のキーの配列からは削除されません。概要と読み取り表示には、移動先の全項目が引き続き表示されます。

カスタムの左側・右側の空状態スロットを使うことで、一致する選択肢がないパネルと、何も選択されていない状態とを区別できます。また、このページでは移動先配列が空の場合に限り、Applyボタンをローカルで無効化します。これらは別々の状態です。検索結果がないことは、選択済みのモジュールがないことを意味しません。

1. 利用可能なパネルで「レビューキュー」を検索します。

2. 一致した項目にチェックを入れ、「追加」を押します。

3. 検索をクリアし、モデルの読み取り表示と移動先リストに「レビューキュー」が表示されることを確認します。

関連する仕様を確認する

## Element Plus デザインシステム：モバイルでも2つのリストの関係を保つ

### モバイルでも2つのリストの関係を保つ

デスクトップでは、標準のTransferパネルを横に並べ、その間に「追加」と「削除」の専用領域を設けます。画面幅が700ピクセル以下の場合、パネルを縦に積み、操作ボタンをその間に横並びで配置します。「利用可能なモジュール」と「ワークスペースのモジュール」というタイトルはそのまま表示し、項目を移動する方向が分かるようにします。

スマートフォンに収まるよう、コントロール全体を縮小することはしません。ラベル、チェックボックス、検索欄、リストの内容を読みやすい標準サイズに保ったまま、レイアウトを調整します。選択中のキーの読み取り表示とテキスト概要は、その下に1列で配置します。小さいブレークポイントで情報を隠すのではなく、同じ情報を引き続き表示します。

関連する仕様を確認する

## Element Plus デザインシステム：選択中の項目と適用済みのスナップショット

### 編集中の項目構成と適用済みスナップショット

「適用」をローカルで実行すると、選択中のキーの配列がコピーされます。その後、項目の移動で選択内容が変わると、適用済みの状態はクリアされます。そのため、下書きの選択内容を変更した後も成功アラートが残ることはありません。「開始時のセットに戻す」を実行すると、新しいcatalog/tokens配列が割り当てられ、適用結果もクリアされます。状態遷移はVueのソース内に数行で明示されています。

アラートが示すのは、ローカルプレビューで選択内容を適用したことだけです。インストール、利用権限の変更、外部への更新を意味するものではありません。実際の設定画面では、適用済みのスナップショットを、永続化が確認された結果に対応させる必要があります。コンポーネントのイベントだけでは、サーバーからの確認応答にはなりません。

関連する仕様を確認する

## Element Plus デザインシステム：ネイティブコントロールと分かりやすい手順

### ネイティブコントロールと分かりやすい手順

この例では、ネイティブのTransferチェックボックスと移動ボタンをそのまま使用します。方向を示すアイコンだけに頼らず、ボタンに「削除」「追加」と表示します。特にリストが縦に並ぶ場合に効果的です。パネルのタイトルで移動元と移動先の役割を示し、ヘルプ文でチェックしてから移動する手順を説明します。

無効化された選択肢も一覧に残り、パネル内の空きスロットによって一致する選択肢がないことが伝わります。キーボードを使うユーザーが、ポインター操作専用のカスタムハンドラーなしで検索フィールド、チェックボックス、ボタンにアクセスできるようにします。このコンポーネントは内部の動作を自ら管理するため、アプリケーション側で選択コントロールに見せかけた行に置き換えることは避けます。

- パネルのタイトルで、どちらのリストが移動先かを示します。

- テキストラベルにより、リストが縦に並ぶレイアウトでも移動方向が分かります。

- モデルのライブ読み取り表示により、現在は表示されていない選択項目も確認できます。

関連する仕様を確認する

## Element Plus デザインシステム：Vueコンポーネントをコンパイルし、CSSを読み込む

### VueコンポーネントをビルドしてCSSを読み込む

Vue 3のViteプロジェクトにelement-plus@2.14.7をインストールし、元のレイアウトCSSより前にelement-plus/dist/index.cssをインポートします。App.vue全体ではscript setupを使用し、コンポーネントを直接インポートします。ElConfigProviderに英語ロケールを設定して、組み込みのパネルや空状態のテキストを英語の参照ページと統一します。

本番環境を想定したセットアップでは、Vue Viteプラグインを通じてApp.vueをインポートします。オフラインの実例は、同じ単一ファイルコンポーネントをコンパイルし、ローカルでバンドルして作成しました。外部CDN、自動インポートサービス、ランタイムテンプレートコンパイラーは不要です。既存のプロジェクトで自動インポートプラグインを使用している場合は、選択した全体インポートまたはコンポーネント単位のインポート方式に合わせて、生成されるスタイルを統一してください。

関連する仕様を確認する

## Element Plus デザインシステム：テーマのオーバーライドでもコンポーネント間の関係を保つ

### テーマの上書きではコンポーネント間の関係を維持する

CSSカスタムプロパティを使うと、すべてのコンポーネントセレクターを書き換えずに、共通の役割に対する値を変更できます。ワークベンチでは、背景、テキスト、境界線、角丸に対応する実際の--el変数を使用します。この構成でネイティブのTransferを収めるために必要なレイアウトセレクターだけを変更します。

ブランドテーマ全体を調整する場合は、ドキュメントに記載された Sass または CSS 変数を使う方法を利用し、ホバー、無効、フォーカスの各状態をまとめて確認してください。スクリーンショットの主要な16進カラー値だけを置き換えても、薄い色の背景や、より暗いインタラクション状態は反映されません。出典に基づく表の値を出発点として、ネイティブプレビューで実際のコンポーネントに反映した結果を確認できます。

関連する仕様を確認する

## Element Plus デザインシステムのコンポーネント例

### Vueによる完全なモジュール選択コンポーネント

ネイティブの Transfer、Card、Alert、Button、Tag を使った単一ファイルコンポーネント。

```
<script setup>
import {ref,computed} from 'vue';
import {ElConfigProvider,ElTransfer,ElCard,ElButton,ElTag,ElAlert} from 'element-plus';
import en from 'element-plus/es/locale/lang/en';
const modules=[{key:'catalog',label:'Asset catalog',disabled:false},{key:'tokens',label:'Token inspector',disabled:false},{key:'review',label:'Review queue',disabled:false},{key:'history',label:'Version history',disabled:false},{key:'audit',label:'Audit export · unavailable',disabled:true},{key:'search',label:'Cross-project search',disabled:false}];
const selected=ref(['catalog','tokens']),applied=ref(null);const names=computed(()=>modules.filter(x=>selected.value.includes(x.key)).map(x=>x.label));
const changed=()=>{applied.value=null};
</script>
<template><ElConfigProvider :locale="en"><main class="module-desk"><header><p class="eyebrow">ELEMENT PLUS / WORKSPACE COMPOSITION</p><h1>Choose the tools this team needs.</h1><p>Move modules between lists, then inspect the exact selected keys.</p></header><ElCard shadow="never"><template #header><div class="card-heading"><h2>Module selection</h2><ElTag type="info">{{selected.length}} selected</ElTag></div></template><ElTransfer v-model="selected" :data="modules" filterable filter-placeholder="Find a module" :titles="['Available modules','Workspace modules']" :button-texts="['Remove','Add']" @change="changed"><template #left-empty><p class="empty">No available module matches.</p></template><template #right-empty><p class="empty">No selected module matches.</p></template></ElTransfer><p class="help">Check a module before using Add or Remove. Audit export stays disabled in this sample.</p></ElCard><div class="summary-grid"><section class="summary"><h2>Workspace modules</h2><ul v-if="names.length"><li v-for="name in names" :key="name">{{name}}</li></ul><p v-else>No modules selected. Add at least one before applying.</p><div class="actions"><ElButton type="primary" :disabled="!selected.length" @click="applied=[...selected]">Apply locally</ElButton><ElButton @click="selected=['catalog','tokens'];changed()">Restore starting set</ElButton></div><ElAlert v-if="applied" title="Selection applied to the local preview" type="success" :closable="false" show-icon description="No installation, entitlement change or external update was performed." /></section><section class="key-panel"><p class="eyebrow">V-MODEL VALUE</p><pre>{{JSON.stringify(selected,null,2)}}</pre><p>The model contains keys, not option objects. Search filters visibility without changing this array.</p></section></div><footer>Native Element Plus Transfer, Card, Tag, Button and Alert. Local module names and availability are original examples.</footer></main></ElConfigProvider></template>
```

コードリファレンス

- v-model に保存されるのは、オプションオブジェクト全体ではなく選択されたキーです。

- 無効なオプションは表示されますが、移動できません。

- Transfer の選択を変更すると、適用済みの古い状態がクリアされます。

### レスポンシブな Transfer の構成

狭い画面では、ネイティブのパネルとコントロールを保ったまま縦に並べます。

```
body{margin:0;background:var(--el-bg-color-page);font-family:var(--el-font-family);color:var(--el-text-color-primary);font-size:var(--el-font-size-base);line-height:1.6}.module-desk{max-width:1080px;margin:auto;padding:32px}header{max-width:700px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}h2{font-size:20px;line-height:1.3;margin:0}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--el-text-color-secondary)}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.el-transfer{--el-transfer-panel-body-height:210px;display:flex;align-items:center;justify-content:center}.el-transfer-panel{width:calc((100% - 180px)/2)}.el-transfer__buttons{padding:0 20px;display:flex;flex-direction:column;gap:10px}.el-transfer__buttons .el-button{margin:0}.help,.empty{font-size:13px;color:var(--el-text-color-secondary)}.empty{padding:16px}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.summary,.key-panel{background:var(--el-bg-color);border:1px solid var(--el-border-color-light);border-radius:var(--el-border-radius-base);padding:24px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.actions .el-button{margin:0}.key-panel{background:var(--el-color-primary-light-9)}pre{font:14px/1.7 monospace;white-space:pre-wrap}.key-panel p{font-size:13px}.summary li{margin:6px 0}footer{font-size:12px;color:var(--el-text-color-secondary);margin-top:20px}@media(max-width:700px){.module-desk{padding:20px 16px}h1{font-size:28px}.el-transfer{flex-direction:column;gap:16px}.el-transfer-panel{width:100%}.el-transfer__buttons{flex-direction:row;padding:0}.summary-grid{grid-template-columns:1fr}.el-card__body{padding:16px}}
```

コードリファレンス

- ブレークポイントと周囲のレイアウトは独自に設定しています。

## Element Plus デザインシステムのエージェント設定

### 実装の出発点

Vue 3 と Element Plus 2.14.7 で動作を確認済みです。App.vue では英語の ConfigProvider とコンポーネントを明示的にインポートします。状態はすべてローカルです。

```
// Create the project first:
// npm create vite@latest element-plus-specimen -- --template vue
// cd element-plus-specimen && npm install
// In a Vite Vue 3 project:
// npm install element-plus@2.14.7
// Save the complete single-file component above as App.vue.
// main.js
import {createApp} from 'vue';
import 'element-plus/dist/index.css';
import './style.css';
import App from './App.vue';
createApp(App).mount('#app');
// index.html: <div id="app"></div>
// style.css: use the complete responsive composition above.
// Vite's standard Vue template includes @vitejs/plugin-vue for .vue files.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### あなたのプロジェクト向けプロンプト

```
提供された Element Plus 2.14.7 のワークスペースモジュール選択画面を、ネイティブの ElTransfer を使って拡張してください。キー付きの6つのモジュール、無効な Audit 項目、フィルター動作、選択キーを管理する配列を維持します。適用時には現在のモジュール選択を保存します。その後に編集すると、保存内容が古くなったことが画面上で明確にわかるようにし、復元すると初期の選択状態に戻るようにしてください。Transfer を無関係なリストで作り直すのではなく、2パネルのレスポンシブレイアウトと無効項目の動作を維持します。独自の構成 CSS より前に、ネイティブのスタイルシートを読み込んでください。
```

## Element Plus デザインシステムの出典と対象範囲

Element Plus 2.14.7 のネイティブリファレンスを参照しています。モジュール名と権限は独自の例であり、ローカルで選択してもインストールや権限は変更されません。

- Transfer モデルキー、フィルタリング、無効なデータ、空のスロット。

- テーマ設定 CSS の変数と Sass によるカスタマイズ。

- クイックスタート Vue コンポーネントとスタイルシートの設定。

- Config Provider ロケールの設定。

- カラー デフォルトの色の役割。

- ボーダー 境界線と形状の基礎。

## Element Plus デザインシステムの関連リソース

### Flowbite

ネイティブなFlowbite 4のアコーディオンとドロワーを組み合わせ、セマンティックなテーマエイリアスを検証済みです。固定表示の持ち物チェックリストと、アクセシブルなローカル素材メモのワークフローを備えています。

### Fomantic UI

コンパイル済みテーマの値を検証済みのネイティブな Fomantic UI 読書棚。jQuery のドロップダウンと評価モジュール、明示的なキーボード操作への対応、ローカルに保持されるショートリストを備えています。

### Foundation

XY Grid、Abide のカスタムバリデーター、Reveal による確認、実際の Sass 設定、統合に必要なコード一式を備えた、動作する Foundation の検証用デスクです。


- [実装リファレンス](https://element-plus.org/en-US/component/transfer.html)
- [ソース](https://element-plus.org/en-US/guide/theming.html)
- [ソース](https://element-plus.org/en-US/component/transfer.html)
- [関連する仕様を確認する](https://element-plus.org/en-US/component/transfer.html)
- [関連する仕様を確認する](https://element-plus.org/en-US/guide/theming.html)
- [関連する仕様を確認する](https://element-plus.org/en-US/guide/quickstart.html)
- [コードリファレンス](https://element-plus.org/en-US/component/transfer.html)
- [コードリファレンス](https://element-plus.org/en-US/guide/theming.html)
- [Transfer モデルキー、フィルタリング、無効なデータ、空のスロット。](https://element-plus.org/en-US/component/transfer.html)
- [テーマ設定 CSS の変数と Sass によるカスタマイズ。](https://element-plus.org/en-US/guide/theming.html)
- [クイックスタート Vue コンポーネントとスタイルシートの設定。](https://element-plus.org/en-US/guide/quickstart.html)
- [Config Provider ロケールの設定。](https://element-plus.org/en-US/component/config-provider.html)
- [カラー デフォルトの色の役割。](https://element-plus.org/en-US/component/color.html)
- [ボーダー 境界線と形状の基礎。](https://element-plus.org/en-US/component/border.html)