ScifiDecoHive

⚡WASM Powered

⭐Star

ScifiDecoHive (Hive/蜂巢) is the hexagonal badge component in the TechUI Scifi Deco series.

It focuses on a deep interpretation of the "Hexagonal Structure". In sci-fi UI design language, the hexagon (honeycomb structure) is synonymous with ultimate efficiency and structural stability, serving as one of the most iconic visual symbols.

Compared to the lightweight basic hexagon in A1, B2 features heavier mechanical edging, richer internal textures, and a complex multi-layer nested structure. It acts as a reinforced energy unit or high-tech storage box, making it ideal for Skill Tree Nodes, Inventory Slots, or Technology Research Icons.

Tip: This component can be invoked via ScifiDecoB2 or its semantic alias ScifiDecoHive.

Basic Usage

Default Form

By default (appearance="A"), B2 renders as a hexagonal container with a sci-fi border. The default slot automatically centers content horizontally and vertically.

<template>
  <div class="hive-group">
    <ScifiDecoHive>
      <icon name="bi-box-seam" />
    </ScifiDecoHive>
    
    <ScifiDecoHive>
      <span class="level">LV.5</span>
    </ScifiDecoHive>
  </div>
</template>

Appearance

B2 provides four hexagonal structure variants with increasing visual complexity.

Mode Comparison

• Type A (Default): Standard Hive. Clear border lines with minimal corner decorations; provides the strongest versatility.
• Type B: Armored. Adds extra reinforcement modules at the corners of the hexagon for a sturdier visual, suitable for defense-related attributes.
• Type C: Double Layer Force Field. Features dual inner and outer lines with a hollow or energy-filled sensation; ideal for high-level skills.
• Type D: Heavy Core. The most complex variant with a large fill area and mechanical interlocking structures at the top and bottom; suitable for "Ultimate Skills" or "Core Tech" icons.

<template>
  <div class="grid">
    <ScifiDecoHive appearance="A">Standard</ScifiDecoHive>
    <ScifiDecoHive appearance="B">Armored</ScifiDecoHive>
    <ScifiDecoHive appearance="C">Double Layer</ScifiDecoHive>
    <ScifiDecoHive appearance="D">Ultimate</ScifiDecoHive>
  </div>
</template>

Size & Layout

Fixed Size and Scaling (Scale)

The ScifiDeco series is drawn based on an 80px x 80px coordinate system. Do not use CSS to modify width and height; the scale property must be used for lossless scaling. Uniform scaling is particularly important when arranging hexagonal structures in a honeycomb grid.

• scale="1": 80px (Default)
• scale="1.2": 96px (Suitable for selected states)
• scale="0.8": 64px (Suitable for dense arrays)

<template>
  <div class="honeycomb-grid">
    <ScifiDecoHive v-for="i in 6" :key="i" :scale="0.8">
      <icon :name="`tech-${i}`" />
    </ScifiDecoHive>
  </div>
</template>

Visual

Glow & Atmosphere

• glow: Enables the glow filter. The acute angles of the hexagon produce beautiful starburst effects when glowing.
• glowRange: Controls the halo range.
• backgroundOpacity: Adjusts the transparency of the background fill inside the hexagon.

Color Variants (Color Alt)

• decorationColorAlt: Swaps the highlight color and focus color.
• This can be used to distinguish between "Unlocked" and "Locked" technologies, or "Active Skills" and "Passive Skills".

<template>
  <ScifiDecoHive 
    appearance="A" 
    :decorationColorAlt="true" 
    :backgroundOpacity="0.1"
    className="tech-locked"
  >
    <icon name="lock" />
  </ScifiDecoHive>
</template>

CSS Variable

Using CSS variables, you can customize B2 into "Cyber Wasp" or "Frost Shield" styles.

Case Study: Cyber Wasp Style

This example defines an industrial engineering-style hive with a yellow and black color scheme.

<template>
  <ScifiDecoHive 
    appearance="C" 
    className="deco-hive"
    :scale="1.1"
  >
    <icon name="drone" />
  </ScifiDecoHive>
</template>

<style lang="less">
.deco-hive {
  /* Base Colors */
  --sf-deco-hlite: #facc15;  /* Bee Yellow Highlight */
  --sf-deco-bd: #854d0e;     /* Dark Gold Border */
  --sf-deco-bg: rgba(30, 20, 0, 0.6); /* Black-Yellow Background */
  
  /* Content Text */
  --sf-deco-fc: #fef08a;     /* Light Yellow Text */
  
  /* Glow Enhancement */
  --sf-deco-glow: #eab308;   /* Gold Halo */
  --sf-deco-glowop: 0.7;
}
</style>

Variable Dictionary

Major CSS variables supported by ScifiDecoHive:

Variable Name	Description	Default Value
Base Appearance
--sf-deco-size	Component base size (Fixed)	80px
--sf-deco-bg	Background fill color inside the hexagon	var(--scifi-bg)
--sf-deco-bgop	Background opacity	1
--sf-deco-bd	Hexagon line color	var(--scifi-bd)
Decoration & Highlight
--sf-deco-hlite	Primary hexagon color (SVG stroke)	var(--scifi-hlite)
--sf-deco-focus	Auxiliary reinforcement/corner 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.