ScifiPanelDelta

⚡WASM Powered

🏅Original

ScifiPanelDelta is the lightweight badge index component within the TechUI Scifi panel series.

Unlike A1 and A2, which feature title bars occupying the full width of a row, ScifiPanelA3 adopts a minimalist "Triangular Badge" design language. It cleverly utilizes the geometric dead zones of the panel to integrate index information within a compact triangular area, thereby achieving zero vertical space occupancy.

This "small but beautiful" structural design makes it the best choice for high-density information layouts. It is ideal for multi-module serialization (e.g., 01, 02, 03...), rankings (e.g., No.1, Top), or status identifiers (e.g., Area A, Area B), providing a clear, sharp visual index without interfering with the display of the main content.

Naturally, it also inherits the TechUI geometric transformation engine, supporting the flexible deployment of this "triangular badge" to any of the four corners of the panel via configuration to adapt to different typesetting requirements.

Note: This component can be invoked using ScifiPanelA3 or its semantic alias ScifiPanelDelta.

Basic Usage

Default Morphology

By default, the triangular badge is located at the top-left corner of the panel.

⚠️ Character Length Limit

Due to the physical constraints of the triangular space, A3 strictly limits the length of the title text. It is recommended to place only 2-4 characters (e.g., "01", "A", "No.1", "One"). Excessively long text will directly overflow the triangular area, leading to visual breakdown.

<template>
  <div style="width: 300px; height: 200px;">
    <ScifiPanelDelta title="01">
      <div class="module-content">
        Module 1 Content...
      </div>
    </ScifiPanelDelta>
  </div>
</template>

Four-Corner Positioning

Through the rotate property, you can place this "triangular badge" in any of the four corners of the rectangle, making it perfect for four-quadrant or diagonal layouts.

Top-Left

• Default: Standard badge.

<template>
  <ScifiPanelDelta title="01" />
</template>

Top-Right

• Rotate Y: Mirror flip along the Y-axis. The text is automatically corrected for the mirror effect to maintain readability.

<template>
  <ScifiPanelDelta title="02" rotate="y" />
</template>

Bottom-Left

• Rotate X: Mirror flip along the X-axis; the badge is located at the bottom.

<template>
  <ScifiPanelDelta title="03" rotate="x" />
</template>

Bottom-Right

• Rotate Z: 180-degree center rotation.

<template>
  <ScifiPanelDelta title="04" rotate="z" />
</template>

CSS Variable

The badge of the A3 is very suitable for expressing "levels" or "status". By customizing CSS variables, you can easily create gold, silver, or warning-style panels.

Case: Rank Gold Style

This style is suitable for the first place in a leaderboard or high-priority modules.

<template>
  <ScifiPanelDelta 
    title="No.1" 
    className="panel-gold"
    :decorationColorAlt="true"
    :glow="true"
  >
    <div class="rank-content">
      <span class="score">98.5</span>
    </div>
  </ScifiPanelDelta>
</template>

<style lang="less">
/* Custom Gold Honor Style */
.panel-gold {
  /* Border: Golden Yellow */
  --sf-panel-bd: #fbbf24;
  
  /* Background: Deep Golden Brown semi-transparent */
  --sf-panel-bg: rgba(60, 40, 0, 0.8);
  
  /* Text: Bright Gold */
  --sf-panel-fc: #fcd34d;
  
  /* Decoration/Highlight: White or extremely bright yellow */
  --sf-panel-hlite: #fffbeb;
  
  /* Glow: Gold halo */
  --sf-panel-glow: #d97706;
}
</style>

Visual Variants

Color Alt (Decoration Color Variant)

The decorationColorAlt property of the A3 has a significant impact on visual appearance.

• False (Default): The badge uses the standard theme color.
• True: The badge uses a variant color (usually a highlight or auxiliary color), making the index number more eye-catching and creating contrast with the border.

<template>
  <div class="grid">
    <ScifiPanelDelta title="A" />

    <ScifiPanelDelta 
      title="B" 
      :decorationColorAlt="true" 
    />
  </div>
</template>

Minimal Floating Style

Combining borderd: false (hide border) and backgroundOpacity, you can create a floating style that only retains the badge, suitable as a mask container for images.

<template>
  <ScifiPanelDelta 
    title="Img" 
    :borderd="false"
    :backgroundOpacity="0.4"
    :glow="true"
  >
    <img src="..." style="width:100%; height:100%; object-fit:cover;" />
  </ScifiPanelDelta>
</template>

API Reference

Props

Property	Description	Type	Default
title	Badge Text. ⚠️ Limited to 2-4 characters	String	—
rotate	Geometric Rotation. Supports 'x', 'y', 'z'	String	—
decorationColorAlt	Highlight Variant. Whether to enable the highlight color scheme for the badge	Boolean	false
decoration	Whether to display the diagonal decorative line (the corner without the badge)	Boolean	true
borderWidth	Border line width (px)	Number	—
borderd	Whether to display the border	Boolean	true
backgroundOpacity	Background opacity (0-1)	Number	—
glow	Whether to enable the outer glow filter	Boolean	false
glowOpacity	Outer glow intensity	Number	—
scale	Overall scale ratio	Number	1
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)