Skip to Content
Components标签栏 TabBar

标签栏 TabBar

标签页导航栏,用于页面内切换。复用原版 --tabBar* 主题变量,每个标签独立支持状态切换。

用法

#include "component/ComponentSpec.h" using namespace dearoreui::component; ComponentSpec bar; bar.kind = ComponentKind::TabBar; // 每个标签是一个子组件(label + state) ComponentSpec tab1; tab1.kind = ComponentKind::Text; tab1.label = "常规"; tab1.state = "default"; // 当前选中标签用 pressed ComponentSpec tab2; tab2.kind = ComponentKind::Text; tab2.label = "高级"; tab2.state = "default"; bar.children.push_back(tab1); bar.children.push_back(tab2);

注册到页面:

oreui->registerComponent(ModId{"my-mod"}, uiManifest, bar);

属性

字段类型说明
kindComponentKind固定为 ComponentKind::TabBar
childrenvector<ComponentSpec>每个子组件是一个标签(用 labelstate 描述)

标签状态

状态说明
default未选中
pressed选中(当前标签)
hovered / focused悬停 / 聚焦

渲染结构

<div data-component="tabBar"> ← flex 横向布局 <div data-component="tab">常规</div> ← 每个标签独立纹理 + 状态 <div data-component="tab">高级</div> </div>

相关