ScifiPanelAlpha

⚡WASM Powered

⭐Star

🏅Original

ScifiPanelAlpha is the pioneer and core flagship of the TechUI Scifi panel family. As TechUI's first fully self-developed sci-fi panel, it features the most diverse morphological variations in the series and established the signature "Chamfer-Label" design language for the Scifi line.

Built on precision path calculations via Wasm/SVG, this component implements an intelligence-aware chamfered container. Its core highlight lies in its exceptional geometric transformation capabilities—through various combinations of the rotate and directionAlt properties, the title bar can be precisely anchored to any of the four corners of the rectangular container.

It can derive up to 16 distinct visual forms, perfectly adapting to the layout requirements of various complex dashboards.

Note: This component can be invoked using ScifiPanelA1 or its semantic alias ScifiPanelAlpha.

Basic Usage

Default Morphology

By default, the chamfered title is located at the top-left corner of the panel. This is the form most consistent with standard reading habits and is suitable as a general-purpose data card container.

<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelAlpha title="Basic Title">
      <div class="content-area">
        Panel Content...
      </div>
    </ScifiPanelAlpha>
  </div>
</template>

Title Adaptation

Since the panel's geometric path is drawn based on SVG mathematical calculations, the component cannot automatically expand the title bar width based on text length like standard HTML elements. Precise control of the title width is key to using A1 effectively.

• title: The text content of the title.
• titleWidth: The physical width of the title area (in pixels). The default value is 150.

Adaptation Principle

If your title text is long (exceeding 4-5 Chinese characters or equivalent length), or if you use a larger font size, you must manually increase the titleWidth; otherwise, the text will overflow the chamfered background.

<template>
  <div class="grid">
    <ScifiPanelAlpha title="System Status" />

    <ScifiPanelAlpha 
      title="Auxiliary Energy System Monitoring" 
      :titleWidth="220" 
    />

    <ScifiPanelAlpha 
      title="Sector 7 External Environment Real-time Monitoring Data Center" 
      :titleWidth="380" 
    />
  </div>
</template>

Four-Corner Positioning

By combining the directionAlt and rotate attributes, you can place the title bar in any corner of the panel.

Top-Left

• Default: Standard form.
• DirectionAlt: Inverts the chamfer logic (typically manifests as switching between inner and outer chamfers or changing the chamfer direction).

<template>
  <ScifiPanelAlpha title="Top-Left Standard" />
  <ScifiPanelAlpha title="Top-Left Variant" :directionAlt="true" />
</template>

Top-Right

• Rotate Y: Mirror flip along the Y-axis. The text direction is automatically corrected to maintain readability.
• DirectionAlt: Combined with directionAlt to achieve a visual translation effect.

<template>
  <ScifiPanelAlpha title="Top-Right Mirror" rotate="y" />
</template>

Bottom-Left

• Rotate X: Mirror flip along the X-axis. The title bar moves to the bottom.

<template>
  <ScifiPanelAlpha title="Bottom-Left Layout" rotate="x" />
</template>

Bottom-Right

• Rotate Z: 180-degree center rotation (or simultaneous X and Y axis flip).

<template>
  <ScifiPanelAlpha title="Bottom-Right Layout" rotate="z" />
</template>

CSS Variable

ScifiPanelAlpha provides a powerful CSS variable interface. By passing a className, you can override the CSS variables defined inside the component to achieve a skinning effect.

This is extremely useful for distinguishing between different panel states such as "Normal," "Warning," or "Failure."

Case: Red Alert Style

<template>
  <ScifiPanelAlpha 
    title="DANGER ZONE" 
    className="panel-danger"
    :glow="true"
    :glowOpacity="0.8"
  >
    <div class="error-msg">Intrusion Signal Detected</div>
  </ScifiPanelAlpha>
</template>

<style lang="less">
/* Custom Danger Style */
.panel-danger {
  /* Border Color: Bright Red */
  --sf-panel-bd: #ff4d4f;
  
  /* Background Color: Deep Red Semi-transparent */
  --sf-panel-bg: rgba(60, 0, 0, 0.85);
  
  /* Font Color: White */
  --sf-panel-fc: #ffffff;
  
  /* Glow Color: Red Halo */
  --sf-panel-glow: #ff0000;
  
  /* Decoration/Highlight Color: Orange-Red */
  --sf-panel-hlite: #ff9c6e;
}
</style>

Case: Hacker Matrix Style

<template>
  <ScifiPanelAlpha 
    title="MATRIX CORE" 
    className="panel-matrix"
    :decorationAlt="true"
  >
    <div class="code-flow">System Call...</div>
  </ScifiPanelAlpha>
</template>

<style lang="less">
.panel-matrix {
  --sf-panel-bd: #00ff00;       /* Bright Green Border */
  --sf-panel-bg: rgba(0, 20, 0, 0.9); /* Deep Green Background */
  --sf-panel-fc: #00ff00;       /* Green Text */
  --sf-panel-hlite: #ccffcc;    /* Bright Green Highlight */
}
</style>

Visual Variants

In addition to CSS skinning, the component provides geometric variants at the Props level.

Decoration Alt (Hollow Decoration)

When decorationAlt is enabled, the title bar background changes from a "solid block" to a "hollowed line" or "mixed solid/hollow" style. This style has a lighter visual weight and is suitable for overlaying on maps or complex backgrounds.

<template>
  <div class="grid">
    <ScifiPanelAlpha title="Solid Style" />

    <ScifiPanelAlpha title="Hollow Style" :decorationAlt="true" />
    
    <ScifiPanelAlpha title="Alt Color" :decorationColorAlt="true" />
  </div>
</template>

Border and Glow Effects

• borderWidth: Increasing the border thickness creates a "heavy armor" feel.
• borderd: Setting this to false hides the border, leaving only the title chamfer.
• glow: Enables a global outer glow (consumes some performance; recommended to enable only as needed).

API Reference

Props

Property	Description	Type	Default
title	Panel title content	String	—
titleWidth	Title area width (px), must be adjusted manually based on word count	Number	150
directionAlt	Direction Variant. Changes the starting logic of the chamfer	Boolean	false
rotate	Geometric Rotation. Supports 'x' (Vertical), 'y' (Horizontal), 'z' (Diagonal)	String	—
decoration	Whether to display decorative elements	Boolean	true
decorationAlt	Decoration Variant. Switches to hollow/line 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 (px)	Number	—
glowOpacity	Outer glow intensity (0-1)	Number	—
scale	Overall scale ratio	Number	1
className	Custom container class name for binding CSS variables	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)