ScifiPanelQuad

⚡WASM Powered

🧬Ported from [DataV]

ScifiPanelQuad is a universal minimalist 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-2). It adopts a low-noise "Quad-Anchor" design language. The visual structure is extremely pure: a closed loop of fine solid lines outlines the boundary, with micro geometric anchors configured at the four corners.

This "less is more" restrained design grants it exceptional versatility. It can seamlessly integrate into almost any type of UI layout, especially for secondary content areas or high-density data cards that do not need to overwhelm the user, maintaining screen tidiness and breathability while providing necessary boundaries.

Note: This component can be invoked via ScifiPanelDV4 or its semantic alias ScifiPanelQuad.

Basic Usage

Default Form

By default, DV4 renders a rectangle with a thin border and small decorative dots at the four corners.

<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelQuad>
      <div class="info-container">
        <p>System operating normally</p>
        <p>CPU Temperature: 45°C</p>
      </div>
    </ScifiPanelQuad>
  </div>
</template>

Visual Variants

The configuration options of DV4 allow you to control the display logic of "lines" and "dots," conveying different states through details on a minimalist foundation.

Structure Control (Structure)

The visual elements of DV4 are divided into two parts: the base border line (borderd) and corner decorations (decoration).

• borderd: false: Hides the lines, keeping only the four corner anchors (if decoration is on) or the background.
• decoration: false: Hides the four corner anchors, keeping only the rectangular lines.

<template>
  <div class="grid">
    <ScifiPanelQuad :decoration="false">
      <div class="p-4">Frame Only</div>
    </ScifiPanelQuad>

    <ScifiPanelQuad :borderd="false">
      <div class="p-4">Dots Only</div>
    </ScifiPanelQuad>
  </div>
</template>

Anchor Customization (Dots Customization)

You can freely adjust the size and position of the four corner anchors to make them more aggressive or more hidden.

• dotSize: Diameter/size of the anchor (px).
• dotOffset: Inward offset of the anchor from the border vertex (px).

<template>
  <ScifiPanelQuad 
    :dotSize="5"
    :dotOffset="5"
    :borderWidth="2"
  >
    <div class="content">Strong Anchors</div>
  </ScifiPanelQuad>
</template>

Glow

Despite its minimalist design, enabling glow causes the slender lines and anchors to emit a sharp radiance, perfect for high-tech HUD interfaces.

<template>
  <ScifiPanelQuad 
    :glow="true" 
    className="dv4-neon"
  />
</template>

CSS Variable

The color logic of DV4 is very clear: the border color (--sf-panel-bd) controls the lines, and the highlight color (--sf-panel-hlite) controls the anchors at the four corners.

Case Study: Emerald Stealth Style

This style uses dark green tones to create a low-profile, stealthy monitoring interface feel.

<template>
  <ScifiPanelQuad 
    className="panel-emerald"
    :dotSize="4"
    :backgroundOpacity="0.8"
  >
    <div class="stealth-info">
      SIGNAL: STABLE
    </div>
  </ScifiPanelQuad>
</template>

<style lang="less">
.panel-emerald {
  /* Border line: Dark Green */
  --sf-panel-bd: #065f46;
  
  /* Anchor: Fluorescent Green */
  --sf-panel-hlite: #34d399;
  
  /* Background: Ultra-deep Green-Black */
  --sf-panel-bg: rgba(2, 44, 34, 0.9);
  
  /* Glow color */
  --sf-panel-glow: #10b981;
}
</style>

API Reference

Props

Property	Description	Type	Default
decoration	Decoration Toggle. Whether to show anchor decorations at the four corners	Boolean	true
borderd	Border Toggle. Whether to show base rectangular lines	Boolean	true
dotSize	Anchor Size (px). Controls the size of the corner dots/squares	Number	2
dotOffset	Anchor Offset (px). Controls the inward indentation of the anchor from the corner	Number	0
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
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!