Skip to Content
Components组件总览

组件总览

DearOreUI 组件库覆盖 Minecraft 基岩版 OreUI 设计系统的全部原子组件。每个组件由 component::ComponentSpec 描述，经 ComponentRenderer 渲染为 render::DomNode 树，与普通 Overlay 走同一条 CSSOM 渲染管线。

基础交互

组件说明变体
按钮 Button可点击的 pressable 按钮primary / secondary / neutral / destructive × normal / elevated
输入框 Input文本输入框（inputLegend）hint 提示文本

布局容器

组件说明变体
面板 Panel容器面板，可承载标题/关闭/装饰default / dark / furnace / chest / enderChest / shulkerBox / barrel / modalForm
卡片 CarddetailedCard 卡片base / action / additionalAction
分隔线 Divider表单分隔线—
容器槽 ContainerSlot物品槽default / highlight / touchSelection + 容器色调

数据展示

组件说明变体
文本 Text文本节点heading / body / hint 等
列表项 ListItem列表条目base / action / additionalAction
按键图标 KeyIcon键盘/鼠标按键图标A-Z、F1-F12、方向键、修饰键
气泡 Bubble气泡提示base / action

导航

组件说明变体
标签栏 TabBar标签页导航neutral
筛选栏 FilterBar筛选条件栏base / action

反馈

组件说明变体
提示框 Tooltip悬浮文本提示—
进度条 Progress进度指示radial / linear

主题

页面说明
主题令牌 Theme颜色 / 字体 / 字号 / 纹理令牌

组合组件（阶段 8.1.4）

ComponentKind 共 37 种枚举。上表是 14 个原版风格原子组件；阶段 8.1.4 新增的 23 种组件按用途分五类，全部走同一条 ComponentSpec → ComponentRenderer → DomNode → CSSOM 链路。分类与源码 ComponentKind 的 L/B/N/I/D 分组一致。

布局 L（纯 CSS）

组件说明
堆叠 Stack垂直 / 水平堆叠（orientation 控制方向）
网格 Grid等宽列网格（columns 控制列数）
滚动视图 ScrollView可垂直滚动容器
分组 Section带可选标题的内容分组
弹性间距 Spacerflex: 1 弹性占位

组合 B（由 A 组拼装）

组件拼装结构
弹窗 Modalbackdrop → panel(modalForm) → 标题 + 内容 + 按钮组
菜单 Menupanel → listItem 组
滚动列表 ScrollingListscrollView → listItem 组
下拉 Dropdownbutton 触发 + panel 选项列表
表单 Formpanel → input 组 + formButton + formDivider
顶栏 NavigationBar品牌区 + tabBar + keyIcon
通知 Toastpanel/bubble + 文本 + 时间线动画
搜索框 SearchFieldinput + 放大镜图标
开关 Togglebutton 状态 + Checkmark 图标

导航 N

组件说明
面包屑 Breadcrumb层级路径（text + 分隔符）
分页 Pager圆点/页码按钮组（value 当前页）

交互 I

组件说明
多行输入 TextAreatextarea 元素（input 多行扩展）
滑条 Slider轨道 + 手柄（value/min/max）
加减器 Stepperbutton(−) + 值 + button(+)
选择器 Pickerdropdown + 选项列表

数据 D

组件说明
图标 Icon语义键引用 assets 素材（VanillaAssets::icon）
图片 Imagesrc 或 icon 键引用 png/gif/webm
徽标 Badgebubble + 文本角标

[!NOTE] 组合组件的交互（dropdown 展开、modal 开关、slider 拖动）当前提供渲染与 state 切换；点击事件 → C++ 分发属后续里程碑。

组件规格（ComponentSpec）

所有组件共享同一个声明式规格结构（ComponentSpec.h ）：

字段类型说明
kindComponentKind组件类型（37 种枚举：14 原子 + 23 组合）
labelstring主文本（按钮文字 / 面板标题 / 输入框提示）
variantstring视觉变体（button: primary/secondary/neutral/destructive）
stylestring风格（button: normal/elevated；panel: default/dark/furnace/…）
disabledbool是否禁用
statestring交互状态（default/hovered/focused/pressed/disabled）
eventsvector<string>声明的事件（“click” / “change”）
childrenvector<ComponentSpec>子组件树
bodyvector<DomNode>原始 DOM 内容（panel/card 正文）
orientationstringstack 方向（column/row）
columnsintgrid 列数
iconstringicon/image 素材语义键
srcstringimage 显式 URL
valuestringslider/stepper/pager 当前值
min / maxstringslider 范围

渲染链路

ComponentSpec 树
   │  ComponentRenderer（消费主题令牌）
   ▼
render::DomNode 树
   │  通用 CSSOM 渲染器（与 Overlay 同管线）
   ▼
cohtml::View::ExecuteScript → 真实 OreUI 页面渲染

下一步

按钮 Button