UI设计规范及说明

Appearance

NavMenu 导航菜单 ​

只存在单层结构的侧边导航,点击即跳转。一般与单层顶部导航相结合,作为二级页面的侧边导航。

CSS样式 ​

全部 nav-menu 样式代码:

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

/* === 侧边导航 Side Menu === */
.hnui-nav-side {
  width: 208px;
  background: var(--hnui-color-white);
  border-radius: 8px;
  border: 1px solid var(--hnui-border-color);
  box-sizing: border-box;
}

.hnui-nav-side-content {
  padding: 8px 0;
  height: 480px;
}

.hnui-nav-side-content-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.hnui-nav-side-content-title {
  font-size: 16px;
  font-weight: bold;
  margin: 16px 0;
}

.hnui-nav-side-content-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hnui-nav-side-setting {
  padding: 16px 24px;
  border-top: 1px solid var(--hnui-border-color);
}

.hnui-nav-side-setting .hnui-icon:hover {
  background: var(--hnui-neutral-color-7);
  cursor: pointer;
}

/* === 图标导航 Icon Menu === */
.hnui-nav-icon {
  width: 64px;
  background: var(--hnui-color-white);
  border-radius: 8px;
  border: 1px solid var(--hnui-border-color);
  box-sizing: border-box;
}

.hnui-nav-side-item-second {
  padding-left: 24px;
}

.hnui-nav-side-item-third {
  padding-left: 48px;
}

.hnui-nav-side-item .hnui-icon-chevron-right {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

.hnui-nav-side-item .hnui-icon-chevron-right-expand {
  transform: translateY(-50%) rotate(270deg);
}

.hnui-nav-side-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hnui-nav-side-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  margin: 0 8px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s;
  text-decoration: none !important;
  color: var(--hnui-neutral-color-2) !important;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hnui-nav-top a {
  text-decoration: none !important;
  color: var(--hnui-neutral-color-2) !important;
}

.hnui-nav-side-header {
  width: 100%;
  height: 60px;
  background: var(--hnui-brand-color-normal);
  margin-top: 0;
}

.hnui-nav-side-item .hnui-icon {
  margin-right: 8px;
  font-size: 16px;
  color: var(--hnui-neutral-color-4);
  transition: color 0.2s;
}

/* Selected 状态 */
.hnui-nav-side-item.hnui-nav-side-item-selected {
  background: var(--hnui-brand-color9) !important;
  color: var(--hnui-brand-color-normal) !important;
}

.hnui-nav-side-item.hnui-nav-side-item-selected .hnui-icon {
  color: var(--hnui-brand-color-normal);
}

/* Hover 状态 */
.hnui-nav-side-item:hover:not(.hnui-nav-side-item-disabled) {
  background: var(--hnui-neutral-color-7);
}

.hnui-nav-side-item-hover:not(.hnui-nav-side-item-disabled) {
  background: var(--hnui-neutral-color-7);
}

.hnui-nav-side-item-active:not(.hnui-nav-side-item-disabled) {
  background: var(--hnui-neutral-color-6);
}

.hnui-nav-side-item.hnui-nav-side-item-selected:hover {
  background: var(--hnui-brand-color9);
}

/* Active 状态 */
.hnui-nav-side-item:active:not(.hnui-nav-side-item-disabled) {
  background: var(--hnui-neutral-color-6);
}

.hnui-nav-side-item.hnui-nav-side-item-selected:active {
  background: var(--hnui-brand-color8);
}

/* Disabled 状态 */
.hnui-nav-side-item.hnui-nav-side-item-disabled {
  color: var(--hnui-disabled-color) !important;
  cursor: not-allowed;
}

.hnui-nav-side-item.hnui-nav-side-item-disabled .hnui-icon {
  color: var(--hnui-disabled-color);
}

/* === 顶部导航 Top Menu === */
.hnui-nav-top {
  display: flex;
  align-items: center;
  height: 40px;
  background: transparent;
  border-bottom: 1px solid var(--hnui-border-color);
  padding: 0 8px;
}

.hnui-nav-top-logo {
  border: 1px solid var(--hnui-border-color);
  padding: 8px 16px;
  margin-bottom: 8px;
  margin-right: 16px !important;
  border-radius: 4px;
}

.hnui-nav-top-logo {
  display: flex;
  align-items: center;
  margin-right: 40px;
}

.hnui-nav-top-menu {
  display: flex;
  align-items: center;
  flex: 1;
}

.hnui-nav-top-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  color: var(--hnui-neutral-color-2);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  margin-bottom: 8px;
}

.hnui-nav-top-item .hnui-icon {
  margin-right: 6px;
  font-size: 16px;
  color: var(--hnui-neutral-color-4);
  transition: color 0.2s;
}

.hnui-nav-top-item .hnui-nav-arrow {
  margin-left: 4px;
  font-size: 12px;
  color: var(--hnui-neutral-color-4);
  transition: color 0.2s, transform 0.2s;
}

/* Selected 状态 */
.hnui-nav-top-item.hnui-nav-top-item-selected {
  background: var(--hnui-brand-color9);
  color: var(--hnui-brand-color-normal) !important;
}

.hnui-nav-top-item.hnui-nav-top-item-selected .hnui-icon,
.hnui-nav-top-item.hnui-nav-top-item-selected .hnui-nav-arrow {
  color: var(--hnui-brand-color-normal);
}

/* Hover 状态 */
.hnui-nav-top-item:hover:not(.hnui-nav-top-item-disabled) {
  background: var(--hnui-neutral-color-7);
}

.hnui-nav-top-item.hnui-nav-top-item-selected:hover {
  background: var(--hnui-brand-color9);
}

/* Active 状态 */
.hnui-nav-top-item:active:not(.hnui-nav-top-item-disabled) {
  background: var(--hnui-neutral-color-6);
}

.hnui-nav-top-item.hnui-nav-top-item-selected:active {
  background: var(--hnui-brand-color8);
}

/* Disabled 状态 */
.hnui-nav-top-item.hnui-nav-top-item-disabled {
  color: var(--hnui-disabled-color) !important;
  cursor: not-allowed;
}

.hnui-nav-top-item.hnui-nav-top-item-disabled .hnui-icon,
.hnui-nav-top-item.hnui-nav-top-item-disabled .hnui-nav-arrow {
  color: var(--hnui-disabled-color);
}

/* Expanded 状态 */
.hnui-nav-top-item.hnui-nav-top-item-expanded {
  background: var(--hnui-brand-color9);
  color: var(--hnui-brand-color-normal);
}

.hnui-nav-top-item.hnui-nav-top-item-expanded .hnui-icon,
.hnui-nav-top-item.hnui-nav-top-item-expanded .hnui-nav-arrow {
  color: var(--hnui-brand-color-normal);
}

.hnui-nav-top-item.hnui-nav-top-item-expanded .hnui-nav-arrow {
  transform: rotate(180deg);
}

/* 顶部导航下拉菜单 */
.hnui-nav-top-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: transparent;
  border: 1px solid var(--hnui-border-color);
  border-radius: 6px;
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.06);
  padding: 8px;
  margin-top: 8px;
  z-index: 1000;
}

.hnui-nav-top-dropdown-item {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--hnui-neutral-color-2);
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}

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

/* 顶部导航右侧工具栏 */
.hnui-nav-top-tools {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.hnui-nav-top-tool-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 8px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.2s;
}

.hnui-nav-top-tool-item .hnui-icon {
  font-size: 18px;
  color: var(--hnui-neutral-color-2);
}

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

/* === 暗色模式适配 === */
.dark .hnui-nav-side-item.hnui-nav-side-item-selected {
  background: var(--hnui-brand-color10);
}

.dark .hnui-nav-side-item:hover:not(.hnui-nav-side-item-disabled) {
  background: var(--hnui-neutral-color-7);
}

.dark .hnui-nav-side-item.hnui-nav-side-item-selected:hover {
  background: var(--hnui-brand-color10);
}

.dark .hnui-nav-side-item:active:not(.hnui-nav-side-item-disabled) {
  background: var(--hnui-neutral-color-6);
}

.dark .hnui-nav-side-item.hnui-nav-side-item-selected:active {
  background: var(--hnui-brand-color9);
}

.dark .hnui-nav-top {
  border-bottom-color: var(--hnui-neutral-color-6);
}

.dark .hnui-nav-top-item:hover:not(.hnui-nav-top-item-disabled) {
  background: var(--hnui-neutral-color-7);
}

.dark .hnui-nav-top-item.hnui-nav-top-item-selected:hover {
  background: var(--hnui-brand-color10);
}

.dark .hnui-nav-top-item:active:not(.hnui-nav-top-item-disabled) {
  background: var(--hnui-neutral-color-6);
}

.dark .hnui-nav-top-item.hnui-nav-top-item-selected:active {
  background: var(--hnui-brand-color9);
}

.dark .hnui-nav-top-item.hnui-nav-top-item-expanded {
  background: var(--hnui-brand-color10);
}

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

.dark .hnui-nav-top-dropdown-item:hover {
  background: var(--hnui-neutral-color-7);
}

.dark .hnui-nav-top-tool-item:hover {
  background: var(--hnui-neutral-color-7);
}

侧边导航 ​

侧边导航: 可根据业务诉求定制宽度,宽度范围200-256px,中间宽度以8的倍数为档位变化

图标导航: 60-80px，中间宽度以2的倍数为档位变化

一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题
一级标题一级标题二级标题二级标题三级标题三级标题一级标题一级标题一级标题
一级标题一级标题二级标题二级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题一级标题一级标题一级标题
查看代码
html
<div class="hnui-nav-side">
  <div class="hnui-nav-side-header"></div>
  <div class="hnui-nav-side-content">
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item hnui-nav-side-item-selected">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
    </a>
  </div>
  <div class="hnui-nav-side-setting">
    <i class="hnui-icon hnui-icon-still-more"></i>
  </div>
</div>
html
<div class="hnui-nav-side">
  <div class="hnui-nav-side-header"></div>
  <div class="hnui-nav-side-content">
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right-expand hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <span class="hnui-nav-side-item-second">二级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <span class="hnui-nav-side-item-second">二级标题</span>
      <i class="hnui-icon-chevron-right-expand hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <span class="hnui-nav-side-item-third">三级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item hnui-nav-side-item-selected">
      <span class="hnui-nav-side-item-third">三级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
  </div>
  <div class="hnui-nav-side-setting">
    <i class="hnui-icon hnui-icon-still-more"></i>
  </div>
</div>
html
<div class="hnui-nav-side hnui-nav-icon">
  <div class="hnui-nav-side-header"></div>
  <div class="hnui-nav-side-content">
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
    </a>
    <a href="#" class="hnui-nav-side-item hnui-nav-side-item-selected">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
    </a>
  </div>
  <div class="hnui-nav-side-setting">
    <i class="hnui-icon hnui-icon-still-more"></i>
  </div>
</div>
html
<div class="hnui-nav-side">
  <div class="hnui-nav-side-header"></div>
  <div class="hnui-nav-side-content">
    <a href="#" class="hnui-nav-side-item hnui-nav-side-item-selected">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right-expand hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item hnui-nav-side-item-hover">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right-expand hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item hnui-nav-side-item-active">
      <span class="hnui-nav-side-item-second">二级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item hnui-nav-side-item-disabled">
      <span class="hnui-nav-side-item-second">二级标题</span>
      <i class="hnui-icon-chevron-right-expand hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <span class="hnui-nav-side-item-third">三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <span class="hnui-nav-side-item-third">三级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
  </div>
  <div class="hnui-nav-side-setting">
    <i class="hnui-icon hnui-icon-still-more"></i>
  </div>
</div>

侧边导航状态 ​

一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题
二级标题
三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
二级标题
三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
二级标题
三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
三级标题
查看代码
html
<div class="hnui-nav-side">
  <div class="hnui-nav-side-header"></div>
  <div class="hnui-nav-side-content">
    <a href="#" class="hnui-nav-side-item hnui-nav-side-item-selected">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right-expand hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item hnui-nav-side-item-hover">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right-expand hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item hnui-nav-side-item-active">
      <span class="hnui-nav-side-item-second">二级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item hnui-nav-side-item-disabled">
      <span class="hnui-nav-side-item-second">二级标题</span>
      <i class="hnui-icon-chevron-right-expand hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <span class="hnui-nav-side-item-third">三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题三级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <span class="hnui-nav-side-item-third">三级标题</span>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
    <a href="#" class="hnui-nav-side-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>一级标题</span>
      <i class="hnui-icon-chevron-right"></i>
    </a>
  </div>
  <div class="hnui-nav-side-setting">
    <i class="hnui-icon hnui-icon-still-more"></i>
  </div>
</div>

顶部导航 ​

顶部导航 高度固定,宽度以屏幕适配

查看代码
html
<div class="hnui-nav-top">
  <div class="hnui-nav-top-logo">
    <div>logo</div>
  </div>
  <div class="hnui-nav-top-menu">
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item hnui-nav-top-item-selected">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
  </div>
  <div class="hnui-nav-top-tools">
    <div class="hnui-nav-top-tool-item">
      <i class="hnui-icon hnui-icon-search"></i>
    </div>
    <div class="hnui-nav-top-tool-item">
      <i class="hnui-icon hnui-icon-mail"></i>
    </div>
    <div class="hnui-nav-top-tool-item">
      <i class="hnui-icon hnui-icon-setup"></i>
    </div>
    <div class="hnui-nav-top-tool-item">
      <IconUser class="hnui-icon"></IconUser>
    </div>
  </div>
</div>
html
<div class="hnui-nav-top">
  <div class="hnui-nav-top-logo">
    <div>logo</div>
  </div>
  <div class="hnui-nav-top-menu">
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <div
      class="hnui-nav-top-item hnui-nav-top-item-expanded"
      style="position: relative"
    >
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
      <i class="hnui-icon hnui-icon-chevron-down hnui-nav-arrow"></i>
      <div class="hnui-nav-top-dropdown">
        <a href="#" class="hnui-nav-top-dropdown-item">二级选项</a>
        <a href="#" class="hnui-nav-top-dropdown-item">二级选项</a>
        <a href="#" class="hnui-nav-top-dropdown-item">二级选项</a>
      </div>
    </div>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
  </div>
  <div class="hnui-nav-top-tools">
    <div class="hnui-nav-top-tool-item">
      <i class="hnui-icon hnui-icon-search"></i>
    </div>
    <div class="hnui-nav-top-tool-item">
      <i class="hnui-icon hnui-icon-mail"></i>
    </div>
    <div class="hnui-nav-top-tool-item">
      <i class="hnui-icon hnui-icon-setup"></i>
    </div>
    <div class="hnui-nav-top-tool-item">
      <IconUser class="hnui-icon"></IconUser>
    </div>
  </div>
</div>

导航状态 ​

查看代码
html
<div class="hnui-nav-top">
  <div class="hnui-nav-top-logo">
    <div>logo</div>
  </div>
  <div class="hnui-nav-top-menu">
    <a href="#" class="hnui-nav-top-item hnui-nav-top-item-selected">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
  </div>
</div>
html
<div class="hnui-nav-top">
  <div class="hnui-nav-top-logo">
    <div>logo</div>
  </div>
  <div class="hnui-nav-top-menu">
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item" style="background: var(--hnui-neutral-color-7);">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
  </div>
</div>
html
<div class="hnui-nav-top">
  <div class="hnui-nav-top-logo">
    <div>logo</div>
  </div>
  <div class="hnui-nav-top-menu">
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item" style="background: var(--hnui-neutral-color-6);">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
  </div>
</div>
html
<div class="hnui-nav-top">
  <div class="hnui-nav-top-logo">
    <div>logo</div>
  </div>
  <div class="hnui-nav-top-menu">
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a class="hnui-nav-top-item hnui-nav-top-item-disabled">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
  </div>
</div>
html
<div class="hnui-nav-top">
  <div class="hnui-nav-top-logo">
    <div>logo</div>
  </div>
  <div class="hnui-nav-top-menu">
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <a href="#" class="hnui-nav-top-item">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
    </a>
    <div class="hnui-nav-top-item hnui-nav-top-item-expanded">
      <i class="hnui-icon hnui-icon-bullet-point"></i>
      <span>菜单</span>
      <i class="hnui-icon hnui-icon-chevron-down hnui-nav-arrow"></i>
    </div>
  </div>
</div>

统一UI

Copyright © 2024