ScifiPanelTitleDuo

⚡WASM Powered

🏅Original

ScifiPanelTitleDuo is a lateral-constraint type component within the TechUI Scifi Panel Title series.

It adopts a classic "Dual Brackets" design language. Unlike the A1 model, which emphasizes top and bottom base support, A2 focuses on "defining left and right boundaries" for the content.

Visually, it uses a pair of precision mechanical brackets (supporting curved or angular variants) to forcefully focus the user's gaze on the central text. This construction creates a strong visual experience of "Data Annotation" or "Target Lock," as if the system is tracking the area in real-time.

Its non-intrusive, compact design makes it extremely suitable for hovering over complex 3D scenes/maps or serving as a title for secondary panels.

Tip: This component can be invoked via ScifiPanelTitleA2 or its semantic alias ScifiPanelTitleDuo.

Basic Usage

Default Form

By default (appearance="A"), A2 renders as a pair of curved brackets. The brackets fit tightly against both sides of the text, featuring smooth lines and subtle high-tech decorative points.

<template>
  <div class="panel-container">
    <ScifiPanelTitleDuo title="TARGET LOCKED" />
    
    <ScifiPanelPawn>
      <ScifiPanelTitleDuo 
        title="SYSTEM LOGS" 
        :fontSize="16"
        :offset="20"
      />
    </ScifiPanelPawn>
  </div>
</template>

Appearance

A2 provides two distinct bracket styles, each corresponding to a different UI temperament.

Mode Comparison

• Type A (Default): Curved Brackets.
  • Features: A curved design similar to ( Title ), with fluid lines and minimal visual interference.
  • Scenarios: Suitable for HUD interfaces, airborne floating labels, or modern-style panels.
• Type B: Mechanical Brackets.
  • Features: A right-angle/polygonal design similar to [ Title ] or | Title |, with hard lines and mechanical chamfers.
  • Scenarios: Suitable for military styles, heavy industrial panels, or modules emphasizing "hardcore" attributes.

<template>
  <div class="grid">
    <ScifiPanelTitleDuo appearance="A" title="HUD MODE" />

    <ScifiPanelTitleDuo appearance="B" title="TACTICAL MODE" />
  </div>
</template>

Layout and Positioning

A2 also supports flexible horizontal positioning. Due to its compact structure, it is highly suitable for placement in panel corners.

Alignment (Position)

Control the horizontal position via the position attribute.

• center (Default): Absolute center.
• left: Left aligned.
• right: Right aligned.

Offset Fine-tuning

Bracket titles often require a small amount of padding to avoid being too close to the edge; use offset to adjust this easily.

<template>
  <ScifiPanelTitleDuo 
    title="UNIT 01" 
    position="left" 
    :offset="30"
    appearance="B"
  />

  <ScifiPanelTitleDuo 
    title="ONLINE" 
    position="right" 
    :offset="30" 
    appearance="B"
  />
</template>

Visual

Color Alternation (Color Alt)

• decorationColorAlt: Swaps the highlight color and the focus color.
• When enabled, the bracket colors will invert. For example, under the default theme, brackets might change from blue to white or from dark to bright, making it suitable for a "selected state" title.

Scale

The structure of A2 is very suitable for scaling. By increasing the scale, it can be used as a primary title for the screen (such as "GAME OVER" or "MISSION START").

<template>
  <ScifiPanelTitleDuo 
    title="WARNING" 
    :scale="2.0"
    :decorationColorAlt="true"
    appearance="B"
  />
</template>

CSS Variable

The CSS variables for A2 are compatible with A1, but the visual focus is on the line colors of the brackets.

Case: Ranger Green Style

This example defines a green-toned tactical title, simulating a night vision goggles interface.

<template>
  <ScifiPanelTitleDuo 
    className="title-ranger" 
    title="NIGHT VISION"
    appearance="B"
  />
</template>

<style lang="less">
.title-ranger {
  /* Main line color (Brackets) */
  --sf-panti-focus: #22c55e; /* Pure Green */
  
  /* Decorative accent color */
  --sf-panti-hlite: #4ade80; /* Fluorescent Green */
  
  /* Text color */
  --sf-panti-fc: #86efac;    /* Light Green */
  
  /* Adjust font size */
  --sf-panti-fz: 18px;
}
</style>

Variable Dictionary

Below are the primary CSS variables supported by ScifiPanelTitleDuo:

Variable Name	Description	Default Value
Text Styles
--sf-panti-fc	Title text color	var(--font-strong)
--sf-panti-fz	Font size	var(--cpt-panti-fz)
--sf-panti-fw	Font weight	var(--cpt-panti-fw)
Graphic Styles
--sf-panti-focus	Bracket line color (SVG Stroke)	var(--scifi-focus)
--sf-panti-hlite	Decorative detail color	var(--scifi-hlite)
--sf-panti-bgop	Background opacity	1
--sf-panti-scale	Component scale ratio	var(--cpt-panti-scale)

API Reference

Props

Property	Description	Type	Default
title	Title Content. The text string to display	String	"SCIFI HEADER"
appearance	Appearance Variant. 'A' (Curved), 'B' (Mechanical)	String	'A'
position	Horizontal Position. 'center', 'left', 'right'	String	'center'
offset	Edge Offset. Pixel distance from left/right edge	Number	—
scale	Scale Ratio. Overall zoom in/out	Number	1
fontSize	Font size (px). Overrides CSS variable	Number	—
fontWeight	Font weight. e.g., 'bold', '600'	String	—
decorationColorAlt	Decoration Variant. Swaps highlight and focus colors	Boolean	false
className	Custom class name	String	—
width	Title container width (px). Usually auto-adapts	Number	—

Slots

Slot Name	Description
default	Custom title content (e.g., if including icons). Overrides the title prop.