TechUI Docs

简中

EN

简中

EN

主题

ScifiTriangle 三角形 ​

⚡WASM 驱动
👑首创

TechUI Scifi Geometry 系列中的警示与指向型组件。

ScifiTriangle 提供了一个全参数化的三角形容器。与静态图片不同，它是基于数学公式实时计算顶点的，支持“正三角”与“倒三角”的自由切换，并能处理切角（Chamfer）细节。

在科幻 UI 中，三角形通常与危险 (Danger)、警告 (Warning) 或锁定 (Lock) 语义绑定，是构建 HUD 战术界面的重要元素。

基础用法 ​

默认形态 ​

默认情况下，ScifiTriangle 渲染为一个正三角形（尖角朝上）。 其重心偏下，适合包裹图标或数字。

vue
<template>
  <div class="alert-zone">
    <ScifiTriangle />
    
    <ScifiTriangle :width="100" :height="100" />
  </div>
</template>

视觉特性与变体 ​

ScifiTriangle 提供了方向反转和独特的角部切削功能。

方向反转 ​

控制三角形的指向。

  • 默认 (False): 正三角形（尖角朝上）。常用于金字塔图、升级箭头。
  • True: 倒三角形（尖角朝下）。常用于“选中”指针、地图标记、危险警示。
vue
<template>
  <ScifiTriangle :directionAlt="true" />
</template>

机械平顶 (Corner Alt) ​

开启 cornerAlt 后，三角形最锋利的尖角会被“切平”（Chamfered），变成一个顶部带有平边的梯形变体。 这种处理消除了视觉上的刺痛感，增加了工业机械的稳重感，适合作为按钮背景或铭牌。

vue
<template>
  <ScifiTriangle 
    :cornerAlt="true" 
    :borderWidth="2"
  />
</template>

双层幻影 (Decoration Alt) ​

开启 decorationAlt 会在主图形下方生成一个半透明的“幽灵层”。 在警示场景中，这种重影效果能有效模拟紧急状态下的视觉抖动或全息投影的不稳定性。

vue
<template>
  <ScifiTriangle 
    :decorationAlt="true"
    :decoAltScale="1.1"
    :decoAltTransY="5"
  />
</template>

渐变流光 ​

支持线性渐变填充，常用于制作能量水晶或充能状态。

vue
<template>
  <ScifiTriangle 
    :gradientBackground="true" 
    :borderd="false"
  />
</template>

尺寸与动态计算 ​

ScifiTriangle 的几何计算公式基于底边宽度和垂直高度。

  • 宽度 (Width): 三角形底边的长度。
  • 高度 (Height): 底边到顶点的垂直距离。

布局建议：由于三角形的顶部空间较窄，如果作为容器使用，建议通过 Flex 布局将内容重心下移，或者使用 padding 避开尖角区域。

CSS变量 ​

通过 CSS 变量，您可以定义三角形的颜色主题。

案例：深红警报 (Crimson Alert) ​

此案例定义了一个红色调、高闪烁频率的警示风格。

vue
<template>
  <ScifiTriangle 
    className="geom-alert" 
    :width="150" 
    :height="130"
    :directionAlt="true"
  />
</template>

<style lang="less">
.geom-alert {
  /* 边框与高亮 */
  --sf-geom-bd: #991b1b;     /* 深红边框 */
  --sf-geom-hlite: #ef4444;  /* 鲜红装饰 */
  
  /* 背景 */
  --sf-geom-bg: rgba(69, 10, 10, 0.6);
  
  /* 发光 */
  --sf-geom-glow: #f87171;
  --sf-geom-glowop: 0.8;
}
</style>

变量字典 ​

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

变量名说明默认值
--sf-geom-bg主背景色var(--scifi-bg)
--sf-geom-bg_alt辅助背景色 (用于渐变)var(--scifi-bg_alt)
--sf-geom-bd边框颜色var(--scifi-bd)
--sf-geom-hlite装饰层/高亮颜色var(--scifi-hlite)
--sf-geom-focus焦点颜色var(--scifi-focus)
--sf-geom-glow发光颜色var(--scifi-hlite)

API 参考 ​

Props ​

属性名说明类型默认值
width宽度。三角形底边宽度 (px)Number300
height高度。垂直高度 (px)Number150
directionAlt方向反转。false=正三角(尖角朝上), true=倒三角(尖角朝下)Booleanfalse
cornerAlt机械平顶。开启后尖角会被切平Booleanfalse
decorationAlt双层装饰。开启幽灵层Booleanfalse
decoAltScale装饰层缩放Number—
decoAltTransX装饰层 X 轴位移Number—
decoAltTransY装饰层 Y 轴位移Number—
gradientBackground渐变开关Booleanfalse
borderd是否显示边框Booleantrue
borderWidth边框宽度Number—
glow发光开关Booleantrue
backgroundOpacity背景不透明度Number—
className自定义类名String—

Slots ​

插槽名说明
default组件内容。内容会被 SVG mask 裁剪，确保内容不会超出三角形边界。