TuiPanelTitleRod

🏅Original

TuiPanelTitleRod is a lightweight lateral indicator component within the TechUI Scifi Panel Title series.

Visually, it deploys an eye-catching rounded vertical short bar on one side of the title text (typically the left). Although simple, this design provides strong visual alignment and emphasis.

Tip: This component can be invoked via TuiPanelTitleA2 or its semantic alias TuiPanelTitleRod.

Basic Usage

Default Form

By default, A2 renders as a vertical short bar next to the text. This design occupies minimal space and provides a strong sense of vertical guidance.

<template>
  <div class="list-item">
    <TuiPanelTitleRod title="SIDE ITEM" />
    
    <ScifiPanelRanger>
      <TuiPanelTitleRod 
        title="MODULE STATUS" 
        position="left"
        :offset="15"
      />
    </ScifiPanelRanger>
  </div>
</template>

Layout and Positioning

TuiPanelTitleRod must be displayed attached to an edge or one side of the text.

Alignment (Position)

• left: The vertical bar is located to the left of the text, and the overall title is left-aligned.
• right: The vertical bar is located to the right of the text, and the overall title is right-aligned.

Offset Fine-tuning

Use the offset attribute to adjust the distance between the title component and the edge of the parent container.

<template>
  <TuiPanelTitleRod 
    title="ONLINE" 
    position="right" 
    :offset="20" 
  />
</template>

Visual

Decoration Color Alternation (Color Alt)

• decorationColorAlt: Swaps the highlight color and the focus color.
• Default (False): The vertical bar uses the Highlight color.
• Enabled (True): The vertical bar uses the Focus color. This can be used to distinguish between "selected items" and "normal items" in a list.

Font and Scale

Directly adjust font styles via Props or use scale for overall scaling.

<template>
  <TuiPanelTitleRod 
    title="ACTIVE TASK" 
    fontWeight="bold"
    :scale="1.2"
    :decorationColorAlt="true"
  />
</template>

CSS Variable

TuiPanelTitleRod uses the same --tui-panti- variable prefix as A1, but in A2, it primarily affects the color of the vertical bar.

Case: Emerald Pill Style

This example defines a green side indicator bar.

<template>
  <TuiPanelTitleRod 
    className="title-emerald" 
    title="SYSTEM OK"
  />
</template>

<style lang="less">
.title-emerald {
  /* Text color */
  --tui-panti-fc: #dcfce7; /* Light Green */
  
  /* Vertical bar color (Highlight) */
  --tui-panti-hlite: #4ade80; /* Emerald Green */
  
  /* Auxiliary color */
  --tui-panti-focus: #166534;
  
  /* Font settings */
  --tui-panti-fz: 14px;
}
</style>

Variable Dictionary

Below are the primary CSS variables supported by TuiPanelTitleRod:

Variable Name	Description	Default Value
Text Styles
--tui-panti-fc	Title text color	var(--font-strong)
--tui-panti-fz	Font size	var(--cpt-panti-fz)
--tui-panti-fw	Font weight	var(--cpt-panti-fw)
Decoration Styles
--tui-panti-hlite	Vertical bar color (Highlight)	var(--scifi-hlite)
--tui-panti-focus	Auxiliary color (Focus)	var(--scifi-focus)
--tui-panti-ofs	Default offset	10px
--tui-panti-scale	Component scale ratio	var(--cpt-panti-scale)

API Reference

Props

Property	Description	Type	Default Value
title	Title Content. The text string to display	String	—
position	Horizontal Position. 'left', 'right'	String	null
offset	Edge Offset. Pixel distance from the edge	Number	—
fontSize	Font size (px)	Number	—
fontWeight	Font weight	String	—
decorationColorAlt	Decorative Variant. Swaps highlight and focus colors	Boolean	false
scale	Scale Ratio. Overall scaling	Number	1
className	Custom class name	String	—

Slots

Slot Name	Description
default	Custom title content.