TechUI Docs

简中

EN

简中

EN

主题

ScifiDecoPrism ​

⚡WASM 驱动
⭐明星组件

科幻装饰-棱镜 是 TechUI Scifi Deco 系列中的警示型/指向性徽章组件。

它专注于 “三角力学 (Triangular Mechanics)” 的视觉演绎。相比于圆形的和谐与六边形的稳定，三角形天生具有强烈的 “视觉张力” 与 “侵略性”。

为了避免单纯几何图形的单薄感，B3 采用了 倒角处理 (Chamfered Edges) 与 机械加固框架 设计。这种构造赋予了它一种“锋芒毕露”的气质，非常适合用于承载 危险警示 (Hazard Warnings)、特殊属性标识（如高压、辐射、火元素）或作为 优先打击目标 的锁定标记，能够瞬间引起用户的高度警觉。

提示：该组件可以通过 ScifiDecoB3 或其语义化别名 ScifiDecoPrism 进行调用。

基础用法 ​

默认形态 ​

默认情况下 (appearance="A")，B3 渲染为一个底边向下的等腰三角形容器。 组件内部插槽 (default slot) 会自动垂直水平居中（注意：由于三角形上窄下宽，放置方形图标时需注意视觉重心）。

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

外观变体 ​

B3 提供了四种三角形结构变体，从极简线条到重型装甲风格。

模式对比 ​

  • Type A (默认): 标准警示。经典的三角边框，带有角部加固，适合通用警告。
  • Type B: 镂空力场。线条出现断点或双层镂空设计，视觉更通透，适合浮动 UI。
  • Type C: 加固装甲。边框更厚，角部有明显的机械结构，适合强调“防御”或“物理”属性。
  • Type D: 核心反应。内部填充感最强，常用于表示高能反应或核心目标标记。
vue
<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>

尺寸与布局 ​

固定尺寸与缩放 (Scale) ​

ScifiDeco 系列基于 80px x 80px 坐标系绘制。 三角形的视觉面积通常比同尺寸的圆形或方形小，因此在混合排版时，可能需要适当放大 scale 以获得视觉平衡。

  • scale="1": 80px (默认)
  • scale="1.3": 104px (推荐用于强调)
  • scale="0.8": 64px
vue
<template>
  <ScifiDecoPrism :scale="1.1">
    <icon name="high-voltage" />
  </ScifiDecoPrism>
</template>

视觉定制 ​

辉光与氛围 ​

  • glow: 开启发光滤镜。三角形的三个尖角在发光时非常锐利，具有很强的穿透力。
  • backgroundOpacity: 调整三角形内部的背景填充透明度。

配色变体 (Color Alt) ​

  • decorationColorAlt: 交换高亮色与焦点色。
  • 三角形常用于表达“危险”，配合 decorationColorAlt 切换为橙色或红色配色非常合适。
vue
<template>
  <ScifiDecoPrism 
    appearance="C" 
    :decorationColorAlt="true" 
    className="deco-alert"
  >
    <span class="text">!</span>
  </ScifiDecoPrism>
</template>

CSS变量 ​

通过 CSS 变量，您可以将 B3 定制为“核能警示”或“深红打击”风格。

案例：辐射警示风格 (Radioactive Orange) ​

此案例定义了一个橙色调的警示风格三角形。

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

<style lang="less">
.deco-hazard {
  /* 基础配色 */
  --sf-deco-hlite: #fb923c;  /* 警示橙高亮 */
  --sf-deco-bd: #9a3412;     /* 深褐边框 */
  --sf-deco-bg: rgba(67, 20, 7, 0.5); /* 橙褐背景 */
  
  /* 内容文字 */
  --sf-deco-fc: #fed7aa;     /* 浅橙文字 */
  
  /* 发光增强 */
  --sf-deco-glow: #f97316;   /* 橙色光晕 */
  --sf-deco-glowop: 0.8;
}
</style>

变量字典 ​

以下是 ScifiDecoPrism 支持的主要 CSS 变量：

变量名说明默认值
基础外观
--sf-deco-size组件基准尺寸 (固定值)80px
--sf-deco-bg三角形内部背景填充色var(--scifi-bg)
--sf-deco-bgop背景不透明度1
--sf-deco-bd边框线条颜色var(--scifi-bd)
装饰与高亮
--sf-deco-hlite三角形主体颜色 (SVG 描边)var(--scifi-hlite)
--sf-deco-focus辅助角部/加固颜色var(--scifi-focus)
--sf-deco-glow发光滤镜颜色var(--scifi-hlite)
内容插槽
--sf-deco-fc插槽内文字/图标颜色var(--font-strong)
--sf-deco-fz插槽内文字默认大小24px

API 参考 ​

Props ​

属性名说明类型默认值
appearance外观变体。'A', 'B', 'C', 'D'String'A'
scale缩放比例。基于 80px 的倍率Number1
glow发光开关。是否开启滤镜光晕Booleantrue
glowRange发光范围Number10
glowOpacity发光不透明度Number—
borderd是否显示边框线条Booleantrue
decorationColorAlt装饰变体。交换高亮色与焦点色Booleanfalse
backgroundOpacity背景不透明度Number—
className自定义类名String—

Slots ​

插槽名说明
default组件内容。会自动绝对居中显示。