UI设计规范及说明

Appearance

Cascader 级联选择器 ​

CSS样式 ​

全部 cascader 样式代码：

查看代码
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 "../checkbox/checkbox.css";

/* 级联选择器容器 */
.hnui-cascader {
  --hnui-cascader-font-size: 14px;
  --hnui-cascader-font-size-lg: 16px;
  --hnui-cascader-font-size-sm: 12px;
  --hnui-cascader-height: 28px;
  --hnui-cascader-height-lg: 40px;
  --hnui-cascader-height-sm: 24px;

  position: relative;
  display: inline-block;
  width: 280px;
  box-sizing: border-box;
}

/* 级联选择器输入区域 */
.hnui-cascader-selector {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 30px 0 8px;
  border: 1px solid var(--hnui-border-color);
  border-radius: 3px;
  background-color: transparent;
  color: var(--hnui-text-color);
  cursor: pointer;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 22px;
}

.hnui-cascader-selector-hover {
  border-color: var(--hnui-brand-color-normal);
}

/* 选择器文本 */
.hnui-cascader-selection-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* placeholder 样式 */
.hnui-cascader-selection-placeholder {
  opacity: 0.4;
  color: var(--hnui-neutral-color-2);
}

/* 箭头图标容器 */
.hnui-cascader-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hnui-neutral-color-4);
  font-size: 12px;
  transition: transform 0.2s cubic-bezier(0.38, 0, 0.24, 1);
  cursor: not-allowed;
}

/* 展开时箭头旋转 */
.hnui-cascader.hnui-cascader-open .hnui-cascader-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* Hover 状态 */
.hnui-cascader-selector:hover {
  border-color: var(--hnui-brand-color-normal);
}

/* Focus 状态 */
.hnui-cascader.hnui-cascader-focused .hnui-cascader-selector,
.hnui-cascader.hnui-cascader-open .hnui-cascader-selector {
  z-index: 1;
  border-color: var(--hnui-brand-color-normal);
}

/* Disabled 状态 */
.hnui-cascader.hnui-cascader-disabled .hnui-cascader-selector {
  background: var(--hnui-disabled-bg-color);
  color: var(--hnui-disabled-color);
  cursor: not-allowed;
}

/* 下拉菜单容器 */
.hnui-cascader-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1050;
  min-height: 160px;
  background: transparent;
  box-sizing: border-box;
  display: none;
}

/* 展开时显示下拉菜单 */
.hnui-cascader.hnui-cascader-open .hnui-cascader-dropdown {
  display: flex;
}

/* 展示模式 - 下拉菜单占位而非浮起 */
.hnui-cascader.hnui-cascader-demo .hnui-cascader-dropdown {
  position: static;
  margin-top: 4px;
  display: flex;
  background: transparent;
}

/* 级联面板容器 */
.hnui-cascader-panels {
  display: flex;
  flex: 1;
  background: transparent;
  border: 1px solid var(--hnui-border-color);
  border-radius: 3px;
  background: var(--hnui-color-white);
}

.hnui-cascader-panels-single {
  flex: none;
}

/* 单个级联面板 */
.hnui-cascader-panel {
  flex-shrink: 0;
  width: 212px;
  min-height: 160px;
  max-height: 256px;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--hnui-color-white);
}

.hnui-cascader-panel:last-child {
  border-right: none;
}

/* 级联菜单列表 */
.hnui-cascader-panel .hnui-cascader-panel-list {
  margin: 0 !important;
  padding: 6px !important;
  list-style: none;
}

/* 级联菜单项 */
.hnui-cascader-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
  box-sizing: border-box;
  user-select: none;
  margin-top: 4px !important;
}

/* 菜单项内容 */
.hnui-cascader-option-content {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 22px;
  color: var(--hnui-neutral-color-2);
  opacity: 0.9;
  vertical-align: middle;
}

/* 菜单项 Hover 状态 */
.hnui-cascader-option:hover {
  background-color: var(--hnui-info-bg);
}
.hnui-cascader-option-hover {
  background-color: var(--hnui-info-bg);
}

/* 菜单项选中状态 */
.hnui-cascader-option.hnui-cascader-option-selected {
  background-color: var(--hnui-brand-color9);
}

.hnui-cascader-option.hnui-cascader-option-selected .hnui-cascader-option-content {
  color: var(--hnui-brand-color-normal);
  opacity: 1;
}

/* 菜单项激活状态（父级被选中） */
.hnui-cascader-option.hnui-cascader-option-active {
  background-color: var(--hnui-brand-color9);
}

.hnui-cascader-option.hnui-cascader-option-active .hnui-cascader-option-content {
  color: var(--hnui-brand-color-normal);
  opacity: 1;
}

/* 菜单项禁用状态 */
.hnui-cascader-option.hnui-cascader-option-disabled {
  cursor: not-allowed;
  background-color: transparent;
}

.hnui-cascader-option.hnui-cascader-option-disabled .hnui-cascader-option-content {
  color: var(--hnui-disabled-color);
  opacity: 1;
}

.hnui-cascader-option.hnui-cascader-option-disabled:hover {
  background-color: transparent;
}

/* 展开图标 - 有子级的项显示右箭头 */
.hnui-cascader-option-expand-icon {
  flex-shrink: 0;
  margin-left: 8px;
  color: var(--hnui-neutral-color-5);
  font-size: 12px;
  line-height: 1;
  opacity: 0.9;
  transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}

.hnui-cascader-option.hnui-cascader-option-active .hnui-cascader-option-expand-icon,
.hnui-cascader-option.hnui-cascader-option-selected .hnui-cascader-option-expand-icon {
  color: var(--hnui-brand-color-normal);
  opacity: 1;
}

.hnui-cascader-option.hnui-cascader-option-disabled .hnui-cascader-option-expand-icon {
  color: var(--hnui-disabled-color);
  opacity: 1;
}

/* 多选模式样式 */
.hnui-cascader.hnui-cascader-multiple .hnui-cascader-selector {
  padding: 4px 30px 4px 10px;
  min-height: 32px;
  height: auto;
}

/* 多选标签容器 */
.hnui-cascader-selection-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

/* 多选标签 */
.hnui-cascader-selection-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 24px;
  padding: 0 7px;
  border-radius: 0;
  background-color: var(--hnui-neutral-color-7);
  font-size: 12px;
  line-height: 20px;
  color: var(--hnui-neutral-color-2);
  box-sizing: border-box;
}

.hnui-cascader-selection-tag-content {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 多选标签关闭按钮 */
.hnui-cascader-selection-tag-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  color: var(--hnui-neutral-color-4);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
}

.hnui-cascader-selection-tag-close:hover {
  color: var(--hnui-neutral-color-2);
}

/* 多选模式下的复选框 */
.hnui-cascader.hnui-cascader-multiple .hnui-cascader-option {
  padding-left: 8px;
}

/* 尺寸变体 */
/* Small 尺寸 - 24px */
.hnui-cascader.hnui-cascader-sm .hnui-cascader-selector {
  height: var(--hnui-cascader-height-sm);
  font-size: var(--hnui-cascader-font-size-sm);
  padding: 0 24px 0 8px;
}

.hnui-cascader.hnui-cascader-sm .hnui-cascader-option {
  height: var(--hnui-cascader-height-sm);
}
.hnui-cascader.hnui-cascader-sm .hnui-cascader-option-content {
  font-size: var(--hnui-cascader-font-size-sm);
}

.hnui-cascader.hnui-cascader-sm .hnui-cascader-arrow {
  right: 8px;
}

.hnui-cascader.hnui-cascader-sm.hnui-cascader-multiple .hnui-cascader-selector {
  height: var(--hnui-cascader-height-sm);
  padding: 2px 24px 2px 8px;
}

/* Large 尺寸 - 40px */
.hnui-cascader.hnui-cascader-lg .hnui-cascader-selector {
  height: var(--hnui-cascader-height-lg);
  font-size: var(--hnui-cascader-font-size-lg);
  padding: 0 34px 0 12px;
}
.hnui-cascader.hnui-cascader-lg .hnui-cascader-option {
  height: var(--hnui-cascader-height-lg);
}
.hnui-cascader.hnui-cascader-lg .hnui-cascader-option-content {
  font-size: var(--hnui-cascader-font-size-lg);
}

.hnui-cascader.hnui-cascader-lg .hnui-cascader-arrow {
  right: 12px;
}

.hnui-cascader.hnui-cascader-lg.hnui-cascader-multiple .hnui-cascader-selector {
  height: var(--hnui-cascader-height-lg);
  padding: 6px 34px 6px 12px;
}

单选级联选择器 ​

请选择内容
  • 一级选项 1
  • 一级选项 2
  • 二级选项 1-1
  • 二级选项 1-2
  • 二级选项 1-3
查看代码
vue
<div class="hnui-cascader hnui-cascader-demo hnui-cascader-open">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text hnui-cascader-selection-placeholder">
      请选择内容
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
  <div class="hnui-cascader-dropdown">
    <div class="hnui-cascader-panels hnui-box-shadow_l3 hnui-box-shadow_l3">
      <!-- 第一级面板 -->
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option hnui-cascader-option-active">
            <span class="hnui-cascader-option-content">一级选项 1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <!-- 第二级面板 -->
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 1-1</span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 1-2</span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 1-3</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

级联选择器大小 ​

Small
一级选项 2 / 二级选项 2-3
  • 一级选项 1
  • 一级选项 2
  • 二级选项 2-1
  • 二级选项 2-2
  • 二级选项 2-3
Default
一级选项 2 / 二级选项 3-2
  • 一级选项 1
  • 一级选项 2
  • 二级选项 3-1
  • 二级选项 3-2
  • 二级选项 3-3
Large
一级选项 1 / 二级选项 1-1
  • 一级选项 1
  • 一级选项 2
  • 二级选项 1-1
  • 二级选项 1-2
  • 二级选项 1-3
查看代码
vue
<div class="hnui-cascader hnui-cascader-sm hnui-cascader-demo hnui-cascader-open">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text">
      一级选项 2 / 二级选项 2-3
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
  <div class="hnui-cascader-dropdown">
    <div class="hnui-cascader-panels hnui-box-shadow_l3">
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option hnui-cascader-option-active">
            <span class="hnui-cascader-option-content">一级选项 2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 2-1</span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 2-2</span>
          </li>
          <li class="hnui-cascader-option hnui-cascader-option-selected">
            <span class="hnui-cascader-option-content">二级选项 2-3</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
vue
<div class="hnui-cascader hnui-cascader-demo hnui-cascader-open">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text">
      一级选项 2 / 二级选项 3-2
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
  <div class="hnui-cascader-dropdown">
    <div class="hnui-cascader-panels hnui-box-shadow_l3">
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option hnui-cascader-option-active">
            <span class="hnui-cascader-option-content">一级选项 2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 3-1</span>
          </li>
          <li class="hnui-cascader-option hnui-cascader-option-selected">
            <span class="hnui-cascader-option-content">二级选项 3-2</span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 3-3</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
vue
<div class="hnui-cascader hnui-cascader-lg hnui-cascader-demo hnui-cascader-open">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text">
      一级选项 1 / 二级选项 1-1
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
  <div class="hnui-cascader-dropdown">
    <div class="hnui-cascader-panels hnui-box-shadow_l3">
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option hnui-cascader-option-active">
            <span class="hnui-cascader-option-content">一级选项 1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option hnui-cascader-option-selected">
            <span class="hnui-cascader-option-content">二级选项 1-1</span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 1-2</span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 1-3</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

多选级联选择器 ​

默认标签默认标签默认标签
  • 一级选项 1
  • 一级选项 2
  • 二级选项 1-1
  • 二级选项 1-2
  • 二级选项 1-3
查看代码
vue
<div class="hnui-cascader hnui-cascader-multiple hnui-cascader-demo hnui-cascader-open">
  <div class="hnui-cascader-selector">
    <div class="hnui-cascader-selection-tags">
      <span class="hnui-cascader-selection-tag">
        <span class="hnui-cascader-selection-tag-content">默认标签</span>
        <span class="hnui-cascader-selection-tag-close">
          <i class="hnui-icon-close"></i>
        </span>
      </span>
      <span class="hnui-cascader-selection-tag">
        <span class="hnui-cascader-selection-tag-content">默认标签</span>
        <span class="hnui-cascader-selection-tag-close">
          <i class="hnui-icon-close"></i>
        </span>
      </span>
      <span class="hnui-cascader-selection-tag">
        <span class="hnui-cascader-selection-tag-content">默认标签</span>
        <span class="hnui-cascader-selection-tag-close">
          <i class="hnui-icon-close"></i>
        </span>
      </span>
    </div>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-up"></i>
    </span>
  </div>
  <div class="hnui-cascader-dropdown">
    <div class="hnui-cascader-panels hnui-box-shadow_l3">
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option hnui-cascader-option-active hnui-cascader-option-selected">
            <input type="checkbox" class="hnui-checkbox-input" checked />
            <span class="hnui-cascader-option-content">一级选项 1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <input type="checkbox" class="hnui-checkbox-input" />
            <span class="hnui-cascader-option-content">一级选项 2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <input type="checkbox" class="hnui-checkbox-input" />
            <span class="hnui-cascader-option-content">二级选项 1-1</span>
          </li>
          <li class="hnui-cascader-option hnui-cascader-option-selected">
            <input type="checkbox" class="hnui-checkbox-input" checked />
            <span class="hnui-cascader-option-content">二级选项 1-2</span>
          </li>
          <li class="hnui-cascader-option hnui-cascader-option-selected">
            <input type="checkbox" class="hnui-checkbox-input" checked />
            <span class="hnui-cascader-option-content">二级选项 1-3</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

级联选择器输入框状态 ​

未选择状态


Normal
请选择内容
Hover
请选择内容
Focus
请选择内容
  • 一级选项 1
  • 一级选项 2
Disabled
请选择内容
查看代码
vue
<div class="hnui-cascader">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text hnui-cascader-selection-placeholder">
      请选择内容
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
</div>
vue
<div class="hnui-cascader">
  <div class="hnui-cascader-selector hnui-cascader-selector-hover">
    <span class="hnui-cascader-selection-text hnui-cascader-selection-placeholder">
      请选择内容
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
</div>
vue
<div class="hnui-cascader hnui-cascader-demo hnui-cascader-focused hnui-cascader-open">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text hnui-cascader-selection-placeholder">
      请选择内容
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-up"></i>
    </span>
  </div>

  <div class="hnui-cascader-dropdown">
    <div class="hnui-cascader-panels hnui-cascader-panels-single hnui-box-shadow_l3">
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
vue
<div class="hnui-cascader hnui-cascader-disabled">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text hnui-cascader-selection-placeholder">
      请选择内容
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
</div>

已选择状态


Normal
已选择内容
Hover
已选择内容
Focus
已选择内容
  • 一级选项 1
  • 一级选项 2
  • 二级选项 1
  • 二级选项 2
Disabled
已选择内容
查看代码
vue
<div class="hnui-cascader">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text">
      已选择内容
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
</div>
vue
<div class="hnui-cascader">
  <div class="hnui-cascader-selector hnui-cascader-selector-hover">
    <span class="hnui-cascader-selection-text">
      已选择内容
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
</div>
vue
<div class="hnui-cascader hnui-cascader-demo hnui-cascader-focused hnui-cascader-open">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text">
      已选择内容
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-up"></i>
    </span>
  </div>
  <div class="hnui-cascader-dropdown">
    <div class="hnui-cascader-panels hnui-box-shadow_l3">
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 1</span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 2</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
vue
<div class="hnui-cascader hnui-cascader-disabled">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text">
      已选择内容
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
</div>

级联选择器菜单项状态 ​

Normal
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
Hover
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
Active
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
Selected
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
Disabled
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
查看代码
vue
<div class="hnui-cascader-panels hnui-box-shadow_l3">
  <div class="hnui-cascader-panel">
    <ul class="hnui-cascader-panel-list">
      <li class="hnui-cascader-option">
        <span class="hnui-cascader-option-content">一级选项 1</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option">
        <span class="hnui-cascader-option-content">一级选项 2</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option">
        <span class="hnui-cascader-option-content">一级选项 3</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
    </ul>
  </div>
</div>
<div class="hnui-cascader-panels hnui-box-shadow_l3">
  <div class="hnui-cascader-panel">
    <ul class="hnui-cascader-panel-list">
      <li class="hnui-cascader-option">
        <input type="checkbox" class="hnui-checkbox-input" />
        <span class="hnui-cascader-option-content">一级选项 1</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option">
        <input type="checkbox" class="hnui-checkbox-input" />
        <span class="hnui-cascader-option-content">一级选项 2</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option">
        <input type="checkbox" class="hnui-checkbox-input" />
        <span class="hnui-cascader-option-content">一级选项 3</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
    </ul>
  </div>
</div>
vue
<div class="hnui-cascader-panels hnui-box-shadow_l3">
  <div class="hnui-cascader-panel">
    <ul class="hnui-cascader-panel-list">
      <li class="hnui-cascader-option">
        <span class="hnui-cascader-option-content">一级选项 1</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option hnui-cascader-option-hover">
        <span class="hnui-cascader-option-content">一级选项 2</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option">
        <span class="hnui-cascader-option-content">一级选项 3</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
    </ul>
  </div>
</div>
<div class="hnui-cascader-panels hnui-box-shadow_l3">
  <div class="hnui-cascader-panel">
    <ul class="hnui-cascader-panel-list">
      <li class="hnui-cascader-option">
        <input type="checkbox" class="hnui-checkbox-input" />
        <span class="hnui-cascader-option-content">一级选项 1</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option hnui-cascader-option-hover">
        <input type="checkbox" class="hnui-checkbox-input" />
        <span class="hnui-cascader-option-content">一级选项 2</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option">
        <input type="checkbox" class="hnui-checkbox-input" />
        <span class="hnui-cascader-option-content">一级选项 3</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
    </ul>
  </div>
</div>
vue
<div class="hnui-cascader-panels hnui-box-shadow_l3">
  <div class="hnui-cascader-panel">
    <ul class="hnui-cascader-panel-list">
      <li class="hnui-cascader-option">
        <span class="hnui-cascader-option-content">一级选项 1</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option hnui-cascader-option-active">
        <span class="hnui-cascader-option-content">一级选项 2</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option">
        <span class="hnui-cascader-option-content">一级选项 3</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
    </ul>
  </div>
</div>
<div class="hnui-cascader-panels hnui-box-shadow_l3">
  <div class="hnui-cascader-panel">
    <ul class="hnui-cascader-panel-list">
      <li class="hnui-cascader-option">
        <input type="checkbox" class="hnui-checkbox-input" />
        <span class="hnui-cascader-option-content">一级选项 1</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option hnui-cascader-option-active">
        <input type="checkbox" class="hnui-checkbox-input" />
        <span class="hnui-cascader-option-content">一级选项 2</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option">
        <input type="checkbox" class="hnui-checkbox-input" />
        <span class="hnui-cascader-option-content">一级选项 3</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
    </ul>
  </div>
</div>
vue
<div class="hnui-cascader-panels hnui-box-shadow_l3">
  <div class="hnui-cascader-panel">
    <ul class="hnui-cascader-panel-list">
      <li class="hnui-cascader-option">
        <span class="hnui-cascader-option-content">一级选项 1</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option hnui-cascader-option-selected">
        <span class="hnui-cascader-option-content">一级选项 2</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option">
        <span class="hnui-cascader-option-content">一级选项 3</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
    </ul>
  </div>
</div>

<div class="hnui-cascader-panels hnui-box-shadow_l3">
  <div class="hnui-cascader-panel">
    <ul class="hnui-cascader-panel-list">
      <li class="hnui-cascader-option">
        <input type="checkbox" class="hnui-checkbox-input" />
        <span class="hnui-cascader-option-content">一级选项 1</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option hnui-cascader-option-selected">
        <input type="checkbox" class="hnui-checkbox-input" checked />
        <span class="hnui-cascader-option-content">一级选项 2</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
      <li class="hnui-cascader-option hnui-cascader-option-selected">
        <input type="checkbox" class="hnui-checkbox-input" checked />
        <span class="hnui-cascader-option-content">一级选项 3</span>
        <span class="hnui-cascader-option-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </li>
    </ul>
  </div>
</div>
vue
  <div class="hnui-cascader-panels hnui-box-shadow_l3">
    <div class="hnui-cascader-panel">
      <ul class="hnui-cascader-panel-list">
        <li class="hnui-cascader-option">
          <span class="hnui-cascader-option-content">一级选项 1</span>
          <span class="hnui-cascader-option-expand-icon">
            <i class="hnui-icon-chevron-right"></i>
          </span>
        </li>
        <li class="hnui-cascader-option hnui-cascader-option-disabled">
          <span class="hnui-cascader-option-content">一级选项 2</span>
          <span class="hnui-cascader-option-expand-icon">
            <i class="hnui-icon-chevron-right"></i>
          </span>
        </li>
        <li class="hnui-cascader-option">
          <span class="hnui-cascader-option-content">一级选项 3</span>
          <span class="hnui-cascader-option-expand-icon">
            <i class="hnui-icon-chevron-right"></i>
          </span>
        </li>
      </ul>
    </div>
  </div>

  <div class="hnui-cascader-panels hnui-box-shadow_l3">
    <div class="hnui-cascader-panel">
      <ul class="hnui-cascader-panel-list">
        <li class="hnui-cascader-option">
          <input type="checkbox" class="hnui-checkbox-input" />
          <span class="hnui-cascader-option-content">一级选项 1</span>
          <span class="hnui-cascader-option-expand-icon">
            <i class="hnui-icon-chevron-right"></i>
          </span>
        </li>
        <li class="hnui-cascader-option hnui-cascader-option-disabled">
          <input type="checkbox" class="hnui-checkbox-input" disabled />
          <span class="hnui-cascader-option-content">一级选项 2</span>
          <span class="hnui-cascader-option-expand-icon">
            <i class="hnui-icon-chevron-right"></i>
          </span>
        </li>
        <li class="hnui-cascader-option">
          <input type="checkbox" class="hnui-checkbox-input" />
          <span class="hnui-cascader-option-content">一级选项 3</span>
          <span class="hnui-cascader-option-expand-icon">
            <i class="hnui-icon-chevron-right"></i>
          </span>
        </li>
      </ul>
    </div>
  </div>
</div>

菜单层级数量 ​

层级1
请选择内容
  • 一级选项 1
  • 一级选项 2
层级2
一级选项 2 / 二级选项 2-3
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
  • 二级选项 2-1
  • 二级选项 2-2
  • 二级选项 2-3
层级3
一级选项 1 / 二级选项 1-2 / 三级选项 1-2-1
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
  • 二级选项 1-1
  • 二级选项 1-2
  • 二级选项 1-3
  • 三级选项 1-2-1
  • 三级选项 1-2-2
  • 三级选项 1-2-3
层级4
一级选项 1 / 二级选项 1-1 / 三级选项 1-1-2 / 四级选项 1-1-2-3
  • 一级选项 1
  • 一级选项 2
  • 一级选项 3
  • 二级选项 1-1
  • 二级选项 1-2
  • 二级选项 1-3
  • 三级选项 1-1-1
  • 三级选项 1-1-2
  • 三级选项 1-1-3
  • 四级选项 1-1-2-1
  • 四级选项 1-1-2-2
  • 四级选项 1-1-2-3
查看代码
vue
<div class="hnui-cascader hnui-cascader-demo hnui-cascader-open">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text hnui-cascader-selection-placeholder">
      请选择内容
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
  <div class="hnui-cascader-dropdown">
    <div class="hnui-cascader-panels hnui-box-shadow_l3 hnui-cascader-panels-single">
      <!-- 第一级面板 -->
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option hnui-cascader-option-active">
            <span class="hnui-cascader-option-content">一级选项 1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
vue
<div class="hnui-cascader hnui-cascader-demo hnui-cascader-open">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text">
      一级选项 2 / 二级选项 2-3
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
  <div class="hnui-cascader-dropdown ">
    <div class="hnui-cascader-panels hnui-box-shadow_l3">
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option hnui-cascader-option-active">
            <span class="hnui-cascader-option-content">一级选项 2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 3</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 2-1</span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 2-2</span>
          </li>
          <li class="hnui-cascader-option hnui-cascader-option-selected">
            <span class="hnui-cascader-option-content">二级选项 2-3</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
vue
<div class="hnui-cascader hnui-cascader-demo hnui-cascader-open">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text">
      一级选项 1 / 二级选项 1-2 / 三级选项 1-2-1
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
  <div class="hnui-cascader-dropdown">
    <div class="hnui-cascader-panels hnui-box-shadow_l3">
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option hnui-cascader-option-active">
            <span class="hnui-cascader-option-content">一级选项 1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 3</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 1-1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option hnui-cascader-option-active">
            <span class="hnui-cascader-option-content">二级选项 1-2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 1-3</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option hnui-cascader-option-selected">
            <span class="hnui-cascader-option-content">三级选项 1-2-1</span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">三级选项 1-2-2</span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">三级选项 1-2-3</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
vue
<div class="hnui-cascader hnui-cascader-demo hnui-cascader-open">
  <div class="hnui-cascader-selector">
    <span class="hnui-cascader-selection-text">
      一级选项 1 / 二级选项 1-1 / 三级选项 1-1-2 / 四级选项 1-1-2-3
    </span>
    <span class="hnui-cascader-arrow">
      <i class="hnui-icon-chevron-down"></i>
    </span>
  </div>
  <div class="hnui-cascader-dropdown">
    <div class="hnui-cascader-panels hnui-box-shadow_l3">
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option hnui-cascader-option-active">
            <span class="hnui-cascader-option-content">一级选项 1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">一级选项 3</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option hnui-cascader-option-active">
            <span class="hnui-cascader-option-content">二级选项 1-1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 1-2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">二级选项 1-3</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">三级选项 1-1-1</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option hnui-cascader-option-active">
            <span class="hnui-cascader-option-content">三级选项 1-1-2</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">三级选项 1-1-3</span>
            <span class="hnui-cascader-option-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="hnui-cascader-panel">
        <ul class="hnui-cascader-panel-list">
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">四级选项 1-1-2-1</span>
          </li>
          <li class="hnui-cascader-option">
            <span class="hnui-cascader-option-content">四级选项 1-1-2-2</span>
          </li>
          <li class="hnui-cascader-option hnui-cascader-option-selected">
            <span class="hnui-cascader-option-content">四级选项 1-1-2-3</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

统一UI

Copyright © 2024