ScifiPanelZone

⚡WASM Powered

🧬Ported from [DataV]

ScifiPanelZone is a universal area-defining container within the TechUI Scifi panel series.

It was ported and reconstructed from the open-source project @jiaminghi/data-view (original prototype dv-border-box-7). It utilizes a standardized "Corner Reinforcement" design language. On top of the basic rectangular border, the structure is reinforced with prominent L-shaped brackets at the four corners.

Its lines are tougher and sharper, and it supports the independent definition of the base border color and the corner decoration color, allowing for rich color layering. This makes it a highly adaptable all-purpose default container, suitable for any module that requires clear boundaries.

Note: This component can be invoked via ScifiPanelDV5 or its semantic alias ScifiPanelZone.

Basic Usage

Default Form

By default, DV5 renders a rectangle with a thin border, with bold L-shaped brackets covering the four corners.

<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelZone>
      <div class="box-content">
        <span>Module Loaded</span>
      </div>
    </ScifiPanelZone>
  </div>
</template>

Visual Variants

The configuration of DV5 allows you to switch between "strong decoration" and "plain border".

Brackets Decoration (Decoration)

The core visual feature of DV5 is the brackets at the four corners.

• True (Default): Displays L-shaped brackets at the four corners, emphasizing the sense of boundary.
• False: Hides the four corner brackets, keeping only the basic rectangular border.

<template>
  <div class="grid">
    <ScifiPanelZone />

    <ScifiPanelZone :decoration="false">
      <div class="p-4">Plain Border</div>
    </ScifiPanelZone>
  </div>
</template>

Line Thickness (Border Width)

borderWidth simultaneously affects the thickness of both the base border and the corner brackets.

• Increasing this value can make the panel look more solid, similar to heavy armor.

<template>
  <ScifiPanelZone 
    :borderWidth="3" 
    :backgroundOpacity="0.8"
  >
    <div class="p-4">Heavy Duty</div>
  </ScifiPanelZone>
</template>

Glow

When glow is enabled, both the border and the brackets will produce a soft halo. Since the lines of DV5 are continuous, the glow effect is very uniform, making it suitable for holographic windows.

<template>
  <ScifiPanelZone 
    :glow="true" 
    className="dv5-neon"
  />
</template>

CSS Variable

The dual-color structure of DV5 (base line + corner decoration) is ideal for dual-color themes.

Case Study: Crimson Storm Style

This style uses dark red as the base and bright red as the corner highlight to create a warning or combat atmosphere.

<template>
  <ScifiPanelZone 
    className="panel-crimson"
    :backgroundBlur="true"
    :backgroundOpacity="0.6"
  >
    <div class="alert-info">
      WARNING: BREACH DETECTED
    </div>
  </ScifiPanelZone>
</template>

<style lang="less">
.panel-crimson {
  /* Base Border: Dark Red */
  --sf-panel-bd: #7f1d1d;
  
  /* Corner Brackets: Bright Red */
  --sf-panel-hlite: #ef4444;
  
  /* Background: Deep Red-Black */
  --sf-panel-bg: rgba(69, 10, 10, 0.7);
  
  /* Glow: Orange-Red */
  --sf-panel-glow: #f87171;
}
</style>

API Reference

Props

Property	Description	Type	Default
decoration	Decoration Toggle. Whether to show L-shaped brackets at the corners	Boolean	true
borderd	Border Toggle. Whether to show basic rectangular lines	Boolean	true
borderWidth	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
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!