ScifiPanelVanguard

⚡WASM Powered

⭐Star

🏅Original

ScifiPanelVanguard is a highly structural component with intense visual tension within the TechUI Scifi panel series. If A1 represents streamlined elegance, then A2 represents sharp ambition and industrial precision.

ScifiPanelA2 abandons conventional streamlined chamfers in favor of a unique "Recessed Notch" design language. Visually, the title text does not float on the surface; instead, it is physically "embedded" within the panel. This hard-edged and sharp visual style, much like a vanguard, endows the component with a strong sense of structure and functional implication, making it ideal for displaying key metrics or serving as a container for industrial consoles.

Inheriting the series' geometric transformation engine, A2 also possesses excellent layout adaptability. Through combinations of the rotate and directionAlt properties, you can flexibly deploy this highly recognizable "title notch" to any of the four corners of the panel, perfectly fitting various complex industrial dashboard layouts.

Note: This component can be invoked using ScifiPanelA2 or its semantic alias ScifiPanelPioneer.

Basic Usage

Default Morphology

By default, the title notch is located at the top-left corner of the panel. The width of the notch automatically calculates the SVG path based on titleWidth, ensuring the text is perfectly enclosed.

<template>
  <div style="width: 450px; height: 300px;">
    <ScifiPanelVanguard title="Main Engine Status">
      <div class="content-display">
        <ChartEngineLoad />
      </div>
    </ScifiPanelVanguard>
  </div>
</template>

Title Adaptation

The title in A2 is not just a label; it is a physical notch. The length of the notch directly determines the geometric shape of the panel's edge.

• title: The text embedded in the notch.
• titleWidth: The physical width of the notch (px).

Adaptation Key

The notch is a rigid structure. If the text is too long and titleWidth is insufficient, the text will overflow the notch boundaries, causing visual clipping. Please ensure you adjust this value based on the text length.

<template>
  <div class="grid">
    <ScifiPanelVanguard 
      title="Signal" 
      :titleWidth="80" 
    />

    <ScifiPanelVanguard 
      title="Defense System" 
      :titleWidth="150" 
    />

    <ScifiPanelVanguard 
      title="Auxiliary Energy Module B-03 Status" 
      :titleWidth="260" 
    />
  </div>
</template>

Four-Corner Positioning

Through geometric transformation, you can move the "title notch" to any corner of the rectangle.

Top-Left

• Default: Standard notch.
• DirectionAlt: Start point inversion (typically manifests as a horizontal mirror offset of the notch position, moving it to the top-right).

Top-Right

• DirectionAlt: true (Recommended method, directly moves the notch to the top-right).
• Rotate Y: Mirror flip along the Y-axis.

<template>
  <ScifiPanelVanguard title="Top-Right Layout" :directionAlt="true" />
  
  <ScifiPanelVanguard title="Top-Right Mirror" rotate="y" />
</template>

Bottom-Left

• Rotate X: Flip along the X-axis, moving the notch to the bottom.

<template>
  <ScifiPanelVanguard title="Bottom-Left Monitoring" rotate="x" />
</template>

Bottom-Right

• Rotate Z: 180-degree center rotation.

<template>
  <ScifiPanelVanguard title="Bottom-Right Signature" rotate="z" />
</template>

CSS Variable

A2's rugged style is well-suited for high-contrast color schemes. By overriding CSS variables, you can create various themes such as "High Voltage Warning" or "Military Stealth."

Case: Industrial Amber Warning Style

This style is often used for "Caution" or "Warning" states in industrial control systems.

<template>
  <ScifiPanelVanguard 
    title="HIGH VOLTAGE" 
    className="panel-amber"
    :decorationAlt="true"
    :borderWidth="2"
  >
    <div class="warning-content">
      <icon name="electricity" /> WARNING: HIGH VOLTAGE AREA
    </div>
  </ScifiPanelVanguard>
</template>

<style lang="less">
/* Custom Amber Industrial Style */
.panel-amber {
  /* Border: Orange-Yellow */
  --sf-panel-bd: #f59e0b;
  
  /* Background: Dark Brown Semi-transparent */
  --sf-panel-bg: rgba(40, 20, 0, 0.85);
  
  /* Text: Bright Yellow */
  --sf-panel-fc: #fcd34d;
  
  /* Decoration Highlight: White or Light Yellow */
  --sf-panel-hlite: #ffffff;
  
  /* Glow: Orange Halo */
  --sf-panel-glow: #d97706;
}
</style>

Visual Variants

Precision Decoration (Decoration Alt)

A2's decorationAlt changes the scale details near the notch.

• False (Default): Simple single-layer scale.
• True: More complex double-layer/dashed scale, increasing the feel of a precision instrument.

<template>
  <div class="grid">
    <ScifiPanelVanguard title="Standard" />

    <ScifiPanelVanguard 
      title="Precision" 
      :decorationAlt="true" 
    />
  </div>
</template>

Cyber Neon (Glow)

The notch structure significantly gains a 3D feel when glow is enabled. The lines at the edges look as if they were laser-etched.

<template>
  <ScifiPanelVanguard 
    title="CYBER LINK" 
    :glow="true"
    :glowOpacity="1"
    className="panel-neon"
  />
</template>

API Reference

Props

Property	Description	Type	Default
title	Notch Title. Text embedded in the panel edge	String	—
titleWidth	Notch Width (px). Determines the gap size in the SVG path; must be manually adapted to text length	Number	150
rotate	Geometric Rotation. Supports 'x', 'y', 'z'	String	—
directionAlt	Direction Variant. Inverts the notch starting position (e.g., Top-Left to Top-Right)	Boolean	false
decoration	Whether to display scale decorations next to the notch	Boolean	true
decorationAlt	Decoration Variant. Switches to a more complex precision scale style	Boolean	false
decorationColorAlt	Whether to enable the variant color scheme for decorations	Boolean	false
borderWidth	Border line width (px)	Number	—
borderd	Whether to display the border	Boolean	true
backgroundOpacity	Background opacity (0-1)	Number	—
glow	Whether to enable the outer glow filter	Boolean	false
glowRange	Outer glow diffusion range	Number	—
glowOpacity	Outer glow intensity	Number	—
scale	Overall scale ratio	Number	1
className	Custom container class name	String	—

CSS Variables

You can override the following variables at the component's parent level or via className to control the component's color scheme and appearance.

Variable Name	Description	Default Reference
--sf-panel-bg	Panel background fill color	var(--scifi-bg)
--sf-panel-bgop	Background opacity	var(--cpt-panel-bgop, 1)
--sf-panel-bd	Border line color	var(--scifi-bd)
--sf-panel-bdw	Border line width	var(--cpt-panel-bdw, 1px)
--sf-panel-fc	Title text color	var(--scifi-fc)
--sf-panel-hlite	highlight color	var(--scifi-hlite)
--sf-panel-focus	Focus color	var(--scifi-focus)
--sf-panel-glow	Inner glow color	var(--scifi-focus)
--sf-panel-glowop	Inner glow opacity	var(--cpt-panel-glowop, .5)
--sf-panel-shadow	Container shadow	var(--shadow-weak)
--sf-panel-scale	Overall scaling ratio	var(--cpt-panel-scale)