TuiPanelZero

⭐Star

🏅Original

TuiPanelZero is a lightweight pure CSS container within the TechUI Scifi Panel series.

It stands out in the series because, unlike the ScifiPanel family which relies on complex SVG/WASM path calculations, it is entirely rendered using native CSS (utilizing features like border, box-shadow, and pseudo-elements).

It offers extremely low rendering overhead. It is perfectly suited as a container for high-frequency rendering scenarios (such as large-scale list items) or for wrapping standard UI components that come with rounded corners (like input boxes or button groups), ensuring optimal browser performance while maintaining a high-tech appearance.

Tip: This component can be invoked via TuiPanelA1 or its semantic alias TuiPanelZero.

Basic Usage

Default Form

By default, TuiPanelZero appears as a rectangle with a subtle border and enhanced "L-shaped" angle bracket decorations at the four corners.

<template>
  <div style="width: 100%; height: 200px;">
    <TuiPanelZero>
      <div class="content">
        Pure CSS rendering, high-performance container
      </div>
    </TuiPanelZero>
  </div>
</template>

Visual

Border Radius Settings

This is a unique feature of TuiPanelZero. Through borderRadius, you can freely control whether the panel has a sharp right-angle or a soft rounded corner.

• Right-Angle (0): Close to the tough style of the ScifiPanelB series.
• Rounded Corner (4px - 20px): Suitable for modern UI styles, ideal for wrapping cards or buttons.

<template>
  <div class="grid">
    <TuiPanelZero :borderRadius="0">
      <div class="p-4">Square Mode</div>
    </TuiPanelZero>

    <TuiPanelZero :borderRadius="12">
      <div class="p-4">Round Mode</div>
    </TuiPanelZero>
  </div>
</template>

Angle Brackets Configuration

TuiPanelZero allows you to finely control the geometric shape of the four-corner "brackets." These properties map directly to CSS variables, making adjustments highly flexible.

• angleLength: The length of the bracket arms (px).
• angleWeight: The thickness of the bracket lines (px).
• anglePosition: The offset distance of the bracket from the border (px). Negative values offset outward, while positive values offset inward.

<template>
  <TuiPanelZero 
    :angleLength="20"
    :angleWeight="4" 
    :anglePosition="-2"
    :borderWidth="1"
  >
    <div class="p-4">Heavy Corners</div>
  </TuiPanelZero>
</template>

Minimalist & Glow (Glow & Minimal)

• decoration: Controls the display of the four-corner brackets. When set to false, only the base border is retained.
• borderd: Controls the display of the base thin border.
• glow: Enables the CSS box-shadow glow effect.

<template>
  <TuiPanelZero 
    :decoration="false" 
    :borderd="false"
    :glow="true"
    :glowRange="15"
    :backgroundOpacity="0.8"
  >
    <div class="neon-text">PURE GLOW</div>
  </TuiPanelZero>
</template>

CSS Variable

The color system for TuiPanelZero is very intuitive. You can override the corresponding --tui- variables via className.

TuiPanelZero exposes a very detailed CSS variable interface, allowing you not only to modify colors but also to directly control geometric properties (such as corner length and border radius) through CSS. This is particularly useful for responsive layouts when combined with media queries.

Case: Aurora Cyan Style

This case demonstrates how to define a style with strong glow and custom corner dimensions by overriding variables via a class name.

<template>
  <TuiPanelZero 
    className="panel-aurora"
    :borderRadius="8"
    :glow="true"
  >
    <div class="info">CSS MODULE</div>
  </TuiPanelZero>
</template>

<style lang="less">
.panel-aurora {
  /* --- Color Definitions --- */
  --tui-panel-bd: #06b6d4;       /* Base thin border color */
  --tui-panel-hlite: #ffffff;    /* Four-corner bracket highlight color */
  --tui-panel-bg: rgba(8, 51, 68, 0.8); /* Background color */
  --tui-panel-shadow: rgba(34, 211, 238, 0.6); /* Glow/shadow base color */

  /* --- Geometric Fine-tuning (Optional, can also be passed via Props) --- */
  --tui-panel-angle-length: 20px; /* Lengthen corner brackets */
  --tui-panel-angle-weight: 3px;  /* Thicken corner brackets */
  --tui-panel-glow-range: 15px;   /* Expand glow range */
  --tui-panel-glow-op: 0.8;       /* Increase glow intensity */
}
</style>

API Reference

As it is a pure CSS component, some SVG-specific properties (such as title, rotate, and path related props) do not take effect in this component.

Props (Active List)

Prop Name	Description	Type	Default
borderRadius	Border Radius. Controls the roundness of the corners	Number	2
borderRadiusFix	Radius Correction. Fine-tunes the clipping of internal content	Number	0
angleLength	Angle Length. Controls the length of the corner brackets	Number	15
angleWeight	Angle Weight. Controls the line width of the corner brackets	Number	2
anglePosition	Angle Position. The offset of brackets from the edge	Number	-1
decoration	Whether to show the corner bracket decorations	Boolean	true
borderd	Whether to show the base thin border	Boolean	true
borderWidth	Width of the base border	Number	1
backgroundOpacity	Opacity of the background color (0-1)	Number	1
backgroundBlur	Whether to enable the background frosted glass effect (backdrop-filter)	Boolean	false
blurRange	Frosted glass blur radius (px)	Number	3
glow	Whether to enable outer glow	Boolean	false
glowRange	Outer glow spread range (px)	Number	10
glowOpacity	Outer glow opacity	Number	0.5
className	Custom container class name	String	—

CSS Variables

The following is the complete list of supported CSS variables for TuiPanelZero. You can override these variables at the component parent level or via className.

Variable Name	Description	Default / Dependency
--tui-panel-bd	Color of the base thin border	var(--scifi-bd)
--tui-panel-bdw	Width of the base thin border	1px
--tui-panel-bg	Panel background color	var(--scifi-bg)
--tui-panel-bgop	Background opacity	1
--tui-panel-bgblur	Background frosted glass blur radius	3px
--tui-panel-hlite	Highlight color of the corner brackets	var(--scifi-hlite)
--tui-panel-angle-length	Arm length of the corner brackets	15px
--tui-panel-angle-weight	Line thickness of the corner brackets	2px
--tui-panel-angle-position	Offset of brackets from edge (negative=out, positive=in)	-1px
--tui-panel-bdra	Panel border radius	2px
--tui-panel-bdrafix	Radius correction (for fine-tuning internal content clipping)	0px
--tui-panel-shadow	Color of the shadow or outer glow	var(--shadow-weak)
--tui-panel-glow-range	Spread range of the outer glow (box-shadow)	10px
--tui-panel-glow-op	Opacity of the outer glow	0.5
--tui-panel-focus	Focus state color (if component supports focus)	var(--scifi-focus)
--tui-panel-scale	Overall transform scale ratio	—