ScifiPanelTitleAlt

⚡WASM Powered

🏅Original

ScifiPanelTitleAlt is the standard bracket component within the TechUI Scifi Panel Title series.

It is a classic horizontal extension title component. Visually, it carries the title text via a horizontal line with sci-fi angled folds, featuring an iconic Trapezoidal Tab structure in the center or on the sides. This design makes it appear like a precision bracket used to secure data modules rather than a simple text label.

As the most versatile title component in the ScifiPanel series, it offers extremely high adaptability:

• Suspension Mode: Placed at the top of a panel as a standard floating title.
• Support Mode: Placed at the bottom of a panel as a visual base.
• Flexible Alignment: Supports left, center, and right alignment to perfectly suit different layout requirements.

Tip: This component can be invoked using ScifiPanelTitleA1 or its semantic alias ScifiPanelTitleAlt.

Basic Usage

Default Form

By default (appearance="A"), A1 renders as a top-base title. The decorative line is located below the text, with both ends slightly upturned to form a stable bracket structure. The title is displayed in the center by default.

<template>
  <div class="panel-container">
    <ScifiPanelTitleAlt title="SYSTEM MONITOR" />
    
    <ScifiPanelTitleAlt 
      title="LONG RANGE SENSOR ARRAY DATA" 
      :fontSize="18"
    />
  </div>
</template>

Appearance

A1 provides two base styles optimized for different vertical positions.

Mode Comparison

• Type A (Default): Top-Base Type.

  • Features: Decorative lines are located below the text, appearing as an "underlined bracket".
  • Scenario: Suitable for standard titles at the top of a panel.

• Type B: Bottom-Base Type.

  • Features: Decorative lines are located above the text, appearing as an "overlined cover" (inverted structure).
  • Scenario: Suitable for titles placed at the bottom of a panel or as "ceiling" style decorations.

<template>
  <div class="grid">
    <ScifiPanelTitleAlt appearance="A" title="TOP TITLE" />

    <ScifiPanelTitleAlt appearance="B" title="BOTTOM STYLE" />
  </div>
</template>

Layout and Positioning

A1 supports flexible horizontal positioning to meet left, center, or right alignment needs.

Alignment (Position)

Control the horizontal position of the title within its parent container via the position attribute.

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

Offset Fine-tuning

Used in conjunction with the offset attribute, you can adjust the distance of the title from the left or right edge (in pixels).

<template>
  <ScifiPanelTitleAlt 
    title="SECTOR A" 
    position="left" 
    :offset="50"
  />

  <ScifiPanelTitleAlt 
    title="STATUS OK" 
    position="right" 
    :offset="50" 
  />
</template>

Visual

Decoration Color Alternation (Color Alt)

• decorationColorAlt: Swaps the highlight color and the focus color.
• By default, text and primary lines use the Focus color, while the Highlight color is used for accents.
• When enabled, the color scheme is reversed, which can be used to create striking "warning titles".

Scale

The scale attribute allows for the overall scaling of the title component (including text and graphics). This is the best way to adjust the visual weight of the title.

<template>
  <ScifiPanelTitleAlt 
    title="WARNING" 
    :scale="1.5"
    :decorationColorAlt="true"
  />
</template>

CSS Variable

The ScifiPanelTitle series uses a CSS variable system prefixed with --sf-panti-.

Case: Holo Blue Style

This example defines a holographic blue title with a strong sense of glow.

<template>
  <ScifiPanelTitleAlt 
    className="title-holo" 
    title="HOLO INTERFACE"
  />
</template>

<style lang="less">
.title-holo {
  /* Text and main line color */
  --sf-panti-focus: #0ea5e9; /* Sky Blue */
  
  /* Decorative accent color */
  --sf-panti-hlite: #bae6fd; /* Bright White-Blue */
  
  /* Text color (usually follows focus, can also be specified separately) */
  --sf-panti-fc: #e0f2fe;
  
  /* Font size and weight */
  --sf-panti-fz: 20px;
  --sf-panti-fw: bold;
}
</style>

Variable Dictionary

The following are the primary CSS variables supported by ScifiPanelTitleAlt:

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)
--sf-panti-lh	Line height	30px
Graphic Styles
--sf-panti-focus	Primary line color (SVG Fill/Stroke)	var(--scifi-focus)
--sf-panti-hlite	Decorative accent color	var(--scifi-hlite)
--sf-panti-bgop	Background opacity	1
--sf-panti-scale	Component scale ratio	var(--cpt-panti-scale)

API Reference

Props

Attribute	Description	Type	Default Value
title	Title content. Displayed text string	String	"SCIFI HEADER"
appearance	Appearance variant. 'A' (Under-bracket), 'B' (Over-cover)	String	'A'
position	Horizontal position. 'center', 'left', 'right'	String	'center'
offset	Margin offset. Pixel distance from left/right edge	Number	—
scale	Scale ratio. Overall enlargement/reduction	Number	1
fontSize	Font size (px). Overrides CSS variables	Number	—
fontWeight	Font weight. e.g., 'bold', '600'	String	—
decorationColorAlt	Decorative variant. Swaps highlight and focus colors	Boolean	false
className	Custom class name	String	—
width	Title container width (px). Usually auto-adapts; can be manually specified for long titles	Number	—

Slots

Slot Name	Description
default	Custom title content (if icons are needed). Overrides the title attribute.