TechUI Docs

简中

EN

简中

EN

主题

ScifiHexagon 六边形背景 ​

⚡WASM 驱动
👑首创

TechUI Scifi Geometry 系列中的核心几何组件。

ScifiHexagon 提供了一个标准的可参数化六边形容器。不同于普通的图片素材，它的六个顶点坐标完全由 width 和 height 动态计算得出。这意味着您可以随意拉伸它（例如将其变为扁长的条状六边形），而不会导致边缘锯齿或模糊。

它内置了双层装饰、方向旋转和智能渐变功能，非常适合用于核心指标底座、雷达图背景或蜂巢阵列。

基础用法 ​

默认形态 ​

默认情况下，ScifiHexagon 渲染为一个带有科技感边框和微弱辉光的六边形。 其几何中心与容器中心对齐，非常适合通过绝对定位叠加内容。

vue
<template>
  <div class="center-stage">
    <ScifiHexagon />
    
    <ScifiHexagon :width="200" :height="200" />
  </div>
</template>

视觉特性与变体 ​

ScifiHexagon 提供了丰富的视觉配置项，以适应不同的 UI 复杂度。

方向旋转 ​

六边形有两种经典的摆放方式：尖角朝上 或 平边朝上。

  • 默认 (False): 尖角朝左右（侧向六边形），适合横向排版。
  • True: 旋转 30 度（或重新计算顶点），使得尖角朝上下（竖向六边形），适合蜂巢堆叠。
vue
<template>
  <ScifiHexagon :directionAlt="true" />
</template>

双层幻影 (Decoration Alt) ​

开启 decorationAlt 后，组件会在主图形下方生成一个半透明的“幽灵层”。 您可以利用 decoAltScale 和 decoAltTrans 属性来微调这个层的位置，制造出立体分层或机械错位的视觉效果。

  • decoAltScale: 缩放比例（例如 1.03 表示放大 3%）。
  • decoAltTransX/Y: 位移像素值。
vue
<template>
  <ScifiHexagon 
    :decorationAlt="true"
    :decoAltScale="1.05"
    :decoAltTransX="5"
    :decoAltTransY="5"
  />
</template>

渐变背景 ​

支持线性渐变填充。开启后，背景色将在主色 (--sf-geom-bg) 和辅色 (--sf-geom-bg_alt) 之间过渡。

vue
<template>
  <ScifiHexagon 
    :gradientBackground="true" 
    :borderWidth="2"
  />
</template>

尺寸与动态计算 ​

由于是基于数学公式实时渲染，ScifiHexagon 对非正六边形（即不等边六边形）的支持非常完美。 您可以设置任意的宽及高，组件会自动调整顶点角度以适应容器。

  • 扁平化: 设置 width=400, height=100 可用作标题背景条。
  • 正六边形: 设置特定的宽高比（取决于数学常数，通常宽高比约为 1:0.866 时接近正六边形）。

CSS变量 ​

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

案例：反应堆核心 (Reactor Core) ​

此案例定义了一个高亮的青色核心风格。

vue
<template>
  <ScifiHexagon 
    className="geom-reactor" 
    :width="200" 
    :height="200"
    :glowRange="15"
  />
</template>

<style lang="less">
.geom-reactor {
  /* 边框与高亮 */
  --sf-geom-bd: #22d3ee;     /* 青色边框 */
  --sf-geom-hlite: #67e8f9;  /* 亮青装饰 */
  
  /* 背景渐变 */
  --sf-geom-bg: rgba(6, 182, 212, 0.2);
  --sf-geom-bg_alt: rgba(8, 145, 178, 0.6);
  
  /* 发光 */
  --sf-geom-glow: #06b6d4;
  --sf-geom-glowop: 0.8;
}
</style>

变量字典 ​

以下是 ScifiHexagon 支持的主要 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
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 裁剪，确保不会溢出六边形边界。