Appearance
Tree 树结构
CSS样式
全部 tree 样式代码：
查看代码
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 url('../checkbox/checkbox.css');
@import url('../icon/icon.css');
/* ============================================
树形控件容器
============================================ */
.hnui-tree {
font-size: 14px;
color: var(--hnui-text-color);
line-height: 1.5;
}
/* ============================================
树节点
============================================ */
.hnui-tree-node {
position: relative;
display: block;
}
.hnui-tree-node-content {
display: flex;
align-items: center;
padding: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
border-radius: 3px;
}
.hnui-tree-node-content:hover {
background-color: var(--hnui-neutral-color-7);
}
.hnui-tree-node.is-active > .hnui-tree-node-content {
background-color: var(--hnui-neutral-color-7);
color: var(--hnui-brand-color);
}
.hnui-tree-node.is-disabled > .hnui-tree-node-content {
color: var(--hnui-disabled-color);
cursor: not-allowed;
}
.hnui-tree-node.is-disabled .hnui-tree-node-checkbox {
background-color: var(--hnui-brand-color-disabled-bg);
}
.hnui-tree-node.is-disabled > .hnui-tree-node-content:hover {
background-color: transparent;
}
/* ============================================
展开/折叠图标
============================================ */
.hnui-tree-node-expand {
width: 16px;
height: 16px;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 4px;
color: var(--hnui-text-color);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.hnui-tree-node-expand.is-leaf {
visibility: hidden;
}
.hnui-tree-node.is-expanded > .hnui-tree-node-content > .hnui-tree-node-expand {
transform: rotate(90deg);
}
/* ============================================
节点标签
============================================ */
.hnui-tree-node-label {
flex: 1;
padding: 0 4px;
user-select: none;
}
/* ============================================
子节点容器
============================================ */
.hnui-tree-node-children {
padding-left: 20px;
}
/* ============================================
可选择树（带 checkbox）
============================================ */
.hnui-tree-checkable .hnui-tree-node-content {
padding-left: 4px;
}
.hnui-tree-node-checkbox {
margin-right: 8px;
flex-shrink: 0;
}
/* ============================================
操作图标
============================================ */
.hnui-tree-node-actions {
align-items: center;
gap: 8px;
margin-left: auto;
padding-left: 8px;
}
.hnui-tree-node-action {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--hnui-neutral-color-4);
cursor: pointer;
transition: color 0.2s ease;
margin-left: 8px;
}
.hnui-tree-node-action:hover {
color: var(--hnui-text-color);
}
/* ============================================
连接线树
============================================ */
.hnui-tree-line .hnui-tree-node {
position: relative;
}
.hnui-tree-line .hnui-tree-node-content {
position: relative;
z-index: 1;
}
/* 垂直连接线 - 对齐展开箭头中心 */
.hnui-tree-line .hnui-tree-node::before {
content: '';
position: absolute;
left: -8px;
top: 0;
bottom: 0;
width: 1px;
background-color: var(--hnui-border-color);
z-index: 0;
}
/* 水平连接线 */
.hnui-tree-line .hnui-tree-node::after {
content: '';
position: absolute;
left: -8px;
top: 14px;
width: 14px;
height: 1px;
background-color: var(--hnui-border-color);
z-index: 0;
}
/* 最后一个子节点的竖线只到中间 */
.hnui-tree-line .hnui-tree-node:last-child::before {
bottom: auto;
height: 15px;
}
/* 根节点不显示连接线 */
.hnui-tree-line > .hnui-tree-node::before,
.hnui-tree-line > .hnui-tree-node::after {
display: none;
}
/* 子节点容器的垂直线调整 */
.hnui-tree-line .hnui-tree-node-children {
position: relative;
}
/* 展开节点的第一个子节点连接线从父节点内容中间开始 */
.hnui-tree-line
.hnui-tree-node.is-expanded
> .hnui-tree-node-children
> .hnui-tree-node:first-child::before {
top: -8px;
}
/* ============================================
暗色模式适配
============================================ */
.dark .hnui-tree {
color: var(--hnui-neutral-color-2);
}
.dark .hnui-tree-node-content:hover {
background-color: var(--hnui-neutral-color-7);
}
.dark .hnui-tree-node.is-active > .hnui-tree-node-content {
background-color: rgba(31, 120, 255, 0.2);
color: var(--hnui-brand-color);
}
.dark .hnui-tree-node.is-disabled > .hnui-tree-node-content {
color: var(--hnui-disabled-color);
}
.dark .hnui-tree-node-expand {
color: var(--hnui-neutral-color-3);
}
.dark .hnui-tree-node-action {
color: var(--hnui-neutral-color-4);
}
.dark .hnui-tree-node-action:hover {
color: var(--hnui-neutral-color-2);
}
.dark .hnui-tree-line .hnui-tree-node::before,
.dark .hnui-tree-line .hnui-tree-node::after {
background-color: var(--hnui-neutral-color-6);
}基础树
一级树
一级树
一级树
一级树
一级树
一级树
一级树
一级树
查看代码
html
<div class="hnui-tree">
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">二级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">三级树</span>
</div>
</div>
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">三级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand is-leaf"></span>
<span class="hnui-tree-node-label">基础树</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>html
<div class="hnui-tree">
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand"
><i class="hnui-icon hnui-icon-right-small"></i
></span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>可选择树
一级树
一级树
查看代码
html
<div class="hnui-tree hnui-tree-checkable">
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node is-active">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
checked
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node is-active">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
checked
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>html
<div class="hnui-tree hnui-tree-checkable">
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>可功能操作树
一级树
一级树
一级树
查看代码
html
<div class="hnui-tree hnui-tree-checkable">
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input type="checkbox" class="hnui-checkbox-input hnui-tree-node-checkbox" />
<span class="hnui-tree-node-label">一级树</span>
<div class="hnui-tree-node-actions">
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-plus"></i>
</span>
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-bullet-point"></i>
</span>
</div>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
<div class="hnui-tree-node-actions">
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-plus"></i>
</span>
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-bullet-point"></i>
</span>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
<div class="hnui-tree-node-actions">
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-plus"></i>
</span>
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-bullet-point"></i>
</span>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
<div class="hnui-tree-node-actions">
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-plus"></i>
</span>
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-bullet-point"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input type="checkbox" class="hnui-checkbox-input hnui-tree-node-checkbox" />
<span class="hnui-tree-node-label">一级树</span>
<div class="hnui-tree-node-actions">
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-plus"></i>
</span>
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-bullet-point"></i>
</span>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input type="checkbox" class="hnui-checkbox-input hnui-tree-node-checkbox" />
<span class="hnui-tree-node-label">一级树</span>
<div class="hnui-tree-node-actions">
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-plus"></i>
</span>
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-bullet-point"></i>
</span>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input type="checkbox" class="hnui-checkbox-input hnui-tree-node-checkbox" />
<span class="hnui-tree-node-label">一级树</span>
<div class="hnui-tree-node-actions">
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-plus"></i>
</span>
<span class="hnui-tree-node-action">
<i class="hnui-icon hnui-icon-bullet-point"></i>
</span>
</div>
</div>
</div>
</div>连接线树
一级树
一级树
一级树
一级树
查看代码
html
<div class="hnui-tree hnui-tree-checkable hnui-tree-line">
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input type="checkbox" class="hnui-checkbox-input hnui-tree-node-checkbox" />
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input type="checkbox" class="hnui-checkbox-input hnui-tree-node-checkbox" />
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input type="checkbox" class="hnui-checkbox-input hnui-tree-node-checkbox" />
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input type="checkbox" class="hnui-checkbox-input hnui-tree-node-checkbox" />
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input type="checkbox" class="hnui-checkbox-input hnui-tree-node-checkbox" />
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>树状态
normal
一级树
一级树
一级树
一级树
一级树
一级树
Hover
一级树
一级树
一级树
一级树
一级树
一级树
Active
一级树
一级树
一级树
一级树
一级树
一级树
Disabled
一级树
一级树
一级树
一级树
一级树
一级树
一级树
一级树
查看代码
html
<div class="hnui-tree">
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>
<div class="hnui-tree hnui-tree-checkable">
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>html
<div class="hnui-tree">
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content" style="background-color: #f5f7fa">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>
<div class="hnui-tree hnui-tree-checkable">
<div class="hnui-tree-node is-expanded">
<div class="hnui-tree-node-content" style="background-color: #f5f7fa">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>html
<div class="hnui-tree">
<div class="hnui-tree-node is-expanded is-active">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>
<div class="hnui-tree hnui-tree-checkable">
<div class="hnui-tree-node is-expanded is-active">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
checked
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
<div class="hnui-tree-node-children">
<div class="hnui-tree-node is-active">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
checked
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node is-active">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
checked
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
<div class="hnui-tree-node is-active">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
checked
/>
<span class="hnui-tree-node-label">二级树</span>
</div>
</div>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>html
<div class="hnui-tree">
<div class="hnui-tree-node is-disabled">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node is-disabled">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node is-disabled">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node is-disabled">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>
<div class="hnui-tree hnui-tree-checkable">
<div class="hnui-tree-node is-disabled">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
disabled
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node is-disabled">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
disabled
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node is-disabled">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
disabled
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
<div class="hnui-tree-node is-disabled">
<div class="hnui-tree-node-content">
<span class="hnui-tree-node-expand">
<i class="hnui-icon hnui-icon-right-small"></i>
</span>
<input
type="checkbox"
class="hnui-checkbox-input hnui-tree-node-checkbox"
disabled
/>
<span class="hnui-tree-node-label">一级树</span>
</div>
</div>
</div>