UI 组件清单

列出 全部组件 与模板标签（含别名），及其对应的 JS Wrapper 类型。

Quick Start

<!-- 在客户端模板（BUI）中使用组件 -->
<Panel id="root" class="container">
  <Label ref="title" text="Hello" />
  <Button ref="ok" text="确认" />
  <TextField ref="input" placeholder="输入文本..." />
</Panel>

// 在 JS 中获取引用并操作
const title = ref("title")
title.setValueString("标题文字")

const btn = ref("ok")
btn.setOnClick(() => closeUI())

TIP

所有组件均继承 UIElementWrapper 的通用方法（setVisible、addClass、setBackground 等）。

---

1. 基础组件

组件	标签	说明	JS Wrapper
UIElement	Panel, div, element, uielement	通用容器	UIElementWrapper
Label	Label	文本显示（静态/动态）	LabelWrapper
TextElement	text, textelement	文本基类	TextElementWrapper
Button	Button, btn	按钮	ButtonWrapper

2. 输入组件

组件	标签	说明	JS Wrapper
TextField	TextField, input	单行输入	TextFieldWrapper
TextArea	TextArea	多行输入	TextAreaWrapper
Toggle	Toggle, checkbox	复选	ToggleWrapper
Switch	Switch	开关	SwitchWrapper
Selector	Selector, select	下拉选择	SelectorWrapper
SearchComponent	SearchComponent, search	搜索选择	SearchComponentWrapper
ColorSelector	ColorSelector, colorpicker	颜色选择	ColorSelectorWrapper
TagField	TagField, nbtfield	NBT/Tag 输入	TagFieldWrapper

3. 容器组件

组件	标签	说明	JS Wrapper
ScrollerView	ScrollerView, scroll	可滚动容器	ScrollerViewWrapper
Scroller (V)	vscroller, verticalscroller	垂直滚动条	ScrollerWrapper
Scroller (H)	hscroller, horizontalscroller	水平滚动条	ScrollerWrapper
SplitView (H)	splitview.horizontal, hsplitview, hsplit	水平分割	SplitViewWrapper
SplitView (V)	splitview.vertical, vsplitview, vsplit	垂直分割	SplitViewWrapper
TabView	TabView, tabs	标签页容器	TabViewWrapper
Tab	Tab	标签页头	TabWrapper
Menu	Menu	树形菜单	MenuWrapper
TreeList	TreeList	树形列表	TreeListWrapper
VirtualList	VirtualList	虚拟列表	VirtualListWrapper
Dialog	Dialog, modal	对话框	DialogWrapper
Form	Form	表单	FormWrapper
Field	Field	表单字段	FieldWrapper

4. 展示组件

组件	标签	说明	JS Wrapper
ProgressBar	ProgressBar, progress	进度条	ProgressBarWrapper
GraphView	GraphView, graph	可缩放画布	GraphViewWrapper
EntityView	EntityView, entityviewer, entitydisplay	实体展示	EntityViewWrapper
ChatHistoryView	ChatHistoryView, chat-history, chathistory	聊天记录	ChatHistoryViewWrapper
VideoPlayer	VideoPlayer, video	视频播放	UIElementWrapper

WARNING

ChatHistoryView 的 JS Wrapper 是 ChatHistoryViewWrapper（提供 setChatFocused 方法），而非通用 UIElementWrapper。

5. 槽位组件

组件	标签	说明	JS Wrapper
DisplaySlot	DisplaySlot, slot	物品展示槽	DisplaySlotWrapper
ItemSlot	ItemSlot, item-slot	交互槽位	ItemSlotWrapper
InventorySlots	InventorySlots, inventory	玩家背包槽位	InventorySlotsWrapper

6. Ponder 组件

组件	标签	说明	JS Wrapper
PonderElement	Ponder, PonderElement	Ponder 场景视图	PonderElementWrapper
PonderPlayer	PonderPlayer, PonderUI	Ponder 播放器	PonderPlayerWrapper
PonderRuntimeUI	PonderRuntime, PonderRuntimeUI, PonderIndex	Ponder 索引视图	PonderRuntimeUIWrapper

TIP

Ponder 组件的 JS Wrapper 提供完整的播放控制 API（播放/暂停/跳转等），详见 JS API 参考。

7. 内置/特殊组件

组件	标签	说明	JS Wrapper
Teleport	Teleport, portal	传送节点	UIElementWrapper
KeepAlive	KeepAlive	组件缓存	UIElementWrapper
Suspense	Suspense	异步占位	UIElementWrapper
Dynamic Component	component :is=...	动态组件	UIElementWrapper