ScifiPanelProtocol

⚡WASM Powered

⭐Star

🧬Ported from [DataV]

ScifiPanelProtocol is a classically reconstructed container within the TechUI Scifi panel series.

It was ported and reconstructed from the open-source project @jiaminghi/data-view (dv-border-box-11) and underwent deep secondary development and refactoring by aYin to fully integrate it into the unified TechUI configuration system.

It adopts a rigorous "axially symmetric" design language, featuring a fixed and prominent top title bar. The sides of the title bar integrate continuously flickering rectangular breathing lights. This dynamic decoration not only balances the visual center of gravity but also injects continuous vitality into the interface.

This design makes it ideal as a core chart container or a main frame for secondary pages. Its inherent "breathing" sensation effectively breaks the dullness of a data dashboard, enhancing interface activity while emphasizing order.

Note: This component can be invoked via ScifiPanelDV1 or its semantic alias ScifiPanelProtocol.

Basic Usage

Default Form

By default, DV1 renders a border with a top title bar.

⚠️ Title Width Adaptation

The SVG path of DV1 is drawn based on mathematical calculations. If your title is long, you must manually set the titleWidth; otherwise, the border lines will pass through the text.

<template>
  <div style="width: 500px; height: 300px;">
    <ScifiPanelProtocol title="Core Data Monitor" :titleWidth="200">
      <div class="content-box">
        Content Area...
      </div>
    </ScifiPanelProtocol>
  </div>
</template>

Visual Variants

The visual core of DV1 lies in its top decorative animation.

Decorative Animation (Decoration)

There are dynamic flickering rectangular blocks on both sides of the title bar.

• True (Default): Displays dynamic decorations to increase the sense of technology.
• False: Hides decorations, keeping only the static border for a cleaner look.

<template>
  <div class="grid">
    <ScifiPanelProtocol title="Dynamic Mode" />

    <ScifiPanelProtocol 
      title="Static Mode" 
      :decoration="false" 
    />
  </div>
</template>

Color Variant (Color Alt)

Through decorationColorAlt, you can change the color logic of the top decoration (swapping the highlight color and focus color).

• False: Default color scheme.
• True: Uses a variant color scheme, usually to make the decoration more eye-catching.

<template>
  <ScifiPanelProtocol 
    title="High Contrast" 
    :decorationColorAlt="true" 
    :titleWidth="180"
  />
</template>

Borders and Light Effects

Supports standard TechUI border thickness adjustment and global glow effects.

<template>
  <ScifiPanelProtocol 
    title="NEON FRAME" 
    :borderWidth="3"
    :glow="true"
    className="dv1-neon"
  />
</template>

CSS Variable

DV1 perfectly supports the TechUI CSS variable system. By overriding the following variables, you can easily achieve styles such as "Data Blue" or "Amber Alert."

Case Study: Data Blue Style

<template>
  <ScifiPanelProtocol 
    className="panel-data-blue"
    title="SERVER NODE"
    :backgroundBlur="true"
    :backgroundOpacity="0.6"
  />
</template>

<style lang="less">
.panel-data-blue {
  /* Border: Deep Cyan */
  --sf-panel-bd: #1d4ed8;
  
  /* Decoration/Text: Bright Cyan */
  --sf-panel-fc: #60a5fa;
  --sf-panel-hlite: #93c5fd;
  
  /* Background */
  --sf-panel-bg: rgba(30, 58, 138, 0.4);
}
</style>

API Reference

Props

Property	Description	Type	Default
title	Title Content. Displayed in the top center	String	—
titleWidth	Title Width (px). Needs to be manually adapted to text length	Number	150
decoration	Animation Toggle. Whether to show dynamic decorations on both sides of the title	Boolean	true
decorationColorAlt	Decoration Variant. Whether to use contrasting colors for decoration	Boolean	false
borderd	Whether to show the border	Boolean	true
borderWidth	Border line width (px)	Number	—
backgroundOpacity	Background opacity (0-1)	Number	—
backgroundBlur	Whether to enable background glassmorphism	Boolean	false
glow	Whether to enable outer glow	Boolean	false
glowOpacity	Outer glow intensity (0-1)	Number	—
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)

Credits

JiaMing

Github

This component is ported from the open-source library jiaminghi/data-view. On this foundation, deep customization has been performed based on the TechUI global theme, and numerous APIs have been added to significantly enhance the component's capabilities.

We would like to express our sincere gratitude and respect to the author, JiaMing!