{
 "slug": "transfer",
 "curated": true,
 "mode": "single",
 "examples": [
  {
   "id": "transfer-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"demo\">\n  <h1>Kole UI · Transfer 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 Transfer 规范：左右两栏、搜索、复选框、已选数量</p>\n  <div class=\"demo-block\">\n    <div class=\"kole-transfer\" data-transfer></div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h1>Kole UI · Transfer 组件（纯 H5）</h1>\n<p>对齐 Transfer 规范：左右两栏、搜索、复选框、已选数量</p>\n<div class=\"kole-transfer\"></div>",
    "jsx": "import { useState } from 'react';\nimport { KoleTransfer } from 'kole-ui/react';\n\nconst DATA = [\n  { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n  { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n  { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n];\n\nfunction DeptTransfer() {\n  const [keys, setKeys] = useState(['1', '2']);\n  return (\n    <KoleTransfer\n      data={DATA}\n      value={keys}\n      titles={['候选部门', '已选部门']}\n      filterable\n      onChange={setKeys}\n    />\n  );\n}",
    "vue3": "<template>\n  <KoleTransfer\n    v-model=\"keys\"\n    :data=\"DATA\"\n    :titles=\"['候选部门', '已选部门']\"\n    filterable\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTransfer } from 'kole-ui/vue3';\n\nconst keys = ref(['1', '2']);\nconst DATA = [\n  { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n  { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n  { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n];\n</script>",
    "vue2": "<template>\n  <KoleTransfer\n    v-model=\"keys\"\n    :data=\"DATA\"\n    :titles=\"['候选部门', '已选部门']\"\n    filterable\n  />\n</template>\n\n<script>\nimport { KoleTransfer } from 'kole-ui/vue2';\nexport default {\n  components: { KoleTransfer },\n  data() {\n    return {\n      keys: ['1', '2'],\n      DATA: [\n        { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n        { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n        { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleTransfer } from 'kole-ui/react';\n\nconst DATA = [\n  { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n  { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n  { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n];\n\nfunction DeptTransfer(): JSX.Element {\n  const [keys, setKeys] = useState(['1', '2']);\n  return (\n    <KoleTransfer\n      data={DATA}\n      value={keys}\n      titles={['候选部门', '已选部门']}\n      filterable\n      onChange={setKeys}\n    />\n  );\n}\n\nexport default DeptTransfer;",
    "vue3ts": "<template>\n\n  <KoleTransfer\n    v-model=\"keys\"\n    :data=\"DATA\"\n    :titles=\"['候选部门', '已选部门']\"\n    filterable\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTransfer } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\nconst keys = ref(['1', '2']);\nconst DATA = [\n  { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n  { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n  { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n];\n</script>",
    "vue2ts": "<template>\n\n  <KoleTransfer\n    v-model=\"keys\"\n    :data=\"DATA\"\n    :titles=\"['候选部门', '已选部门']\"\n    filterable\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTransfer } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleTransfer },\n  data(): Record<string, unknown> {\n    return {\n      keys: ['1', '2'],\n      DATA: [\n        { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n        { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n        { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n      ]\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Transfer.html 第 29-33 行的 DATA（8 个部门，人事部 disabled）与第 35 行 let selected = [\"1\",\"2\"]：已选初值为研发部/产品部，两侧面板标题取自第 46 / 60 行的「候选部门」「已选部门」。",
    "搜索框由第 47 / 61 行的 input[placeholder=搜索] 提供，对应 filterable（frameworks/Transfer.jsx 第 15 行参数表、frameworks/Transfer.vue3.vue 第 56 行 defineProps）。"
   ]
  }
 ]
}