UI设计规范及说明

Appearance

Dropdown 下拉菜单 ​

用于承载过多的操作集合，通过下拉拓展的形式，收纳更多的操作。

CSS样式 ​

全部dropdown样式代码：

查看代码
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

/* === 下拉菜单容器 === */
.hnui-dropdown {
  position: relative;
  display: inline-block;

  --hnui-dropdown-success-bg: #e6f7f1;
  --hnui-dropdown-warning-bg: #fffbe6;
  --hnui-dropdown-danger-bg: #ffe6e6;
}

/* === 触发按钮 === */
.hnui-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 12px;
  background-color: var(--hnui-neutral-color-7);
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--hnui-text-color);
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.hnui-dropdown-trigger:hover {
  background-color: var(--hnui-neutral-color-6);
}

/* 触发按钮箭头 */
.hnui-dropdown-trigger .hnui-dropdown-arrow {
  margin-left: 6px;
  font-size: 12px;
  color: var(--hnui-neutral-color-4);
  transition: transform 0.2s;
}

.hnui-dropdown-open .hnui-dropdown-arrow {
  transform: rotate(180deg);
}

/* === 下拉面板 === */
.hnui-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1050;
  min-width: 160px;
  padding: 6px;
  background: #ffffff;
  border: 0.5px solid #dcdcdc;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

/* 悬停触发器时显示菜单 */
.hnui-dropdown:hover .hnui-dropdown-menu {
  display: block;
}

/* === 菜单项 === */
.hnui-dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 22px;
  color: var(--hnui-neutral-color-2);
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
  user-select: none;
  opacity: 0.9;
}

.hnui-dropdown-item:hover {
  background-color: var(--hnui-info-bg);
}

.hnui-dropdown-item:active {
  background-color: var(--hnui-neutral-color-6);
}

/* 选中状态 */
.hnui-dropdown-item-selected {
  background-color: var(--hnui-brand-color-elected);
  color: var(--hnui-brand-color-normal);
}

.hnui-dropdown-item-selected:hover {
  background-color: var(--hnui-brand-color-elected);
  color: var(--hnui-brand-color-normal);
}

/* 子菜单选中状态 */
.hnui-dropdown-item-submenu.hnui-dropdown-item-selected {
  color: var(--hnui-brand-color-normal);
}

.hnui-dropdown-item-submenu.hnui-dropdown-item-selected:hover {
  background-color: var(--hnui-info-bg);
}

/* 菜单项图标 */
.hnui-dropdown-item .hnui-icon {
  margin-right: 8px;
  font-size: 14px;
  color: currentColor;
}

/* 子菜单箭头 */
.hnui-dropdown-item-submenu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* === 子菜单 === */
.hnui-dropdown-submenu {
  position: relative;
}

.hnui-dropdown-submenu-menu {
  position: absolute;
  top: 0;
  left: calc(100% + 4px);
  z-index: 1051;
  min-width: 160px;
  padding: 6px;
  background: #ffffff;
  border: 0.5px solid #dcdcdc;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.hnui-dropdown-item-line {
  display: flex;
  width: 100%;
  border: 0.5px solid var(--hnui-neutral-color-6);
  margin: 4px 0;
}

.hnui-dropdown-item-active {
  background-color: var(--hnui-brand-color9);
  color: var(--hnui-brand-color-normal);
}

/* 悬停子菜单项时显示下一级菜单 */
.hnui-dropdown-submenu:hover>.hnui-dropdown-submenu-menu {
  display: block;
}

/* === 主题变体 === */
.hnui-dropdown-item-danger {
  color: var(--hnui-danger-color);
}
.hnui-dropdown-item-success {
  color: var(--hnui-success-color);
}
.hnui-dropdown-item-warning {
  color: var(--hnui-warning-color);
}
/* 危险主题 */
.hnui-dropdown-danger .hnui-dropdown-item-active {
  color: var(--hnui-danger-color);
  background-color: var(--hnui-dropdown-danger-bg);
}

/* 成功主题 */
.hnui-dropdown-success .hnui-dropdown-item-active {
  color: var(--hnui-success-color);
  background-color: var(--hnui-dropdown-success-bg);
}

/* 警告主题 */
.hnui-dropdown-warning .hnui-dropdown-item-active {
  color: var(--hnui-warning-color);
  background-color: var(--hnui-dropdown-warning-bg);
}

/* === 禁用状态 === */
.hnui-dropdown-item-disabled {
  color: var(--hnui-disabled-color);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

/* === 分割线 === */
.hnui-dropdown-divider {
  height: 1px;
  margin: 4px 0;
  background-color: var(--hnui-neutral-color-6);
  border: none;
}

/* === 暗色模式适配 === */
.dark .hnui-dropdown-trigger {
  background-color: var(--hnui-neutral-color-7);
  color: var(--hnui-neutral-color-2);
}

.dark .hnui-dropdown-trigger:hover {
  background-color: var(--hnui-neutral-color-6);
}

.dark .hnui-dropdown-menu {
  background: var(--hnui-neutral-color-8);
  border-color: var(--hnui-neutral-color-6);
}

.dark .hnui-dropdown-submenu-menu {
  background: var(--hnui-neutral-color-8);
  border-color: var(--hnui-neutral-color-6);
}

.dark .hnui-dropdown-item {
  color: var(--hnui-neutral-color-2);
}

.dark .hnui-dropdown-divider {
  background-color: var(--hnui-neutral-color-6);
}

基础下拉菜单 ​

最基础的下拉菜单，支持多层级嵌套。点击按钮展开下拉面板，鼠标悬停子菜单项可展开下一级。

填充按钮
一级选项
一级选项
二级选项
二级选项
基础选项
基础选项
二级选项
二级选项
一级选项
一级选项
一级选项
一级选项
一级选项
查看代码
html
<div class="hnui-dropdown">
  <div class="hnui-dropdown-trigger">
    填充按钮
    <i class="hnui-icon hnui-icon-chevron-down hnui-dropdown-arrow"></i>
  </div>
  <div class="hnui-dropdown-menu">
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active">
      <div class="hnui-dropdown-item-submenu">
        一级选项
        <span class="hnui-dropdown-item-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </div>
      <div class="hnui-dropdown-submenu-menu">
        <div class="hnui-dropdown-item">二级选项</div>
        <div class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active">
          <div class="hnui-dropdown-item-submenu">
            二级选项
            <span class="hnui-dropdown-item-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </div>
          <div class="hnui-dropdown-submenu-menu">
            <div class="hnui-dropdown-item">基础选项</div>
            <div class="hnui-dropdown-item">基础选项</div>
          </div>
        </div>
        <div class="hnui-dropdown-item">二级选项</div>
        <div class="hnui-dropdown-item">二级选项</div>
      </div>
    </div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item">一级选项</div>
  </div>
</div>

图标下拉菜单 ​

在菜单项前添加图标，增强视觉识别性。

填充按钮
一级选项
一级选项
一级选项
一级选项
一级选项
查看代码
html
<div class="hnui-dropdown">
  <div class="hnui-dropdown-trigger">
    填充按钮
    <i class="hnui-icon hnui-icon-chevron-down hnui-dropdown-arrow"></i>
  </div>
  <div class="hnui-dropdown-menu">
    <div class="hnui-dropdown-item">
      <i class="hnui-icon hnui-icon-entry"></i>
      一级选项
    </div>
    <div class="hnui-dropdown-item">
      <i class="hnui-icon hnui-icon-entry"></i>
      一级选项
    </div>
    <div class="hnui-dropdown-item hnui-dropdown-submenu">
      <div class="hnui-dropdown-item-submenu">
        <div>
          <i class="hnui-icon hnui-icon-entry"></i>
          一级选项
        </div>
        <span class="hnui-dropdown-item-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </div>
    </div>
    <div class="hnui-dropdown-item">
      <i class="hnui-icon hnui-icon-entry"></i>
      一级选项
    </div>
    <div class="hnui-dropdown-item">
      <i class="hnui-icon hnui-icon-entry"></i>
      一级选项
    </div>
  </div>
</div>

多层下拉菜单 ​

支持二级、三级子菜单，鼠标悬停时自动展开下一级菜单。

填充按钮
一级选项
一级选项
二级选项
二级选项
基础选项
基础选项
基础选项
基础选项
二级选项
二级选项
一级选项
一级选项
一级选项
一级选项
一级选项
查看代码
html
<script setup></script>

<template>
  <div style="margin-bottom: 300px">
    <!-- #region dropdown-Base -->
    <div class="hnui-dropdown">
      <div class="hnui-dropdown-trigger">
        填充按钮
        <i class="hnui-icon hnui-icon-chevron-down hnui-dropdown-arrow"></i>
      </div>
      <div class="hnui-dropdown-menu">
        <div class="hnui-dropdown-item">一级选项</div>
        <div class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active">
          <div class="hnui-dropdown-item-submenu">
            一级选项
            <span class="hnui-dropdown-item-expand-icon">
              <i class="hnui-icon-chevron-right"></i>
            </span>
          </div>
          <div class="hnui-dropdown-submenu-menu">
            <div class="hnui-dropdown-item">二级选项</div>
            <div class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active">
              <div class="hnui-dropdown-item-submenu">
                二级选项
                <span class="hnui-dropdown-item-expand-icon">
                  <i class="hnui-icon-chevron-right"></i>
                </span>
              </div>
              <div class="hnui-dropdown-submenu-menu">
                <div class="hnui-dropdown-item">基础选项</div>
                <div class="hnui-dropdown-item">基础选项</div>
                <div class="hnui-dropdown-item">基础选项</div>
                <div class="hnui-dropdown-item">基础选项</div>
              </div>
            </div>
            <div class="hnui-dropdown-item">二级选项</div>
            <div class="hnui-dropdown-item">二级选项</div>
          </div>
        </div>
        <div class="hnui-dropdown-item">一级选项</div>
        <div class="hnui-dropdown-item-line"></div>
        <div class="hnui-dropdown-item">一级选项</div>
        <div class="hnui-dropdown-item">一级选项</div>
        <div class="hnui-dropdown-item">一级选项</div>
        <div class="hnui-dropdown-item-line"></div>
        <div class="hnui-dropdown-item">一级选项</div>
      </div>
    </div>
    <!-- #endregion dropdown-Base -->
  </div>
</template>

<style scoped>
@import "./dropdown.css";
</style>

下拉菜单状态 ​

不同选项状态有不同的视觉反馈：Hover（悬浮）、Active（点击）、Select（选中）。

Hover（悬浮）
填充按钮
一级选项
一级选项
一级选项
一级选项
一级选项
Active（点击）
填充按钮
一级选项
一级选项
一级选项
一级选项
一级选项
Select（选中）
填充按钮
一级选项
一级选项
一级选项
二级选项
二级选项
二级选项
二级选项
一级选项
一级选项
查看代码
html
<div class="hnui-dropdown">
  <div class="hnui-dropdown-trigger">
    填充按钮
    <i class="hnui-icon hnui-icon-chevron-down hnui-dropdown-arrow"></i>
  </div>
  <div class="hnui-dropdown-menu">
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div
      class="hnui-dropdown-item"
      style="background-color: var(--hnui-neutral-color-7)"
    >
      一级选项
    </div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item-line"></div>
    <div class="hnui-dropdown-item hnui-dropdown-item-danger">一级选项</div>
  </div>
</div>
html
<div class="hnui-dropdown">
  <div class="hnui-dropdown-trigger">
    填充按钮
    <i class="hnui-icon hnui-icon-chevron-down hnui-dropdown-arrow"></i>
  </div>
  <div class="hnui-dropdown-menu">
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div
      class="hnui-dropdown-item"
      style="background-color: var(--hnui-neutral-color-6)"
    >
      一级选项
    </div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item-line"></div>
    <div class="hnui-dropdown-item hnui-dropdown-item-danger">一级选项</div>
  </div>
</div>
html
<div class="hnui-dropdown">
  <div class="hnui-dropdown-trigger">
    填充按钮
    <i class="hnui-icon hnui-icon-chevron-down hnui-dropdown-arrow"></i>
  </div>
  <div class="hnui-dropdown-menu">
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active">
      <div class="hnui-dropdown-item-submenu">
        一级选项
        <span class="hnui-dropdown-item-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </div>
      <div class="hnui-dropdown-submenu-menu">
        <div class="hnui-dropdown-item">二级选项</div>
        <div class="hnui-dropdown-item hnui-dropdown-submenu">
          <div class="hnui-dropdown-item-submenu">二级选项</div>
        </div>
        <div class="hnui-dropdown-item">二级选项</div>
        <div class="hnui-dropdown-item">二级选项</div>
      </div>
    </div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item-line"></div>
    <div class="hnui-dropdown-item hnui-dropdown-item-danger">一级选项</div>
  </div>
</div>

不同主题选项 ​

提供默认、错误、成功、警告四种主题色，用于不同的操作提示。

默认
填充按钮
一级选项
一级选项
一级选项
二级选项
二级选项
二级选项
二级选项
一级选项
一级选项
错误
填充按钮
一级选项
一级选项
一级选项
二级选项
二级选项
二级选项
二级选项
一级选项
一级选项
成功
填充按钮
一级选项
一级选项
一级选项
二级选项
二级选项
二级选项
二级选项
一级选项
一级选项
警告
填充按钮
一级选项
一级选项
一级选项
二级选项
二级选项
二级选项
二级选项
一级选项
一级选项
查看代码
html
<div class="hnui-dropdown">
  <div class="hnui-dropdown-trigger">
    填充按钮
    <i class="hnui-icon hnui-icon-chevron-down hnui-dropdown-arrow"></i>
  </div>
  <div class="hnui-dropdown-menu">
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active">
      <div class="hnui-dropdown-item-submenu">
        一级选项
        <span class="hnui-dropdown-item-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </div>
      <div class="hnui-dropdown-submenu-menu">
        <div class="hnui-dropdown-item">二级选项</div>
        <div
          class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active"
        >
          <div class="hnui-dropdown-item-submenu">二级选项</div>
        </div>
        <div class="hnui-dropdown-item">二级选项</div>
        <div class="hnui-dropdown-item">二级选项</div>
      </div>
    </div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item-line"></div>
    <div class="hnui-dropdown-item">一级选项</div>
  </div>
</div>
html
<div class="hnui-dropdown hnui-dropdown-danger">
  <div class="hnui-dropdown-trigger">
    填充按钮
    <i class="hnui-icon hnui-icon-chevron-down hnui-dropdown-arrow"></i>
  </div>
  <div class="hnui-dropdown-menu">
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active">
      <div class="hnui-dropdown-item-submenu">
        一级选项
        <span class="hnui-dropdown-item-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </div>
      <div class="hnui-dropdown-submenu-menu">
        <div class="hnui-dropdown-item">二级选项</div>
        <div
          class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active"
        >
          <div class="hnui-dropdown-item-submenu">二级选项</div>
        </div>
        <div class="hnui-dropdown-item">二级选项</div>
        <div class="hnui-dropdown-item">二级选项</div>
      </div>
    </div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item-line"></div>
    <div class="hnui-dropdown-item hnui-dropdown-item-danger">一级选项</div>
  </div>
</div>
html
<div class="hnui-dropdown hnui-dropdown-success">
  <div class="hnui-dropdown-trigger">
    填充按钮
    <i class="hnui-icon hnui-icon-chevron-down hnui-dropdown-arrow"></i>
  </div>
  <div class="hnui-dropdown-menu">
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active">
      <div class="hnui-dropdown-item-submenu">
        一级选项
        <span class="hnui-dropdown-item-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </div>
      <div class="hnui-dropdown-submenu-menu">
        <div class="hnui-dropdown-item">二级选项</div>
        <div
          class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active"
        >
          <div class="hnui-dropdown-item-submenu">二级选项</div>
        </div>
        <div class="hnui-dropdown-item">二级选项</div>
        <div class="hnui-dropdown-item">二级选项</div>
      </div>
    </div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item-line"></div>
    <div class="hnui-dropdown-item hnui-dropdown-item-success">一级选项</div>
  </div>
</div>
html
<div class="hnui-dropdown hnui-dropdown-warning">
  <div class="hnui-dropdown-trigger">
    填充按钮
    <i class="hnui-icon hnui-icon-chevron-down hnui-dropdown-arrow"></i>
  </div>
  <div class="hnui-dropdown-menu">
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active">
      <div class="hnui-dropdown-item-submenu">
        一级选项
        <span class="hnui-dropdown-item-expand-icon">
          <i class="hnui-icon-chevron-right"></i>
        </span>
      </div>
      <div class="hnui-dropdown-submenu-menu">
        <div class="hnui-dropdown-item">二级选项</div>
        <div
          class="hnui-dropdown-item hnui-dropdown-submenu hnui-dropdown-item-active"
        >
          <div class="hnui-dropdown-item-submenu">二级选项</div>
        </div>
        <div class="hnui-dropdown-item">二级选项</div>
        <div class="hnui-dropdown-item">二级选项</div>
      </div>
    </div>
    <div class="hnui-dropdown-item">一级选项</div>
    <div class="hnui-dropdown-item-line"></div>
    <div class="hnui-dropdown-item hnui-dropdown-item-warning">一级选项</div>
  </div>
</div>

统一UI

Copyright © 2024