交互方式

控制面板默认是隐藏的。TechUI 提供了多种方式来激活显示控制面板，最常用的是使用内置的触发器组件。

使用触发器组件 推荐

<TuiToggleControlPanel> 是一个高度封装的触发按钮，专门用于呼出控制面板。它支持多种外观风格，可以轻松集成到导航栏或侧边栏中。

基础用法

<TuiToggleControlPanel />

外观风格

通过 appearance 属性可以改变组件的形态：

• iconPlain (默认)：纯图标模式，适合顶部导航栏。
• iconButton: 按钮模式，带有背景色和边框。
• toggleRound / toggleRect: 开关模式，适合集成在列表或侧边栏底部。

<TuiToggleControlPanel appearance="iconButton" />

<TuiToggleControlPanel appearance="toggleRect" />

布局方向

通过 direction 属性控制组件内部的排列方向（当包含 Label 时）。

• h (默认)：水平排列。
• v：垂直排列（适合侧边栏收起状态）。

<TuiToggleControlPanel direction="v" />

使用全局方法

在业务逻辑中，您可以通过注入全局方法来编程式地打开面板。

import { inject } from 'vue';

const { controlPanelToggle } = inject('$global');

const openSettings = () => {
  // 切换面板的显示/隐藏状态
  controlPanelToggle();
};

状态驱动

控制面板的显隐本质上是由全局状态 $tState.controlPanel.visible 驱动的。您可以直接修改该状态。

import { inject } from 'vue';

const { $tState } = inject('$global');

const forceOpen = () => {
  $tState.controlPanel.visible = true;
};