PanelTitle Overview

TechUI Panel Title is a dedicated suite of title components designed specifically for the ScifiPanel series.

In sci-fi or data dashboard interfaces, a title is not just text; it is a critical element for defining visual hierarchy. This library provides two distinct technical approaches corresponding to "heavy sci-fi" and "lightweight flat" styles, both supporting flexible positioning and scaling.

Series Comparison

To meet varying performance and visual requirements, the title components are divided into two sub-series:

Scifi Series (Heavy Sci-Fi)

Core Technology: SVG · Style: Hardcore · Textured

• Rendering: Based on SVG vector drawing, featuring complex geometric structures, chamfers, and light-flow details.
• Use Cases: Main panel titles, core HUD data annotations, and modules requiring strong visual impact.
• Advantages: Rich in detail, no distortion when scaled, and supports complex bracket and base forms.
• Prefix: ScifiPanelTitle...

Tui Series (Lightweight Minimalist)

Core Technology: CSS · Style: Flat · Performance

• Rendering: Drawn using pure CSS + HTML, resulting in a very small footprint and near-zero rendering overhead.
• Use Cases: Headers for dense lists, secondary information cards, mobile devices, or low-performance environments.
• Advantages: Extremely lightweight and easy to override styles via CSS, making it suitable for high-volume rendering.
• Prefix: TuiPanelTitle...

Naming and Aliases

To balance development stability with code readability, the library employs a dual-naming strategy. Every component has a fixed original serial name and a semantic alias.

• Original Serial Name (Fixed Serial Name):
  • Examples: ScifiPanelA1, TuiPanelTitleA2.
  • This is the underlying physical ID composed of "Prefix + Category + Serial Number." It is permanently fixed and suitable for low-level encapsulation or automation tools.
• Semantic Alias:
  • Examples: ScifiPanelAlt, TuiPanelTitleRod.
  • These are shortcuts based on appearance styles or design metaphors (e.g., Alt/Variant, Rod). They are intended to improve business code readability and are recommended for daily development.

Note: As design languages evolve, individual aliases may undergo semantic fine-tuning or renaming in later versions. While compatibility is prioritized, please monitor change logs during major version upgrades.

Component Family

Scifi Series (SVG)

Component Name	Keywords	Description
ScifiPanelTitleAlt	Base, Horizontal	Standard Base Type. Features top/bottom brackets or covers; ideal as a main panel title.
ScifiPanelTitleDuo	Brackets, Focus	Bracket Wrapped Type. Features curved or mechanical brackets on both sides to emphasize a "locked" feel; ideal for HUDs.
ScifiPanelTitlePipe	Side, Vertical	Side Vertical Bar Type. Vertical solid or double-line indicators that only support side-docking; ideal for list headers.

Tui Series (CSS)

Component Name	Keywords	Description
TuiPanelTitleEave	Bar, Minimal	Minimalist Horizontal Bar. A single decorative line above the text; the top choice for flat designs.
TuiPanelTitleRod	Pill, Side	Side Short Vertical Bar. A pill-shaped indicator next to the text that occupies minimal space.

Universal API Quick Reference

Both the Scifi and Tui series share a standardized set of Props to ensure a consistent development experience.

Property	Description	Default Value
title	Title Content. The text to be displayed.	"SCIFI HEADER"
position	Horizontal Position. 'center', 'left', 'right'.	null
offset	Margin Offset. Pixel distance from the edge (px).	—
scale	Scale Ratio. Scales the entire title component.	1
fontSize	Font Size. Directly overrides the default style.	—
appearance	Appearance Variant. Different variants like 'A', 'B', etc..	'A'
decorationColorAlt	Color Inversion. Swaps the highlight and focus colors.	false

Quick Start

Typically, Title components are placed inside a ScifiPanel and adjusted via position and offset to appear "embedded" within the panel border.

<script setup>
import { ScifiPanelPawn } from '@techui/scifi-panel'
import { ScifiPanelTitleAlt, TuiPanelTitleRod } from '@techui/panel-title'
</script>

<template>
  <div class="dashboard">
    
    <ScifiPanelPawn>
      <ScifiPanelTitleAlt 
        title="MAIN SYSTEM" 
        position="center" 
        :scale="1.2"
      />
      <div class="content">...</div>
    </ScifiPanelPawn>

    <ScifiPanelPawn>
      <TuiPanelTitleRod 
        title="Log Entry 01" 
        position="left" 
        :offset="20"
      />
      <div class="list">...</div>
    </ScifiPanelPawn>

  </div>
</template>

Customization System

The two series use different CSS variable prefixes to avoid interference.

Scifi Series Variables

Mainly controls SVG fill and stroke.

.my-scifi-title {
  --sf-panti-focus: #0ea5e9;  /* Primary Color (SVG Stroke/Fill) */
  --sf-panti-hlite: #bae6fd;  /* Decorative Color */
  --sf-panti-fc: #e0f2fe;     /* Text Color */
}

Tui Series Variables

Mainly controls CSS borders and backgrounds.

.my-tui-title {
  --tui-panti-focus: #10b981; /* Primary Color */
  --tui-panti-hlite: #34d399; /* Highlight Color */
  --tui-panti-fc: #ecfdf5;    /* Text Color */
}