Interaction

The control panel is hidden by default. TechUI provides multiple ways to activate and display the control panel, the most common being the use of the built-in trigger component.

Using Trigger Component

<TuiToggleControlPanel> is a highly encapsulated trigger button specifically designed to open the control panel. It supports multiple appearance styles and can be easily integrated into navigation bars or sidebars.

Basic Usage

<TuiToggleControlPanel />

Appearance Styles

You can change the component's form via the appearance prop:

• iconPlain (Default): Pure icon mode, suitable for top navigation bars.
• iconButton: Button mode, with background color and border.
• toggleRound / toggleRect: Switch mode, suitable for integration at the bottom of lists or sidebars.

<TuiToggleControlPanel appearance="iconButton" />

<TuiToggleControlPanel appearance="toggleRect" />

Layout Direction

Control the internal arrangement direction (when a Label is included) via the direction prop.

• h (Default): Horizontal arrangement.
• v: Vertical arrangement (suitable for collapsed sidebar states).

<TuiToggleControlPanel direction="v" />

Using Global Method

In business logic, you can programmatically open the panel by injecting the global method.

import { inject } from 'vue';

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

const openSettings = () => {
  // Toggle the show/hide state of the panel
  controlPanelToggle();
};

State Driven

The visibility of the control panel is essentially driven by the global state $tState.controlPanel.visible. You can modify this state directly.

import { inject } from 'vue';

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

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