ScifiPanelTitlePipe

⚡WASM Powered

🏅Original

ScifiPanelTitlePipe is a lateral-index type component within the TechUI Scifi Panel Title series.

Visually, it deploys a highlighted energy cursor or vertical pipe on the flank of the title text (usually on the left, with support for right-side configuration). This design significantly reduces horizontal space occupancy, providing clear yet unobtrusive visual guidance similar to an index tab on the side of a book.

Tip: This component can be invoked via ScifiPanelTitleA3 or its semantic alias ScifiPanelTitlePipe.

ATTENTION

The design logic of this component is based on side guidance; therefore, position="center" is NOT supported. Please ensure you specify left or right.

Basic Usage

Default Form

By default (appearance="A"), A3 renders as a solid vertical light bar. It typically needs to be paired with the position attribute to place it on the left or right side.

<template>
  <div class="panel-container">
    <ScifiPanelTitlePipe 
      title="SIDEBAR MENU" 
      position="left" 
    />
    
    <ScifiPanelTitlePipe 
      title="STATUS: ONLINE" 
      position="right" 
    />
  </div>
</template>

Appearance

A3 provides two different vertical bar styles with varying levels of detail.

Mode Comparison

• Type A (Default): Solid Light Bar.

  • Features: A single, thick solid vertical bar with high visual weight and prominence.
  • Scenarios: Suitable for primary titles or important status indicators.

• Type B: Double-Line Tech Bar.

  • Features: A vertical bar composed of double thin lines or dashed lines, featuring richer mechanical details.
  • Scenarios: Suitable for secondary titles or UI modules requiring a sense of refinement.

<template>
  <div class="list-group">
    <ScifiPanelTitlePipe appearance="A" title="MAIN QUEST" position="left" />

    <ScifiPanelTitlePipe appearance="B" title="SUB OBJECTIVE" position="left" />
  </div>
</template>

Layout and Positioning

A3 must be attached to an edge for display.

Alignment (Position)

• left: The vertical bar is located to the left of the text, with the overall component left-aligned.
• right: The vertical bar is located to the right of the text, with the overall component right-aligned.
• center: (Not Supported).

Offset Fine-tuning

Use offset to adjust the indentation distance of the title from the container edge. This is very useful in multi-level menus, where different hierarchy levels can be represented through different offset values.

<template>
  <div class="menu">
    <ScifiPanelTitlePipe title="SYSTEM" position="left" :offset="0" />
    
    <ScifiPanelTitlePipe title="LOGS" position="left" :offset="20" appearance="B" />
    
    <ScifiPanelTitlePipe title="ERROR" position="left" :offset="40" appearance="B" />
  </div>
</template>

Visual

Decoration Color Alternation (Color Alt)

• decorationColorAlt: Swaps the highlight color and the focus color.
• The color of the vertical bar will invert. For example, the default blue light bar can be changed to white or a bright color to indicate a "highlighted/selected" state.

Scale

The thickness of the vertical bar and the text size can be adjusted via the scale attribute.

<template>
  <ScifiPanelTitlePipe 
    title="ACTIVE" 
    position="right"
    :scale="1.5"
    :decorationColorAlt="true"
  />
</template>

CSS Variable

The visual core of A3 lies in the color of the vertical bar.

Case: Amber Alert Style

This example defines an amber-colored side warning bar.

<template>
  <ScifiPanelTitlePipe 
    className="title-amber" 
    title="CAUTION" 
    position="left"
  />
</template>

<style lang="less">
.title-amber {
  /* Vertical bar color */
  --sf-panti-focus: #f59e0b; /* Amber */
  
  /* Auxiliary decorative color */
  --sf-panti-hlite: #fcd34d; /* Light Amber */
  
  /* Text color */
  --sf-panti-fc: #fef3c7;
  
  /* Font size */
  --sf-panti-fz: 16px;
}
</style>

Variable Dictionary

Below are the primary CSS variables supported by ScifiPanelTitlePipe:

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)
Graphic Styles
--sf-panti-focus	Primary color of the vertical bar	var(--scifi-focus)
--sf-panti-hlite	Decorative detail color	var(--scifi-hlite)
--sf-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	"SCIFI HEADER"
appearance	Appearance Variant. 'A' (Solid), 'B' (Double-line)	String	'A'
position	Horizontal Position. 'left', 'right' (center NOT supported)	String	'left'
offset	Edge Offset. Pixel distance from the edge	Number	—
scale	Scale Ratio. Overall enlargement/reduction	Number	1
fontSize	Font size (px)	Number	—
fontWeight	Font weight	String	—
decorationColorAlt	Decorative Variant. Swaps highlight and focus colors	Boolean	false
className	Custom class name	String	—
width	Title container width (px)	Number	—

Slots

Slot Name	Description
default	Custom title content.