ScifiPanelRanger

⚡WASM Powered

⭐Star

🧬Ported from [DataV]

ScifiPanelRanger is a vertically constrained 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-6). It utilizes a unique "Lateral Clamping" design language. The visual focus is located on the left and right sides of the panel, defined by thick vertical brackets, while precisely calculated micro-anchors are configured at the four corners.

This design visually constructs a strong "tactical clamping feel," as if the content is securely locked within a vertical channel. It is extremely suitable for constraining vertically arranged information flows (such as system logs, functional menus, timelines) or serving as edge-defining containers on both sides of a layout, effectively enhancing the sense of longitudinal order on the page.

Note: This component can be invoked via ScifiPanelDV3 or its semantic alias ScifiPanelRanger.

Basic Usage

Default Form

By default, DV3 renders a rectangle with a thin border, supplemented by bold vertical bars on the left and right sides and small dots at the four corners.

<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelRanger>
      <div class="list-container">
        <ul>
          <li>Module A [OK]</li>
          <li>Module B [OK]</li>
          <li>Module C [OK]</li>
        </ul>
      </div>
    </ScifiPanelRanger>
  </div>
</template>

Visual Variants

The configuration options for DV3 are mainly focused on the fine-tuning of the "brackets" and "anchors".

Decoration and Border (Decoration & Border)

The structure of DV3 is divided into three layers: background, thin border, and thick decoration.

• decoration: Controls whether the thick vertical bars on the left and right sides are displayed.
• borderd: Controls whether the thin border connecting the entire structure is displayed.

<template>
  <div class="grid">
    <ScifiPanelRanger :borderd="false">
      <div class="p-4">Side Brackets Only</div>
    </ScifiPanelRanger>

    <ScifiPanelRanger :decoration="false">
      <div class="p-4">Dots Only</div>
    </ScifiPanelRanger>
  </div>
</template>

Anchor Customization (Dots)

The details of the anchors at the four corners can be adjusted through parameters, which has been enhanced based on the original DataV component.

• dotSize: The pixel size of the anchors.
• dotOffset: The offset distance of the anchors from the vertices.

<template>
  <ScifiPanelRanger 
    :decoration="false"
    :dotSize="5"
    :dotOffset="8"
    :borderWidth="2"
  >
    <div class="content">Custom Dots</div>
  </ScifiPanelRanger>
</template>

Glow

When glow is enabled, the vertical bars on the left and right and the corner anchors will produce a distinct halo.

<template>
  <ScifiPanelRanger 
    :glow="true" 
    className="dv3-neon"
  />
</template>

CSS Variable

The color scheme of DV3 is primarily defined by two colors: the border color (thin lines) and the highlight color (thick vertical bars + anchors).

Case Study: Titan Grey Style

This style uses low-saturation gray and white to create an industrial texture similar to a mechanical shell.

<template>
  <ScifiPanelRanger 
    className="panel-titan"
    :borderd="false"
    :backgroundOpacity="0.8"
  >
    <div class="mech-info">
      ARMOR STATUS: 100%
    </div>
  </ScifiPanelRanger>
</template>

<style lang="less">
.panel-titan {
  /* Base border color (if any) */
  --sf-panel-bd: #4b5563;
  
  /* Vertical bars and anchors: Bright white */
  --sf-panel-hlite: #f3f4f6;
  
  /* Background color: Dark gray mechanical color */
  --sf-panel-bg: rgba(31, 41, 55, 0.9);
  
  /* Glow color: Cold white */
  --sf-panel-glow: #e5e7eb;
}
</style>

API Reference

Props

Property	Description	Type	Default
decoration	Decoration Toggle. Whether to show the thick vertical bars on the left and right	Boolean	true
borderd	Border Toggle. Whether to show the thin border connecting the whole	Boolean	true
dotSize	Anchor Size (px). Dimensions of the small squares/dots at the corners	Number	2
dotOffset	Anchor Offset (px). Distance of the anchor from the vertex	Number	0
borderWidth	Thin 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!