ScifiPanelClip

⚡WASM Powered

🧬Ported from [DataV]

ScifiPanelClip is a powerful shield-type 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-10). It serves as a heavy-duty enhanced version of DV5 (Zone). While it continues the classic "rectangle + four corners" layout in terms of structure, DV6 utilizes widened lines and high-saturation color fills at the four corners, significantly increasing the visual weight of the component.

This design grants the container an indestructible "Energy Shield" texture, as if providing strong physical isolation between the internal content and the external environment. It is ideal for carrying core business data, critical monitoring screens, or main control consoles, conveying psychological hints of safety and stability while ensuring clear boundaries.

Note: This component can be invoked via ScifiPanelDV6 or its semantic alias ScifiPanelClip.

Basic Usage

Default Form

By default, DV6 renders a high-contrast border: the base lines are thin, while the L-shaped brackets at the four corners are significantly thickened and highlighted.

<template>
  <div style="width: 450px; height: 300px;">
    <ScifiPanelClip>
      <div class="shield-content">
        <h3>CORE SYSTEM</h3>
        <p>Protection Level: MAX</p>
      </div>
    </ScifiPanelClip>
  </div>
</template>

Visual Variants

The design focus of DV6 is on "robustness," so its variant configurations are mainly used to adjust visual impact.

Structural Breakdown (Structure)

You can independently control the base border lines (borderd) and the heavy corner decorations (decoration).

• borderd: false: Hides the connecting lines, keeping only the heavy brackets at the four corners to create an open layout.
• decoration: false: Hides the brackets at the four corners, keeping only the base rectangular lines, instantly transforming it into a minimalist border.

<template>
  <div class="grid">
    <ScifiPanelClip :borderd="false">
      <div class="p-4">Open Shield</div>
    </ScifiPanelClip>

    <ScifiPanelClip :decoration="false">
      <div class="p-4">Closed Line</div>
    </ScifiPanelClip>
  </div>
</template>

Industrial Reinforcement (Heavy Industrial)

Combined with borderWidth and background blur, you can create a very thick industrial panel style.

<template>
  <ScifiPanelClip 
    :borderWidth="3"
    :backgroundBlur="true"
    :backgroundOpacity="0.6"
  >
    <div class="content">ARMORED GLASS</div>
  </ScifiPanelClip>
</template>

Energy Overload (Glow)

When glow is enabled, the thickened brackets at the four corners produce a strong halo, as if the shield is fully charged.

<template>
  <ScifiPanelClip 
    :glow="true" 
    className="dv6-overload"
  />
</template>

CSS Variable

The color logic of DV6 is perfectly suited for high-contrast color schemes.

Case Study: Golden Compass Style

This style uses golden yellow as the highlight decoration and deep brown as the background, creating a visual experience suitable for royalty or high-level commanders.

<template>
  <ScifiPanelClip 
    className="panel-gold-shield"
    :backgroundOpacity="0.8"
    :glow="true"
  >
    <div class="command-center">
      COMMANDER AUTHORIZED
    </div>
  </ScifiPanelClip>
</template>

<style lang="less">
.panel-gold-shield {
  /* Base Border: Dark Gold/Bronze */
  --sf-panel-bd: #92400e;
  
  /* Powerful Brackets: Bright Gold */
  --sf-panel-hlite: #f59e0b;
  
  /* Background: Deep Brown */
  --sf-panel-bg: rgba(69, 26, 3, 0.85);
  
  /* Glow: Golden light */
  --sf-panel-glow: #fbbf24;
}
</style>

API Reference

Props

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