Appearance
Tabs 选项卡
用于承载同一层级下不同页面或类别的组件，方便用户在同一个页面框架下进行快速切换。
CSS样式
全部 tabs 样式代码:
查看代码
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
/* === Tabs 容器样式 === */
.hnui-tabs-container {
border: 1px solid var(--hnui-border-color);
border-radius: 6px;
background-color: var(--hnui-bg-color);
box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.hnui-tabs-container-vertical {
display: flex;
min-width: 400px;
}
/* === Tabs 基础样式 === */
.hnui-tabs {
--hnui-tabs-item-padding-x: 16px;
--hnui-tabs-item-padding-y: 12px;
--hnui-tabs-item-font-size: 14px;
--hnui-tabs-item-line-height: 22px;
--hnui-tabs-bar-height: 2px;
--hnui-tabs-gap: 0;
display: flex;
position: relative;
}
/* === 水平选项卡（默认） === */
.hnui-tabs-horizontal {
flex-direction: row;
border-bottom: 1px solid var(--hnui-border-color);
}
/* === 垂直选项卡 === */
.hnui-tabs-vertical {
flex-direction: column;
border-right: 1px solid var(--hnui-border-color);
}
/* === 选项卡导航列表 === */
.hnui-tabs-nav {
display: flex;
gap: var(--hnui-tabs-gap);
list-style: none;
margin: 0;
padding: 0;
}
.hnui-tabs-horizontal .hnui-tabs-nav {
flex-direction: row;
}
.hnui-tabs-vertical .hnui-tabs-nav {
flex-direction: column;
}
/* === 选项卡项 === */
.hnui-tabs-item {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: var(--hnui-tabs-item-padding-y) var(--hnui-tabs-item-padding-x);
font-size: var(--hnui-tabs-item-font-size);
line-height: var(--hnui-tabs-item-line-height);
color: var(--hnui-text-color);
cursor: pointer;
transition: color 0.2s;
user-select: none;
white-space: nowrap;
margin-top: 0;
}
.hnui-tabs-item:hover {
color: var(--hnui-brand-color-hover);
}
/* === 选中状态 === */
.hnui-tabs-item-active {
color: var(--hnui-brand-color-normal);
}
/* === 禁用状态 === */
.hnui-tabs-item-disabled {
color: var(--hnui-disabled-color);
cursor: not-allowed;
}
.hnui-tabs-item-disabled:hover {
color: var(--hnui-disabled-color);
}
/* === 选中指示条（水平） === */
.hnui-tabs-horizontal .hnui-tabs-item-active::after {
content: "";
position: absolute;
bottom: -1px;
left: var(--hnui-tabs-item-padding-x);
right: var(--hnui-tabs-item-padding-x);
height: var(--hnui-tabs-bar-height);
background-color: var(--hnui-brand-color-normal);
transition: all 0.3s;
}
/* === 选中指示条（垂直） === */
.hnui-tabs-vertical .hnui-tabs-item-active::after {
content: "";
position: absolute;
top: var(--hnui-tabs-item-padding-y);
bottom: var(--hnui-tabs-item-padding-y);
right: -1px;
width: var(--hnui-tabs-bar-height);
background-color: var(--hnui-brand-color-normal);
transition: all 0.3s;
}
/* === 图标 === */
.hnui-tabs-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
}
/* === 关闭按钮 === */
.hnui-tabs-item-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
font-size: 12px;
color: var(--hnui-neutral-color-4);
transition: color 0.2s;
}
.hnui-tabs-item-close:hover {
color: var(--hnui-text-color);
}
.hnui-tabs-item-disabled .hnui-tabs-item-close {
color: var(--hnui-disabled-color);
}
.hnui-tabs-item-disabled .hnui-tabs-item-close:hover {
color: var(--hnui-disabled-color);
}
/* === 添加按钮 === */
.hnui-tabs-add {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--hnui-tabs-item-padding-y) var(--hnui-tabs-item-padding-x);
font-size: 16px;
color: var(--hnui-neutral-color-4);
cursor: pointer;
transition: color 0.2s;
margin-top: 0;
}
.hnui-tabs-add:hover {
color: var(--hnui-brand-color-hover);
}
/* === 大尺寸 === */
.hnui-tabs-lg {
--hnui-tabs-item-padding-x: 20px;
--hnui-tabs-item-padding-y: 14px;
--hnui-tabs-item-font-size: 16px;
--hnui-tabs-item-line-height: 24px;
}
/* === 内容区域 === */
.hnui-tabs-content {
padding: 16px;
background-color: var(--hnui-bg-color);
min-height: 120px;
}
.hnui-tabs-container-vertical .hnui-tabs-content {
flex: 1;
}
/* === 暗色模式适配 === */
.dark .hnui-tabs-container {
border-color: var(--hnui-neutral-color-6);
background-color: var(--hnui-bg-color);
}
.dark .hnui-tabs-horizontal {
border-bottom-color: var(--hnui-neutral-color-6);
}
.dark .hnui-tabs-vertical {
border-right-color: var(--hnui-neutral-color-6);
}
.dark .hnui-tabs-item {
color: var(--hnui-neutral-color-3);
}
.dark .hnui-tabs-item:hover {
color: var(--hnui-brand-color-hover);
}
.dark .hnui-tabs-item-active {
color: var(--hnui-brand-color-normal);
}
.dark .hnui-tabs-item-disabled {
color: var(--hnui-disabled-color);
}
.dark .hnui-tabs-item-close {
color: var(--hnui-neutral-color-4);
}
.dark .hnui-tabs-item-close:hover {
color: var(--hnui-neutral-color-2);
}
.dark .hnui-tabs-add {
color: var(--hnui-neutral-color-4);
}
.dark .hnui-tabs-add:hover {
color: var(--hnui-brand-color-hover);
}
.dark .hnui-tabs-content {
background-color: var(--hnui-bg-color);
}默认选项卡
- 默认选项
- 默认选项
- 默认选项
- 默认选项
- 默认选项
- 默认选项
查看代码
html
<div class="hnui-tabs-container">
<div class="hnui-tabs hnui-tabs-horizontal">
<ul class="hnui-tabs-nav">
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item hnui-tabs-item-active">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
</ul>
</div>
<div class="hnui-tabs-content">
<!-- 内容区域 -->
</div>
</div>图标选项卡
- 默认选项
- 默认选项
- 默认选项
- 默认选项
- 默认选项
查看代码
html
<div class="hnui-tabs-container">
<div class="hnui-tabs hnui-tabs-horizontal">
<ul class="hnui-tabs-nav">
<li class="hnui-tabs-item">
<span class="hnui-tabs-item-icon">
<i class="hnui-icon hnui-icon-still-more"></i>
</span>
<span>默认选项</span>
</li>
<li class="hnui-tabs-item hnui-tabs-item-active">
<span class="hnui-tabs-item-icon">
<i class="hnui-icon hnui-icon-still-more"></i>
</span>
<span>默认选项</span>
</li>
<li class="hnui-tabs-item">
<span class="hnui-tabs-item-icon">
<i class="hnui-icon hnui-icon-still-more"></i>
</span>
<span>默认选项</span>
</li>
<li class="hnui-tabs-item">
<span class="hnui-tabs-item-icon">
<i class="hnui-icon hnui-icon-still-more"></i>
</span>
<span>默认选项</span>
</li>
<li class="hnui-tabs-item">
<span class="hnui-tabs-item-icon">
<i class="hnui-icon hnui-icon-still-more"></i>
</span>
<span>默认选项</span>
</li>
</ul>
</div>
<div class="hnui-tabs-content">
<!-- 内容区域 -->
</div>
</div>增减选项卡
- 默认选项
- 默认选项
- 默认选项
- 默认选项
- 默认选项
查看代码
html
<div class="hnui-tabs-container">
<div class="hnui-tabs hnui-tabs-horizontal">
<ul class="hnui-tabs-nav">
<li class="hnui-tabs-item">
<span>默认选项</span>
<span class="hnui-tabs-item-close">
<i class="hnui-icon hnui-icon-close"></i>
</span>
</li>
<li class="hnui-tabs-item hnui-tabs-item-active">
<span>默认选项</span>
<span class="hnui-tabs-item-close">
<i class="hnui-icon hnui-icon-close"></i>
</span>
</li>
<li class="hnui-tabs-item">
<span>默认选项</span>
<span class="hnui-tabs-item-close">
<i class="hnui-icon hnui-icon-close"></i>
</span>
</li>
<li class="hnui-tabs-item">
<span>默认选项</span>
<span class="hnui-tabs-item-close">
<i class="hnui-icon hnui-icon-close"></i>
</span>
</li>
<li class="hnui-tabs-item">
<span>默认选项</span>
<span class="hnui-tabs-item-close">
<i class="hnui-icon hnui-icon-close"></i>
</span>
</li>
<li class="hnui-tabs-add">
<i class="hnui-icon hnui-icon-plus"></i>
</li>
</ul>
</div>
<div class="hnui-tabs-content">
<!-- 内容区域 -->
</div>
</div>基础状态
- 默认选项
- 默认选项
- 默认选项
- 默认选项
- 默认选项
查看代码
html
<div class="hnui-tabs-container">
<div class="hnui-tabs hnui-tabs-horizontal">
<ul class="hnui-tabs-nav">
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item hnui-tabs-item-active">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item hnui-tabs-item-disabled">默认选项</li>
</ul>
</div>
<div class="hnui-tabs-content">
<!-- 内容区域 -->
</div>
</div>不同位置选项卡
顶部
- 默认选项
- 默认选项
- 默认选项
- 默认选项
- 默认选项
左
- 默认选项
- 默认选项
- 默认选项
- 默认选项
- 默认选项
查看代码
html
<div class="hnui-tabs-container">
<div class="hnui-tabs hnui-tabs-horizontal">
<ul class="hnui-tabs-nav">
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item hnui-tabs-item-active">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
</ul>
</div>
<div class="hnui-tabs-content">
<!-- 内容区域 -->
</div>
</div>html
<div class="hnui-tabs-container hnui-tabs-container-vertical">
<div class="hnui-tabs hnui-tabs-vertical">
<ul class="hnui-tabs-nav">
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item hnui-tabs-item-active">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
</ul>
</div>
<div class="hnui-tabs-content">
<!-- 内容区域 -->
</div>
</div>选项卡尺寸
默认尺寸
- 默认选项
- 默认选项
- 默认选项
- 默认选项
- 默认选项
大尺寸
- 默认选项
- 默认选项
- 默认选项
- 默认选项
- 默认选项
查看代码
html
<div class="hnui-tabs-container">
<div class="hnui-tabs hnui-tabs-horizontal">
<ul class="hnui-tabs-nav">
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item hnui-tabs-item-active">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
<li class="hnui-tabs-item">默认选项</li>
</ul>
</div>
<div class="hnui-tabs-content">
<!-- 内容区域 -->
</div>
</div>