UI packageWeb Components

组件，在真实状态里。

浏览 Haiyue UI 的公开组件，调整参数并观察事件。所有示例都直接运行当前构建产物。

18 components0 runtime deps⌘ K quick search
01

Button

<hy-button>

执行即时操作；支持文本、图标、禁用和无障碍名称。

点击按钮查看事件
查看用法 HTML
<hy-button label="Publish"></hy-button>
<hy-button disabled label="Disabled"></hy-button>
<hy-button icon-only aria-label="Add item">…</hy-button>
02

Input

<hy-input>

文本、数字和颜色输入；原生校验状态会映射到组件外观与事件详情。

修改后离开输入框触发 value-change
typevalueminmaxstepplaceholderdisabledreadonlyrequirednameautocomplete
03

Checkbox

<hy-checkbox>

布尔选择，包含未选、选中、不确定和禁用四种状态。

{ "checked": true, "value": "gi" }
04

Radio

<hy-radio>

通过相同的 name 形成互斥选项组，并在选择时返回 value 和 name。

Viewport mode

用 name="viewport" 连接一组单选项。

选择一个视口模式
05

Select

<hy-select>

由 options 属性或 JavaScript 属性提供选项，可开启搜索并禁用单项。

选择渲染质量
06

Tabs

<hy-tabs>

键盘可访问的选项卡列表，面板通过与 value 同名的 slot 关联。

◇
Scene

3 objects · 2 lights · 1 camera

▦
Assets

Browse models, materials and textures.

⌁
Settings

Project-level render and runtime options.

当前值scene
08

Tooltip

<hy-tooltip>

悬停或聚焦时展示辅助文本，支持 12 个方位、延迟和箭头控制。

09

Dialog

<hy-dialog>

原生 modal dialog 封装，管理焦点恢复、Escape、背景点击和关闭原因。

This action removes Ocean Glass from the project. You can’t undo it.

尚未打开
10

Drawer

<hy-drawer>

从四个方向滑入的浮层面板；支持蒙层、Esc 关闭、焦点返回和隐藏后卸载内容。

打开 Drawer；可点击蒙层或按 Esc 关闭
HY
Moonlit HarborScene asset · 24.8 MB

FormatglTF 2.0

Meshes18

Materials12
查看用法 HTML
<hy-drawer heading="Asset details" placement="right"
  mask="true" destroy-on-hidden>
  ...
</hy-drawer>
openheadingplacementmaskdestroyOnHiddenshow()close()drawer-close
11

Notification

<hy-notification>

四种语义通知、六个显示位置和独立倒计时；连续通知以 Z 轴层叠，悬停后展开。

创建通知后查看事件
查看用法 JavaScript
const center = document.querySelector('hy-notification');
center.success({
  message: 'Export complete',
  description: 'The project package is ready.',
  placement: 'topRight',
  duration: 4,
  showProgress: true,
});
typemessagedescriptionplacementdurationshowProgressopen()success()info()warning()error()
12

Border Beam

<hy-border-beam>

沿实时圆角边框运行的流光效果；可调整粗细、速度、颜色和均匀错相的流光数量。

HYRealtime previewSVG path · responsive bounds
查看用法 HTML
<hy-border-beam thickness="2" speed="1.5"
  color="#7dd3fc" count="3">
  ...content
</hy-border-beam>
thicknessspeedcolorcountrefresh()
13

Context Menu

<hy-context-menu>

在指定视口坐标打开；支持鼠标、方向键、Enter、Escape 和焦点管理。

◇Player.controller在此区域右键，或点击下方按钮

openAt(x, y) 会自动约束菜单在可视区域内。

等待打开菜单

Expandable

<hy-expandable>

展开时保留输入内容，按 Escape 恢复大小。打开独立示例

点击放大按钮
14

Split

<hy-split>

可拖拽、可键盘调整的双面板布局，支持方向、比例、最小尺寸和分隔条宽度。

01HierarchyFirst pane
02ViewportSecond pane
拖动分隔条或使用方向键
15

Tree

<hy-tree>

层级数据、展开、范围多选、键盘导航、剪贴板操作和拖放排序。

选择节点；Ctrl/⌘ 与 Shift 支持多选
16

Virtual List

<hy-virtual-list>

只为可视范围与缓冲区创建 DOM；完整列表保留为数据，并使用组件自己的滚动容器。

正在计算可视范围…
查看用法 JavaScript
import { defineVirtualListComponents } from '@haiyue/ui/virtual-list';

defineVirtualListComponents();
const list = document.querySelector('hy-virtual-list');
list.items = records;
list.renderItem = (record, index) => `${index + 1} · ${record.name}`;
list.scrollToIndex(50_000, 'center');
itemsrenderItemitem-heightheightoverscanscrollToIndex()refresh()visible-range-changeitem-click
17

History Controls

<hy-history-controls>

受控的撤销与重做工具栏；宿主负责历史状态，组件只发送操作请求。

点击撤销或重做按钮
18

Range

<hy-range>

支持单值与双拖拽点区间；轨道、已选区间和拖拽点都可通过 CSS 变量或 part 定制。

Single42
Interval22 — 78
拖拽、点击轨道或使用方向键调节
查看用法 HTML + CSS
<hy-range min="0" max="100" step="1" value="42"></hy-range>
<hy-range range lower-value="22" upper-value="78"></hy-range>

hy-range {
  --hy-range-handle-size: 22px;
  --hy-range-handle-radius: 6px;
  --hy-range-track-color: #69bff4;
  --hy-range-rail-height: 6px;
}
minmaxstepvaluerangelowerValueupperValuevaluesdisabledshowValuevalue-inputvalue-change