ScifiDecoPrism

⚡WASM Powered

⭐Star

ScifiDecoPrism (Prism/棱镜) is a warning-type/directional badge component in the TechUI Scifi Deco series.

It focuses on the visual interpretation of "Triangular Mechanics". Unlike the harmony of circles or the stability of hexagons, triangles naturally possess strong "visual tension" and "aggressiveness".

To avoid the thinness of simple geometric shapes, B3 utilizes Chamfered Edges and mechanically reinforced frames. This construction provides a "sharp" temperament, making it ideal for Hazard Warnings, special attribute markers (such as high voltage, radiation, or fire elements), or as a priority target locking mark to instantly alert the user.

Tip: This component can be invoked via ScifiDecoB3 or its semantic alias ScifiDecoPrism.

Basic Usage

Default Form

By default (appearance="A"), B3 renders as an isosceles triangle container with the base facing downwards. The default slot automatically centers content horizontally and vertically.

Note: Because triangles are narrower at the top, pay attention to the visual center of gravity when placing square icons.

<template>
  <div class="alert-group">
    <ScifiDecoPrism>
      <icon name="bi-exclamation-triangle" />
    </ScifiDecoPrism>
    
    <ScifiDecoPrism>
      <span class="code">39</span>
    </ScifiDecoPrism>
  </div>
</template>

Appearance

B3 provides four triangular structure variants, ranging from minimalist lines to heavy armored styles.

Mode Comparison

• Type A (Default): Standard Warning. Features a classic triangular border with corner reinforcement; suitable for general warnings.
• Type B: Hollow Force Field. Features line breaks or dual-layer hollow designs for a more transparent visual; suitable for floating UIs.
• Type C: Armored. Features thicker borders and prominent mechanical structures at the corners; suitable for emphasizing "defense" or "physical" attributes.
• Type D: Core Reaction. Features the strongest internal fill, often used for high-energy reactions or core target marking.

<template>
  <div class="grid">
    <ScifiDecoPrism appearance="A">Standard</ScifiDecoPrism>
    <ScifiDecoPrism appearance="B">Hollow</ScifiDecoPrism>
    <ScifiDecoPrism appearance="C">Armored</ScifiDecoPrism>
    <ScifiDecoPrism appearance="D">Core</ScifiDecoPrism>
  </div>
</template>

Size & Layout

Fixed Size and Scaling (Scale)

The ScifiDeco series is drawn based on an 80px x 80px coordinate system. Since the visual area of a triangle is typically smaller than a circle or square of the same size, you may need to increase the scale for visual balance in mixed layouts.

• scale="1": 80px (Default)
• scale="1.3": 104px (Recommended for emphasis)
• scale="0.8": 64px

<template>
  <ScifiDecoPrism :scale="1.1">
    <icon name="high-voltage" />
  </ScifiDecoPrism>
</template>

Visual

Glow & Atmosphere

• glow: Enables the glow filter. The three sharp corners of the triangle appear very sharp and penetrative when glowing.
• backgroundOpacity: Adjusts the transparency of the background fill inside the triangle.

Color Variants (Color Alt)

• decorationColorAlt: Swaps the highlight color and focus color.
• Triangles are often used to express "danger"; switching to an orange or red color scheme using decorationColorAlt is highly effective.

<template>
  <ScifiDecoPrism 
    appearance="C" 
    :decorationColorAlt="true" 
    className="deco-alert"
  >
    <span class="text">!</span>
  </ScifiDecoPrism>
</template>

CSS Variable

Using CSS variables, you can customize B3 into "Radioactive Warning" or "Crimson Strike" styles.

Case Study: Radioactive Orange

This example defines an orange-toned triangular warning style.

<template>
  <ScifiDecoPrism 
    appearance="A" 
    className="deco-hazard"
    :scale="1.2"
  >
    <icon name="radiation" />
  </ScifiDecoPrism>
</template>

<style lang="less">
.deco-hazard {
  /* Base Colors */
  --sf-deco-hlite: #fb923c;  /* Warning Orange Highlight */
  --sf-deco-bd: #9a3412;     /* Dark Brown Border */
  --sf-deco-bg: rgba(67, 20, 7, 0.5); /* Orange-Brown Background */
  
  /* Content Text */
  --sf-deco-fc: #fed7aa;     /* Light Orange Text */
  
  /* Glow Enhancement */
  --sf-deco-glow: #f97316;   /* Orange Halo */
  --sf-deco-glowop: 0.8;
}
</style>

Variable Dictionary

Major CSS variables supported by ScifiDecoPrism:

Variable Name	Description	Default Value
Base Appearance
--sf-deco-size	Component base size (Fixed)	80px
--sf-deco-bg	Background fill color inside the triangle	var(--scifi-bg)
--sf-deco-bgop	Background opacity	1
--sf-deco-bd	Border line color	var(--scifi-bd)
Decoration & Highlight
--sf-deco-hlite	Primary triangle color (SVG stroke)	var(--scifi-hlite)
--sf-deco-focus	Auxiliary corner/reinforcement color	var(--scifi-focus)
--sf-deco-glow	Glow filter color	var(--scifi-hlite)
Content Slot
--sf-deco-fc	Text/Icon color in slot	var(--font-strong)
--sf-deco-fz	Default text size in slot	24px

API Reference

Props

Property	Description	Type	Default
appearance	Appearance Variant: 'A', 'B', 'C', 'D'	String	'A'
scale	Scaling Ratio (based on 80px)	Number	1
glow	Glow Switch: Toggles filter halo	Boolean	true
glowRange	Glow range	Number	10
glowOpacity	Glow opacity	Number	—
borderd	Whether to display border lines	Boolean	true
decorationColorAlt	Decoration Variant: Swaps highlight and focus colors	Boolean	false
backgroundOpacity	Background opacity	Number	—
className	Custom class name	String	—

Slots

Slot Name	Description
default	Component content; automatically absolutely centered.