Element Plus Transfer는 체크한 항목을 이동하는 컨트롤과 함께 사용 가능한 목록과 대상 목록을 표시합니다. 모듈 작업 공간은 실제 2.14.7 Vue 컴포넌트를 사용합니다. v-model에는 대상 키가 저장되며, 처음에는 catalog와 tokens가 들어 있습니다. 목록 안의 체크박스는 다음 전송 작업을 위해 항목을 표시합니다. 체크했다고 해서 해당 항목이 이미 대상에 포함된 것은 아닙니다.
실시간 모델 표시 영역에서 이 차이를 확인할 수 있습니다. 원본 목록의 항목을 체크하면 추가할 준비가 됩니다. 추가를 누르면 대상 키 배열이 변경되고, 선택한 모듈 요약이 업데이트되며, 이전에 적용한 결과가 초기화됩니다. 따라서 두 개의 정적인 목록만 보고 추측하는 대신 라이브러리의 모델 계약을 확인할 수 있습니다.
Element Plus는 --el-color-primary와 그 밝고 어두운 파생 색상, 상태 역할, 텍스트 색상 및 배경 변수를 제공합니다. 표에는 설치된 패키지에서 컴파일된 실제 값이 표시됩니다. 주변의 키 패널은 primary-light-9와 일반 텍스트를 사용하고, 작업 버튼은 기본 스타일을 사용합니다.
기본 타이포그래피에는 14px 기본 크기와 함께 12, 13, 16, 18, 20px 크기가 포함됩니다. 컴포넌트 크기 변수는 소형/기본/대형 컨트롤의 크기를 나타냅니다. 이를 페이지 레이아웃의 간격 체계와 혼동하지 마세요. 작업 공간의 24px 간격과 32px 바깥 여백은 별도로 지정한 기존 구성 방식입니다.
각 옵션에는 키, 레이블, 비활성화 여부가 있습니다. 선택 배열에는 키가 저장되므로 레이블을 변경해도 항목의 정체성은 유지됩니다. 샘플 모듈로는 자산 카탈로그, 토큰 검사기, 검토 대기열, 버전 기록, 프로젝트 간 검색이 있습니다. 감사 로그 내보내기는 표시되지만 선택할 수 없는 옵션을 보여주기 위해 비활성화되어 있습니다.
이 예시의 사용 가능 여부는 정적인 데모 데이터입니다. 권한 확인이나 이러한 모듈이 설치 가능한 제품으로 존재한다는 보장이 아닙니다. 실제 애플리케이션에서는 제품 모델에 따라 옵션의 데이터 원본과 권한 규칙을 정해야 합니다. Transfer 체크박스를 클릭할 수 있다는 사실만으로 권한이 있다고 판단하지 마세요.
Element Plus 디자인 시스템에서 검색은 표시 여부만 바꾸며 구성 항목은 바꾸지 않습니다
검색은 표시 여부만 바꾸며 구성원은 바꾸지 않습니다
filterable은 각 패널에 독립적인 검색 기능을 추가합니다. 검색 안내 문구는 ‘모듈 찾기’라는 구체적인 동작을 제시합니다. 기본 필터링은 옵션 레이블을 기준으로 검색합니다. 검색 중 선택한 항목이 대상 목록에 표시되지 않더라도 선택 키 배열에서는 제거되지 않습니다. 요약과 표시 영역에서 전체 대상 목록을 계속 확인할 수 있습니다.
사용자 지정 왼쪽 빈 상태 슬롯과 오른쪽 빈 상태 슬롯은 검색 결과가 없는 패널과 아무 항목도 선택되지 않은 전체 상태를 구분합니다. 또한 대상 배열이 비어 있으면 페이지 수준에서 적용 버튼을 비활성화합니다. 검색 결과 없음과 선택된 모듈 없음은 서로 다른 상태입니다.
데스크톱에서는 기본 Transfer 패널을 나란히 배치하고, 추가 및 제거 버튼을 위한 전용 영역을 둡니다. 화면 너비가 700px 이하인 경우 패널을 세로로 쌓고 작업 버튼은 그 사이에 가로로 배치합니다. 제목은 각각 ‘사용 가능한 모듈’과 ‘작업 공간 모듈’로 유지해 이동 방향을 명확히 합니다.
전체 컨트롤을 축소해 휴대폰 화면에 억지로 맞추지 않습니다. 레이블, 체크박스, 검색창, 목록 내용을 읽기 좋은 기본 크기로 유지하면서 구성을 조정합니다. 선택 키 표시 영역과 텍스트 요약은 아래에서 한 열로 배치해, 작은 화면에서도 정보를 숨기지 않고 그대로 제공합니다.
‘적용’을 누르면 선택 키 배열을 로컬에서 복사합니다. 이후 전송 항목이 변경되면 적용 상태가 초기화되므로, 사용자가 초안 구성을 바꾼 뒤에도 성공 알림이 계속 표시되지 않습니다. ‘초기 구성 복원’을 누르면 catalog/tokens 배열을 새로 할당하고 적용 결과도 초기화합니다. 이러한 상태 전환은 Vue 소스의 몇 줄로 명확하게 구현되어 있습니다.
알림은 로컬 미리보기 선택 항목이 적용되었다는 사실만 알립니다. 설치 완료, 권한 변경 또는 외부 업데이트를 의미하지 않습니다. 실제 설정 화면에서는 적용된 스냅샷이 저장 결과 확인을 반영해야 합니다. 컴포넌트 이벤트만으로 서버의 확인 응답을 대신할 수는 없습니다.
이 예제는 네이티브 Transfer 체크박스와 이동 버튼을 그대로 사용합니다. 방향 아이콘만 표시하는 대신 버튼에 제거 및 추가라는 텍스트를 넣었습니다. 목록이 세로로 쌓일 때 특히 유용합니다. 패널 제목은 원본과 대상의 역할을 설명하고, 안내 문구는 선택한 다음 이동하는 순서를 설명합니다.
비활성화된 옵션도 목록에 표시되며, 옵션이 일치하지 않을 때는 빈 패널 슬롯으로 결과가 없음을 알립니다. 키보드 사용자는 별도의 포인터 전용 핸들러 없이 검색 필드, 체크박스, 버튼에 접근할 수 있어야 합니다. 컴포넌트가 자체 동작을 관리하므로, 애플리케이션에서 선택 컨트롤처럼 보이기만 하는 행을 그려 기존 구조를 대체하지 않습니다.
Vue 3 Vite 프로젝트에서 [email protected]을 설치하고, 기존 레이아웃 CSS보다 먼저 element-plus/dist/index.css를 가져옵니다. 전체 App.vue는 script setup을 사용하고 컴포넌트를 직접 가져옵니다. ElConfigProvider에 영어 로캘을 전달해 기본 패널 및 빈 상태 문구가 영어 참조 페이지와 일관되게 표시되도록 합니다.
제공된 프로덕션 스타일 설정에서는 Vue Vite 플러그인을 통해 App.vue를 가져옵니다. 오프라인 예제는 동일한 단일 파일 컴포넌트를 컴파일한 뒤 로컬에서 번들링해 만들었습니다. 외부 CDN, 자동 가져오기 서비스 또는 런타임 템플릿 컴파일러가 필요하지 않습니다. 기존 프로젝트에서 자동 가져오기 플러그인을 사용하는 경우, 선택한 전체 또는 컴포넌트별 가져오기 방식에 맞춰 생성된 스타일을 일관되게 유지하세요.
CSS 사용자 지정 속성을 사용하면 모든 컴포넌트 선택자를 다시 작성하지 않고도 공통 역할을 변경할 수 있습니다. 작업 화면은 배경, 텍스트, 테두리, 모서리에 실제 --el 변수를 사용합니다. 이 구성에 맞게 네이티브 Transfer를 배치하는 데 필요한 레이아웃 선택자만 변경합니다.
더 폭넓은 브랜드 테마를 적용하려면 문서화된 Sass 또는 CSS 변수 방식을 사용하고, 호버·비활성화·포커스 상태를 함께 살펴보세요. 한 스크린샷에서 기본 색상 헥스 값만 바꾸면 더 밝은 표면과 더 어두운 상호작용 상태를 놓치게 됩니다. 소스에 근거한 표에서 시작 값을 확인하고, 완전히 작동하는 네이티브 미리 보기에서 실제 컴포넌트에 적용했을 때의 결과를 살펴볼 수 있습니다.
네이티브 Transfer, Card, Alert, Button, Tag를 사용하는 단일 파일 컴포넌트입니다.
vue
<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>
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 [email protected]
// 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를 사용해 확장하세요. 키가 지정된 모듈 여섯 개, 비활성화된 Audit 항목, 필터 동작, 제어되는 선택 키 배열을 유지합니다. 적용 시 현재 모듈 선택을 저장하고, 이후 편집하면 저장된 상태가 오래된 값임을 눈에 띄게 표시해야 합니다. 복원하면 초기 선택으로 돌아갑니다. Transfer를 관련 없는 목록으로 다시 만들지 말고, 반응형 2패널 레이아웃과 비활성화된 항목의 동작을 유지하세요. 원래 구성 CSS보다 먼저 네이티브 스타일시트를 불러오세요.
05
Element Plus 디자인 시스템의 출처와 범위
Element Plus 2.14.7 네이티브 참조입니다. 모듈 이름과 권한은 독자적인 예시이며, 로컬 선택은 설치나 권한을 변경하지 않습니다.
