Appearance
Select 选择器
下拉选择器，用于从一组选项中选择一个或多个值。
CSS样式
全部 select 样式代码：
查看代码
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-select {
position: relative;
display: inline-block;
width: 260px;
box-sizing: border-box;
}
.hnui-select .hnui-checkbox {
margin-right: 4px;
}
/* 选择器输入区域 */
.hnui-select-selector {
position: relative;
display: flex;
align-items: center;
min-height: 32px;
padding: 0 30px 0 10px;
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: 1.5;
}
.hnui-select-selector-hover {
border-color: var(--hnui-brand-color-normal);
}
/* 选择器文本 */
.hnui-select-selection-text {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* placeholder 样式 */
.hnui-select-selection-placeholder {
opacity: 0.4;
color: var(--hnui-neutral-color-2);
}
/* 箭头图标容器 */
.hnui-select-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);
pointer-events: none;
}
/* 展开时箭头旋转 */
.hnui-select.hnui-select-open .hnui-select-arrow {
transform: translateY(-50%) rotate(180deg);
}
/* Hover 状态 */
.hnui-select-selector:hover {
border-color: var(--hnui-brand-color-normal);
}
/* Focus 状态 */
.hnui-select.hnui-select-focused .hnui-select-selector,
.hnui-select.hnui-select-open .hnui-select-selector {
z-index: 1;
border-color: var(--hnui-brand-color-normal);
}
/* Disabled 状态 */
.hnui-select.hnui-select-disabled .hnui-select-selector {
background: var(--hnui-disabled-bg-color);
color: var(--hnui-disabled-color);
cursor: not-allowed;
}
.hnui-select.hnui-select-disabled:hover .hnui-select-selector {
border-color: var(--hnui-disabled-color);
}
/* 下拉菜单容器 */
.hnui-select-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 1050;
max-height: 256px;
overflow-y: auto;
border: 1px solid var(--hnui-border-color);
border-radius: 3px;
box-sizing: border-box;
display: none;
}
.hnui-select-open .hnui-select-dropdown {
display: block;
}
/* 展示模式 - 下拉菜单占位不浮动 */
.hnui-select-display .hnui-select-dropdown {
position: static;
margin-top: 4px;
display: block;
}
/* 下拉菜单选项列表 */
.hnui-select .hnui-select-dropdown-list {
margin: 0 !important;
padding: 6px !important;
list-style: none;
}
/* 单个选项 */
.hnui-select-option {
position: relative;
display: flex;
align-items: center;
min-height: 28px;
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;
padding: 4px 8px;
margin-top: 4px;
}
/* 选项 Hover 状态 */
.hnui-select-option:hover {
background-color: var(--hnui-info-bg);
}
.hnui-select-option-hover {
background-color: var(--hnui-info-bg);
}
/* 选中的选项 */
.hnui-select-option-selected {
background-color: var(--hnui-brand-color9);
color: var(--hnui-brand-color);
font-weight: 500;
display: inline-block;
width: 100%;
height: 100%;
}
/* 禁用的选项 */
.hnui-select-option-disabled {
color: var(--hnui-disabled-color);
cursor: not-allowed;
}
/* 选项文本 */
.hnui-select-option-content {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 选中标记图标 */
.hnui-select-option-check {
margin-left: 8px;
color: var(--hnui-brand-color-normal);
font-size: 12px;
}
/* === 尺寸变体 === */
/* Small 尺寸 */
.hnui-select-sm .hnui-select-selector {
min-height: 24px;
padding: 0 24px 0 8px;
font-size: 13px;
}
.hnui-select-sm .hnui-select-arrow {
right: 8px;
}
.hnui-select-sm .hnui-select-option {
min-height: 24px;
padding: 2px 6px;
font-size: 13px;
}
/* Large 尺寸 */
.hnui-select-lg .hnui-select-selector {
min-height: 40px;
padding: 0 36px 0 12px;
font-size: 16px;
}
.hnui-select-lg .hnui-select-arrow {
right: 12px;
font-size: 14px;
}
.hnui-select-lg .hnui-select-option {
min-height: 32px;
padding: 4px 8px;
font-size: 16px;
}
/* === 多选模式 === */
/* 多选选择器 */
.hnui-select-multiple .hnui-select-selector {
min-height: 32px;
padding: 2px 30px 2px 4px;
flex-wrap: wrap;
}
/* 多选标签容器 */
.hnui-select-selection-overflow {
display: flex;
flex-wrap: wrap;
gap: 4px;
flex: 1;
max-width: 100%;
}
/* === 分组选择器 === */
/* 分组标题 */
.hnui-select-option-group {
padding: 0;
}
.hnui-select-option-group-label {
padding: 8px 7px 4px;
font-size: 12px;
line-height: 1.5;
color: var(--hnui-neutral-color-4);
font-weight: 500;
cursor: default;
user-select: none;
}
.hnui-select-option-group-list {
margin: 0;
padding: 0;
list-style: none;
}
/* 分组内的选项 */
.hnui-select-option-group-list .hnui-select-option {
padding-left: 14px;
}
/* === 分割线选择器 === */
/* 选项分割线 */
.hnui-select-option-divider {
height: 1px;
margin: 4px 0;
background-color: var(--hnui-neutral-color-6);
border: none;
padding: 0;
pointer-events: none;
}
/* === 辅助类 === */
/* 完整宽度 */
.hnui-select-block {
width: 100%;
display: block;
}
/* 隐藏原生 select（如果需要使用原生 select 作为底层） */
.hnui-select-native {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: -1;
}单选选择器
默认高：32px 宽：260px
请选择内容
- 选择器选项 1
- 选择器选项 2
- 选择器选项 3
- 选择器选项 4
- 选择器选项 5
查看代码
html
<div class="hnui-select hnui-select-display hnui-select-open">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text hnui-select-selection-placeholder">
请选择内容
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 3</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 4</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 5</span>
</li>
</ul>
</div>
</div>选择器输入框状态
选择器的不同交互状态：Default（默认）、Hover（悬停）、Focus（聚焦）、Disabled（禁用）。
未选择的状态:
Normal
请选择内容
Hover
请选择内容
Focus
请选择内容
- 选择器选项 1
- 选择器选项 2
- 选择器选项 3
- 选择器选项 4
- 选择器选项 5
Disabled
请选择内容
查看代码
html
<div class="hnui-select">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text hnui-select-selection-placeholder">
请选择内容
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
</div>html
<div class="hnui-select">
<div class="hnui-select-selector hnui-select-selector-hover">
<span class="hnui-select-selection-text hnui-select-selection-placeholder">
请选择内容
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
</div>html
<div class="hnui-select hnui-select-display hnui-select-focused hnui-select-open">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text hnui-select-selection-placeholder">
请选择内容
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-up"></i>
</span>
</div>
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 3</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 4</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 5</span>
</li>
</ul>
</div>
</div>html
<div class="hnui-select hnui-select-disabled">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text hnui-select-selection-placeholder">
请选择内容
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
</div>已选择的状态:
filled/Normal
选择器选项 2
filled/Hover
选择器选项 2
filled/Focus
选择器选项 2
- 选择器选项 1
- 选择器选项 2
- 选择器选项 3
- 选择器选项 4
- 选择器选项 5
filled/Disabled
选择器选项 2
查看代码
vue
<div class="hnui-select">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text">
选择器选项 2
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
</div>vue
<div class="hnui-select">
<div class="hnui-select-selector" style="border-color: var(--hnui-brand-color-normal);">
<span class="hnui-select-selection-text">
选择器选项 2
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
</div>vue
<div class="hnui-select hnui-select-display hnui-select-focused hnui-select-open">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text">
选择器选项 2
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-up"></i>
</span>
</div>
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option hnui-select-option-selected">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 3</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 4</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 5</span>
</li>
</ul>
</div>
</div>vue
<div class="hnui-select hnui-select-disabled">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text">
选择器选项 2
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
</div>多选选择器
通过多选模式，可以同时选择多个选项，已选中的选项会以标签形式显示在输入框中。
请选择内容
- 选择器选项 1
- 选择器选项 2
- 选择器选项 3
- 选择器选项 4
- 选择器选项 5
查看代码
vue
<div class="hnui-select hnui-select-multiple hnui-select-display hnui-select-open">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text hnui-select-selection-placeholder">
请选择内容
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<div class="hnui-checkbox">
<input class="hnui-checkbox-input" type="checkbox" name="fieldName" id="checkbox1" value="1" />
</div>
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option">
<div class="hnui-checkbox">
<input class="hnui-checkbox-input" type="checkbox" name="fieldName" id="checkbox1" value="1" />
</div>
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
<li class="hnui-select-option">
<div class="hnui-checkbox">
<input class="hnui-checkbox-input" type="checkbox" name="fieldName" id="checkbox1" value="1" />
</div>
<span class="hnui-select-option-content">选择器选项 3</span>
</li>
<li class="hnui-select-option">
<div class="hnui-checkbox">
<input class="hnui-checkbox-input" type="checkbox" name="fieldName" id="checkbox1" value="1" />
</div>
<span class="hnui-select-option-content">选择器选项 4</span>
</li>
<li class="hnui-select-option">
<div class="hnui-checkbox">
<input class="hnui-checkbox-input" type="checkbox" name="fieldName" id="checkbox1" value="1" />
</div>
<span class="hnui-select-option-content">选择器选项 5</span>
</li>
</ul>
</div>
</div>选择器大小
选择器提供三种尺寸：Small（24px）、Default（32px）、Large（40px）。
Small
选择器选项 2
- 选择器选项 1
- 选择器选项 2
- 选择器选项 3
- 选择器选项 4
- 选择器选项 5
Default
选择器选项 3
- 选择器选项 1
- 选择器选项 2
- 选择器选项 3
- 选择器选项 4
- 选择器选项 5
Large
选择器选项 1
- 选择器选项 1
- 选择器选项 2
- 选择器选项 3
- 选择器选项 4
- 选择器选项 5
查看代码
vue
<div class="hnui-select hnui-select-sm hnui-select-display hnui-select-open">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text">
选择器选项 2
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option hnui-select-option-selected">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 3</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 4</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 5</span>
</li>
</ul>
</div>
</div>vue
<div class="hnui-select hnui-select-display hnui-select-open">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text">
选择器选项 3
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
<li class="hnui-select-option hnui-select-option-selected">
<span class="hnui-select-option-content">选择器选项 3</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 4</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 5</span>
</li>
</ul>
</div>
</div>vue
<div class="hnui-select hnui-select-lg hnui-select-display hnui-select-open">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text">
选择器选项 1
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option hnui-select-option-selected">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 3</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 4</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 5</span>
</li>
</ul>
</div>
</div>分割线选择器
在选项之间添加分割线，用于区分不同类型的选项。
请选择内容
- 选择器选项 1
- 选择器选项 2
- 选择器选项 3
- 选择器选项 4
- 选择器选项 5
查看代码
vue
<div class="hnui-select hnui-select-display hnui-select-open">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text hnui-select-selection-placeholder">
请选择内容
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
<li class="hnui-select-option-divider"></li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 3</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 4</span>
</li>
<li class="hnui-select-option-divider"></li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 5</span>
</li>
</ul>
</div>
</div>分组选择器
使用分组标题将选项进行分类展示，便于用户快速找到目标选项。
请选择内容
- A类型
- 选择器选项 1
- 选择器选项 2
- B类型
- 选择器选项 3
- 选择器选项 4
查看代码
vue
<div class="hnui-select hnui-select-display hnui-select-open">
<div class="hnui-select-selector">
<span class="hnui-select-selection-text hnui-select-selection-placeholder">
请选择内容
</span>
<span class="hnui-select-arrow">
<i class="hnui-icon-chevron-down"></i>
</span>
</div>
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option-group">
<div class="hnui-select-option-group-label">A类型</div>
<ul class="hnui-select-option-group-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
</ul>
</li>
<li class="hnui-select-option-group">
<div class="hnui-select-option-group-label">B类型</div>
<ul class="hnui-select-option-group-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 3</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 4</span>
</li>
</ul>
</li>
</ul>
</div>
</div>选择器选项状态
选择器选项不同交互状态：Default（默认）、Hover（悬停）、Selected（选中）、Disabled（禁用）。
Normal
- 选择器选项 1
- 选择器选项 2
Hover
- 选择器选项 1
- 选择器选项 2
Selected
- 选择器选项 1
- 选择器选项 2
Disabled
- 选择器选项 1
- 选择器选项 2
查看代码
html
<div class="hnui-select hnui-select-display hnui-select-open">
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
</ul>
</div>
</div>html
<div class="hnui-select hnui-select-display hnui-select-open">
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option hnui-select-option-hover">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
</ul>
</div>
</div>html
<script setup>
import DocItem from '../../components/DocItem.vue';
</script>
<template>
<div>
<DocItem label="Normal" :col="1">
<!-- #region select-Options-Default -->
<div class="hnui-select hnui-select-display hnui-select-open">
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
</ul>
</div>
</div>
<!-- #endregion select-Options-Default -->
</DocItem>
<DocItem label="Hover" :col="1">
<!-- #region select-Options-Hover -->
<div class="hnui-select hnui-select-display hnui-select-open">
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option hnui-select-option-hover">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
</ul>
</div>
</div>
<!-- #endregion select-Options-Hover -->
</DocItem>
<DocItem label="Selected" :col="1">
<!-- #region select-Selected-Focus -->
<div class="hnui-select hnui-select-display hnui-select-open">
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option hnui-select-option-selected">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
</ul>
</div>
</div>
<!-- #endregion select-Selected-Focus -->
</DocItem>
<DocItem label="Disabled" :col="1">
<!-- #region select-Options-Disabled -->
<div class="hnui-select hnui-select-display hnui-select-open">
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option hnui-select-option-disabled">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
</ul>
</div>
</div>
<!-- #endregion select-Options-Disabled -->
</DocItem>
</div>
</template>
<style scoped>
@import "./select.css";
</style>html
<div class="hnui-select hnui-select-display hnui-select-open">
<div class="hnui-select-dropdown">
<ul class="hnui-select-dropdown-list">
<li class="hnui-select-option">
<span class="hnui-select-option-content">选择器选项 1</span>
</li>
<li class="hnui-select-option hnui-select-option-disabled">
<span class="hnui-select-option-content">选择器选项 2</span>
</li>
</ul>
</div>
</div>