UI设计规范及说明

Appearance

Transfer 穿梭框 ​

*UI备注

此模块为须严格遵守设计规范的模块

CSS样式 ​

全部transfer样式代码：

查看代码
css
/* HnuiIcon */
@import url('./icon.css');

/* 全局css变量 */

:root {
  /* #region vars-BrandColor */

  /* 品牌色 */
  --hnui-brand-color: #1f78ff;
  --hnui-brand-color1: #005ce5;
  --hnui-brand-color2: #4b83f7;
  --hnui-brand-color3: #3384ff;
  --hnui-brand-color4: #599bff;
  --hnui-brand-color5: #80b2ff;
  --hnui-brand-color6: #b2d1ff;
  --hnui-brand-color7: #cce0ff;
  --hnui-brand-color8: #d9e8ff;
  --hnui-brand-color9: #ebf3ff;
  --hnui-brand-color10: #f2f7ff;

  /* 状态颜色 */
  --hnui-brand-color-normal: var(--hnui-brand-color);
  --hnui-brand-color-hover: var(--hnui-brand-color3);
  --hnui-brand-color-active: var(--hnui-brand-color1);
  --hnui-brand-color-elected: var(--hnui-brand-color9);
  --hnui-brand-color-disabled: var(--hnui-brand-color7);

  --hnui-brand-color-disabled-border: var(--hnui-brand-color6);
  --hnui-brand-color-disabled-bg: var(--hnui-brand-color10);

  /* #endregion vars-BrandColor */

  /* #region vars-DomainColor */

  /* 功能色 */
  --hnui-success-color: #2ba471;
  --hnui-success-hover-color: #51bd90;
  --hnui-success-active-color: #2ba471;

  --hnui-warning-color: #faad14;
  --hnui-warning-hover-color: #ffc146;
  --hnui-warning-active-color: #db960b;

  --hnui-danger-color: #ff4d4d;
  --hnui-danger-hover-color: #ff7676;
  --hnui-danger-active-color: #d82a2a;

  --hnui-info-color: #8d97a6;
  --hnui-info-hover-color: #b2b7c0;
  --hnui-info-active-color: #707a89;

  /* #endregion vars-DomainColor */

  /* #region vars-NeutralColor */
  /* 中性色 */

  /* 标题文字 */
  --hnui-neutral-color-1: #2d2e33;

  /* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
  --hnui-neutral-color-2: #43454d;

  /* 内容文字、说明叙述文字 */
  --hnui-neutral-color-3: #5d606a;

  /* 提示性文字、辅助文本 */
  --hnui-neutral-color-4: #9298a0;

  /* 禁用文本 */
  --hnui-neutral-color-5: #b7bdc7;

  /* 描边格描边、输入文本描边、下拉选择描边等 */
  --hnui-neutral-color-6: #dfe2e7;

  /* 全局背景、禁用状态、分割线等 */
  --hnui-neutral-color-7: #f0f2f5;

  /* 最低颜色等 */
  --hnui-neutral-color-8: #fafbfc;

  /* #endregion vars-NeutralColor */

  /* 默认文字颜色 */
  --hnui-text-color: var(--hnui-neutral-color-2);

  --hnui-info-bg: #eceff4;
  --hnui-info-bg2: #e7e7e7;

  --hnui-color-white: #fff;
  --hnui-color-black: #000;

  --hnui-border-width: 1px;
  --hnui-border-dashed-width: 2px;
  --hnui-border-color: var(--hnui-neutral-color-6);

  --hnui-disabled-bg-color: var(--hnui-neutral-color-7);
  --hnui-disabled-color: var(--hnui-neutral-color-5);

  --hnui-control-height: 32px;
  --hnui-control-height-sm: 24px;
  --hnui-control-height-lg: 40px;

  --hnui-control-transparent: transparent;
}

.dark {
  --hnui-brand-color6: rgb(50, 59, 74);
  --hnui-brand-color7: #30353d;
  --hnui-brand-color8: #42484f;
  --hnui-brand-color9: #4c4f54;
  --hnui-brand-color10: #29292c;

  /* 中性色 */

  /* 标题文字 */
  --hnui-neutral-color-1: #c4c8dc;

  /* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
  --hnui-neutral-color-2: #b9bed3;

  /* 内容文字、说明叙述文字 */
  --hnui-neutral-color-3: #afb5c7;

  /* 提示性文字、辅助文本 */
  --hnui-neutral-color-4: #6a6f75;

  /* 禁用文本 */
  --hnui-neutral-color-5: #53565b;

  /* 描边格描边、输入文本描边、下拉选择描边等 */
  --hnui-neutral-color-6: #59595a;

  /* 全局背景、禁用状态、分割线等 */
  --hnui-neutral-color-7: #343535;

  /* 最低颜色等 */
  --hnui-neutral-color-8: #151516;

  --hnui-info-bg: #393b3d;

  --hnui-color-white: #000;
  --hnui-color-black: #fff;

  --hnui-control-transparent: transparent;
}

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  color: var(--hnui-neutral-color-2);
}

/* #region vars-FontFamily */
@font-face {
  font-family: 'DIN';
  src: url('/fonts/D-DIN-PRO/D-DIN-PRO.woff2') format('woff2'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.woff') format('woff'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.ttf') format('truetype'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.eot') format('embedded-opentype'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* 使用数字字体 */
.use-font {
  font-family: DIN;
}
/* #endregion vars-FontFamily */

/* #region vars-BoxShadow */
/* 一级投影（默认向下） */
.hnui-box-shadow {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.18);
}
.hnui-box-shadow.hover,
.hnui-box-shadow:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.18);
}

/* 二级投影（默认向下） */
.hnui-box-shadow_l2 {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.12);
}
.hnui-box-shadow_l2.hover,
.hnui-box-shadow_l2:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.12);
}

/* 三级投影（默认向下） */
.hnui-box-shadow_l3 {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.06);
}
.hnui-box-shadow_l3.hover,
.hnui-box-shadow_l3:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.06);
}
/* #endregion vars-BoxShadow */
css
@import url("../checkbox/checkbox.css");

/* === 穿梭框容器 === */
.hnui-transfer {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--hnui-text-color);
}

/* === 穿梭框面板 === */
.hnui-transfer-panel {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 400px;
  border: 1px solid var(--hnui-border-color);
  border-radius: 6px;
  background-color: transparent;
  overflow: hidden;
}

/* 小尺寸面板 */
.hnui-transfer-panel-sm {
  width: 280px;
  height: 300px;
}

/* 大尺寸面板 */
.hnui-transfer-panel-lg {
  width: 520px;
  height: 500px;
}

/* === 面板头部 === */
.hnui-transfer-panel-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hnui-border-color);
  background-color: transparent;
}

.hnui-transfer-panel-header-checkbox {
  margin-right: 8px;
}

.hnui-transfer-panel-header-title {
  font-size: 14px;
  color: var(--hnui-text-color);
}

/* === 搜索框 === */
.hnui-transfer-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hnui-border-color);
}

.hnui-transfer-search-input {
  width: 100%;
  height: 32px;
  padding: 5px 32px 5px 12px;
  border: 1px solid var(--hnui-border-color);
  border-radius: 3px;
  font-size: 14px;
  color: var(--hnui-text-color);
  background-color: transparent;
  outline: none;
  transition: all 0.3s;
}

.hnui-transfer-search-input::placeholder {
  color: var(--hnui-neutral-color-4);
}

.hnui-transfer-search-input:hover {
  border-color: var(--hnui-brand-color-hover);
}

.hnui-transfer-search-input:focus {
  border-color: var(--hnui-brand-color-normal);
}

.hnui-transfer-search-wrapper {
  position: relative;
}

.hnui-transfer-search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hnui-neutral-color-4);
  font-size: 16px;
  pointer-events: none;
}

/* === 列表内容 === */
.hnui-transfer-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.hnui-transfer-panel-body::-webkit-scrollbar {
  width: 6px;
}

.hnui-transfer-panel-body::-webkit-scrollbar-thumb {
  background-color: var(--hnui-neutral-color-6);
  border-radius: 3px;
}

.hnui-transfer-panel-body::-webkit-scrollbar-track {
  background-color: transparent;
}

/* === 列表项 === */
.hnui-transfer-item {
  display: flex;
  align-items: center;
  padding: 8px 8px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin: 4px 8px;
}

.hnui-transfer-item:hover {
  background-color: var(--hnui-neutral-color-7);
}

.hnui-transfer-item-checkbox {
  margin-right: 8px;
}

.hnui-transfer-item-label {
  font-size: 14px;
  color: var(--hnui-text-color);
}

/* 选中状态 */
.hnui-transfer-item-checked {
  background-color: var(--hnui-brand-color9);
}

.hnui-transfer-item-checked:hover {
  background-color: var(--hnui-brand-color8);
}

/* === 树形结构 === */
.hnui-transfer-tree-item {
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin: 0 8px;
}

.hnui-transfer-tree-item:hover {
  background-color: var(--hnui-neutral-color-7);
}
.hnui-transfer .hnui-transfer-tree-item .hnui-icon{
  margin-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--hnui-neutral-color-4);
  font-size: 16px;
}
.hnui-transfer-tree-item-expand {
  transform: rotateZ(90deg);
}

.hnui-transfer-tree-item-expand:hover {
  color: var(--hnui-text-color);
}

.hnui-transfer-tree-item-checkbox {
  margin-right: 8px;
}

.hnui-transfer-tree-item-label {
  font-size: 14px;
  color: var(--hnui-text-color);
}

/* 树形子节点缩进 */
.hnui-transfer-tree-item-level-1 {
  padding-left: 36px;
}

.hnui-transfer-tree-item-level-2 {
  padding-left: 56px;
}

/* === 空状态 === */
.hnui-transfer-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--hnui-neutral-color-4);
  font-size: 14px;
}

/* === 面板底部（分页） === */
.hnui-transfer-panel-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-top: 1px solid var(--hnui-border-color);
  gap: 16px;
}

.hnui-transfer-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hnui-transfer-pagination-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hnui-border-color);
  border-radius: 3px;
  background-color: transparent;
  color: var(--hnui-text-color);
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
}

.hnui-transfer-pagination-btn:hover {
  border-color: var(--hnui-brand-color-hover);
  color: var(--hnui-brand-color-hover);
}

.hnui-transfer-pagination-btn:active {
  border-color: var(--hnui-brand-color-active);
  color: var(--hnui-brand-color-active);
}

.hnui-transfer-pagination-btn-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  border-color: var(--hnui-border-color);
  color: var(--hnui-disabled-color);
}

.hnui-transfer-pagination-btn-disabled:hover {
  border-color: var(--hnui-border-color);
  color: var(--hnui-disabled-color);
}

.hnui-transfer-pagination-info {
  font-size: 14px;
  color: var(--hnui-text-color);
}

.hnui-transfer-pagination-select {
  min-width: 60px;
  height: 24px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--hnui-border-color);
  border-radius: 3px;
  background-color: transparent;
  color: var(--hnui-text-color);
  font-size: 14px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239298a0' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: all 0.3s;
}

.hnui-transfer-pagination-select:hover {
  border-color: var(--hnui-brand-color-hover);
}

/* === 操作按钮区 === */
.hnui-transfer-operations {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hnui-transfer-operation-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hnui-border-color);
  border-radius: 3px;
  background-color: var(--hnui-neutral-color-7);
  color: var(--hnui-neutral-color-4);
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.hnui-transfer-operation-btn:hover {
  border-color: var(--hnui-brand-color-hover);
  background-color: var(--hnui-brand-color9);
  color: var(--hnui-brand-color-hover);
}

.hnui-transfer-operation-btn:active {
  border-color: var(--hnui-brand-color-active);
  color: var(--hnui-brand-color-active);
}

.hnui-transfer-operation-btn-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: var(--hnui-disabled-bg-color);
  color: var(--hnui-disabled-color);
  border-color: var(--hnui-border-color);
}

.hnui-transfer-operation-btn-disabled:hover {
  border-color: var(--hnui-border-color);
  background-color: var(--hnui-disabled-bg-color);
  color: var(--hnui-disabled-color);
}

/* === 图标旋转 === */
.hnui-transfer-operation-btn .hnui-icon-rotate-180 {
  transform: rotate(180deg);
}

.hnui-transfer-pagination-btn .hnui-icon-rotate-180 {
  transform: rotate(180deg);
}

/* === Hover状态背景 === */
.hnui-transfer-item-hover {
  background-color: var(--hnui-neutral-color-7);
}

/* === 禁用状态 === */
.hnui-transfer-disabled .hnui-transfer-panel {
  background-color: var(--hnui-disabled-bg-color);
  cursor: not-allowed;
}

.hnui-transfer-disabled .hnui-transfer-item {
  cursor: not-allowed;
  color: var(--hnui-disabled-color);
}

.hnui-transfer-disabled .hnui-transfer-item:hover {
  background-color: transparent;
}

.hnui-transfer-disabled .hnui-transfer-search-input {
  background-color: var(--hnui-disabled-bg-color);
  cursor: not-allowed;
  color: var(--hnui-disabled-color);
}

默认状态 ​

Transfer 穿梭框的基础用法，双栏布局展示数据的左右穿梭。

查看代码
html
<div class="hnui-transfer">
  <!-- 左侧面板 -->
  <div class="hnui-transfer-panel">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
    </div>
  </div>

  <!-- 中间操作按钮 -->
  <div class="hnui-transfer-operations">
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right"></i>
    </button>
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right hnui-icon-rotate-180"></i>
    </button>
  </div>

  <!-- 右侧面板 -->
  <div class="hnui-transfer-panel">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-empty">暂无数据</div>
    </div>
  </div>
</div>

带搜索框 ​

在面板顶部添加搜索框，支持对列表项进行过滤搜索。

查看代码
html
<div class="hnui-transfer">
  <!-- 左侧面板 -->
  <div class="hnui-transfer-panel">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-search">
      <div class="hnui-transfer-search-wrapper">
        <input
          type="text"
          class="hnui-transfer-search-input"
          placeholder="请输入内容"
        />
        <i class="hnui-icon-search hnui-transfer-search-icon"></i>
      </div>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
    </div>
  </div>

  <!-- 中间操作按钮 -->
  <div class="hnui-transfer-operations">
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right"></i>
    </button>
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right hnui-icon-rotate-180"></i>
    </button>
  </div>

  <!-- 右侧面板 -->
  <div class="hnui-transfer-panel">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-search">
      <div class="hnui-transfer-search-wrapper">
        <input
          type="text"
          class="hnui-transfer-search-input"
          placeholder="请输入内容"
        />
        <i class="hnui-icon-search hnui-transfer-search-icon"></i>
      </div>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-empty">暂无数据</div>
    </div>
  </div>
</div>

结合树结构使用 ​

当数据具有层级关系时，可以使用树形穿梭框展示。支持展开/折叠树节点。

查看代码
html
<div class="hnui-transfer">
  <!-- 左侧面板 -->
  <div class="hnui-transfer-panel">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">5项</span>
    </div>
    <div class="hnui-transfer-search">
      <div class="hnui-transfer-search-wrapper">
        <input type="text" class="hnui-transfer-search-input" placeholder="请输入内容" />
        <i class="hnui-icon-search hnui-transfer-search-icon"></i>
      </div>
    </div>
    <div class="hnui-transfer-panel-body">
      <!-- 一级树节点（展开） -->
      <div class="hnui-transfer-tree-item">
        <i class="hnui-icon hnui-icon-right-small hnui-transfer-tree-item-expand"></i>
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-tree-item-checkbox" />
        <span class="hnui-transfer-tree-item-label">一级树</span>
      </div>
      <!-- 二级树节点 -->
      <div class="hnui-transfer-tree-item hnui-transfer-tree-item-level-1">
        <i class="hnui-icon hnui-icon-right-small"></i>
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-tree-item-checkbox" />
        <span class="hnui-transfer-tree-item-label">二级树</span>
      </div>
      <div class="hnui-transfer-tree-item hnui-transfer-tree-item-level-1">
        <i class="hnui-icon hnui-icon-right-small"></i>
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-tree-item-checkbox" />
        <span class="hnui-transfer-tree-item-label">二级树</span>
      </div>
      <div class="hnui-transfer-tree-item hnui-transfer-tree-item-level-1">
        <i class="hnui-icon hnui-icon-right-small"></i>
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-tree-item-checkbox" />
        <span class="hnui-transfer-tree-item-label">二级树</span>
      </div>
      <!-- 一级树节点（折叠） -->
      <div class="hnui-transfer-tree-item">
        <i class="hnui-icon hnui-icon-right-small"></i>
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-tree-item-checkbox" />
        <span class="hnui-transfer-tree-item-label">一级树</span>
      </div>
    </div>
  </div>

  <!-- 中间操作按钮 -->
  <div class="hnui-transfer-operations">
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right"></i>
    </button>
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right hnui-icon-rotate-180"></i>
    </button>
  </div>

  <!-- 右侧面板 -->
  <div class="hnui-transfer-panel">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-search">
      <div class="hnui-transfer-search-wrapper">
        <input type="text" class="hnui-transfer-search-input" placeholder="请输入内容" />
        <i class="hnui-icon-search hnui-transfer-search-icon"></i>
      </div>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-empty">暂无数据</div>
    </div>
  </div>
</div>

外框尺寸变化 ​

当数据量较大时，可以通过添加分页功能来优化展示效果。

查看代码
html
<div class="hnui-transfer">
  <!-- 左侧面板（带分页） -->
  <div class="hnui-transfer-panel">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
    </div>
    <div class="hnui-transfer-panel-footer">
      <div class="hnui-transfer-pagination">
        <button class="hnui-transfer-pagination-btn">
          <i class="hnui-icon-chevron-right hnui-icon-rotate-180"></i>
        </button>
        <span class="hnui-transfer-pagination-info">1/2</span>
        <select class="hnui-transfer-pagination-select">
          <option>1/2</option>
          <option>2/2</option>
        </select>
        <button class="hnui-transfer-pagination-btn">
          <i class="hnui-icon-chevron-right"></i>
        </button>
      </div>
    </div>
  </div>

  <!-- 中间操作按钮 -->
  <div class="hnui-transfer-operations">
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right"></i>
    </button>
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right hnui-icon-rotate-180"></i>
    </button>
  </div>

  <!-- 右侧面板（带分页） -->
  <div class="hnui-transfer-panel">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
    </div>
    <div class="hnui-transfer-panel-footer">
      <div class="hnui-transfer-pagination">
        <button class="hnui-transfer-pagination-btn">
          <i class="hnui-icon-chevron-right hnui-icon-rotate-180"></i>
        </button>
        <span class="hnui-transfer-pagination-info">1/2</span>
        <select class="hnui-transfer-pagination-select">
          <option>1/2</option>
          <option>2/2</option>
        </select>
        <button class="hnui-transfer-pagination-btn">
          <i class="hnui-icon-chevron-right"></i>
        </button>
      </div>
    </div>
  </div>
</div>

穿梭框状态 ​

Transfer 穿梭框的交互状态包括：Normal（正常）、Hover（悬停）、Focus（选中）、Disabled（禁用）。

Normal
0项
选项
选项
选项
选项
选项
0项
暂无数据
Hover
0项
选项
选项
选项
选项
选项
0项
暂无数据
Focus
0项
选项
选项
选项
选项
选项
0项
暂无数据
Disabled
0项
选项
选项
选项
选项
0项
暂无数据
查看代码
html
<div class="hnui-transfer">
  <div class="hnui-transfer-panel hnui-transfer-panel-sm">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
    </div>
  </div>
  <div class="hnui-transfer-operations">
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right"></i>
    </button>
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right hnui-icon-rotate-180"></i>
    </button>
  </div>
  <div class="hnui-transfer-panel hnui-transfer-panel-sm">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-empty">暂无数据</div>
    </div>
  </div>
</div>
html
<div class="hnui-transfer">
  <div class="hnui-transfer-panel hnui-transfer-panel-sm">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item hnui-transfer-item-hover">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
    </div>
  </div>
  <div class="hnui-transfer-operations">
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right"></i>
    </button>
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right hnui-icon-rotate-180"></i>
    </button>
  </div>
  <div class="hnui-transfer-panel hnui-transfer-panel-sm">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-empty">暂无数据</div>
    </div>
  </div>
</div>
html
<div class="hnui-transfer">
  <div class="hnui-transfer-panel hnui-transfer-panel-sm">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" checked />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-item hnui-transfer-item-checked">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" checked />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item hnui-transfer-item-checked">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" checked />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item hnui-transfer-item-checked">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" checked />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
    </div>
  </div>
  <div class="hnui-transfer-operations">
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right"></i>
    </button>
    <button class="hnui-transfer-operation-btn">
      <i class="hnui-icon-chevron-right hnui-icon-rotate-180"></i>
    </button>
  </div>
  <div class="hnui-transfer-panel hnui-transfer-panel-sm">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-empty">暂无数据</div>
    </div>
  </div>
</div>
html
<div class="hnui-transfer hnui-transfer-disabled">
  <div class="hnui-transfer-panel hnui-transfer-panel-sm">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" disabled />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" disabled />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" disabled />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" disabled />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
      <div class="hnui-transfer-item">
        <input type="checkbox" class="hnui-checkbox-input hnui-transfer-item-checkbox" disabled />
        <span class="hnui-transfer-item-label">选项</span>
      </div>
    </div>
  </div>
  <div class="hnui-transfer-operations">
    <button class="hnui-transfer-operation-btn hnui-transfer-operation-btn-disabled" disabled>
      <i class="hnui-icon-chevron-right"></i>
    </button>
    <button class="hnui-transfer-operation-btn hnui-transfer-operation-btn-disabled" disabled>
      <i class="hnui-icon-chevron-right hnui-icon-rotate-180"></i>
    </button>
  </div>
  <div class="hnui-transfer-panel hnui-transfer-panel-sm">
    <div class="hnui-transfer-panel-header">
      <input type="checkbox" class="hnui-checkbox-input hnui-transfer-panel-header-checkbox" disabled />
      <span class="hnui-transfer-panel-header-title">0项</span>
    </div>
    <div class="hnui-transfer-panel-body">
      <div class="hnui-transfer-empty">暂无数据</div>
    </div>
  </div>
</div>

统一UI

Copyright © 2024