ScifiPanelVeil

⚡WASM Powered

🧬Ported from [DataV]

ScifiPanel-Veil is an asymmetric tactical container within the TechUI Scifi Panel series.

It is ported and refactored from the open-source project @jiaminghi/data-view (originally dv-border-box-13). It breaks the symmetry conventions of traditional panels, adopting a unique "Diagonal Balance" design language. It is composed of prominent Chamfers and three-segment dashed line decorations, while the other two corners remain minimalist.

This asymmetric construction breaks the rigidity of the interface, creating a dynamic "slanting trend." It is extremely suitable for left-right split layouts (e.g., achieving symmetrical correspondence through flipping) or for carrying data modules that need to emphasize fluidity and a sense of change, making the interface layout more agile.

Tip: This component can be invoked via ScifiPanelDV8 or its semantic alias ScifiPanelVeil.

Basic Usage

Default Form

By default, DV8 renders a border with diagonal decorations. The top-left and bottom-right corners feature chamfers and dashed line details.

<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelVeil>
      <div class="tactical-box">
        <h3>SECTOR A</h3>
      </div>
    </ScifiPanelVeil>
  </div>
</template>

Visual Variants

Due to its diagonal design, the most important configuration for DV8 is rotation and mirroring to adapt to different layout positions.

Rotation and Layout (Rotate)

Through the rotate attribute, you can change the position of the heavy chamfers.

• None (Default): Decorations are at the top-left & bottom-right.
• rotate="y": Horizontal mirror. Decorations change to top-right & bottom-left.
• rotate="x": Vertical mirror. Decorations change to bottom-left & top-right.
• rotate="all" (or "z"): Central rotation of 180 degrees.

<template>
  <div class="grid">
    <ScifiPanelVeil>
      <div class="p-4">Mode A</div>
    </ScifiPanelVeil>

    <ScifiPanelVeil rotate="y">
      <div class="p-4">Mode B</div>
    </ScifiPanelVeil>
  </div>
</template>

Structure Control (Structure)

• borderd: Controls whether to display the thin solid lines connecting the chamfers.
• decoration: Controls the dashed line decoration details at the chamfers.

<template>
  <ScifiPanelVeil 
    :borderd="false" 
    :backgroundOpacity="0.6"
  >
    <div class="content">CHAMFER BLOCK</div>
  </ScifiPanelVeil>
</template>

Cyber Glow

When glow is enabled, the dashed decorations at the chamfers become very striking, appearing like flashing indicator lights.

<template>
  <ScifiPanelVeil 
    :glow="true" 
    className="dv8-neon"
  />
</template>

CSS Variable

The tactical style of DV8 is perfect for dark-themed military-inspired color schemes.

Case: Night Ops Style

This style uses deep blues and grays to simulate the interface of night-vision goggles or a tactical tablet.

<template>
  <ScifiPanelVeil 
    className="panel-night-ops"
    :backgroundBlur="true"
    :backgroundOpacity="0.5"
    rotate="y"
  >
    <div class="ops-info">
      MISSION TIME: 02:00:00
    </div>
  </ScifiPanelVeil>
</template>

<style lang="less">
.panel-night-ops {
  /* Base border: Gray-blue */
  --sf-panel-bd: #374151;
  
  /* Dashed decoration: Bright white/cyan */
  --sf-panel-hlite: #e5e7eb;
  
  /* Background: Deep gray-blue */
  --sf-panel-bg: rgba(17, 24, 39, 0.8);
  
  /* Glow: Cold light */
  --sf-panel-glow: #60a5fa;
}
</style>

API Reference

Props

Prop	Description	Type	Default
rotate	Rotation Mode. Controls diagonal direction (x, y, z/all)	String	—
decoration	Decoration Switch. Whether to show dashed details at chamfers	Boolean	true
borderd	Border Switch. Whether to show connecting lines	Boolean	true
borderWidth	Border line width (px)	Number	—
backgroundOpacity	Background opacity (0-1)	Number	—
backgroundBlur	Whether to enable background frosted glass effect	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!