TechUI Docs

简中

EN

简中

EN

主题

ScifiTrapezoid 梯形 ​

⚡WASM 驱动
👑首创

TechUI Scifi Geometry 系列中的支撑型组件。

ScifiTrapezoid 提供了一个全参数化的梯形容器。与普通的 CSS clip-path 不同，它是基于数学公式计算顶点的 SVG 路径，因此支持边框描边（Stroke）、内阴影、外发光等复杂的 SVG 滤镜效果，且在任意缩放下都不会模糊。

它常被用于构建数据托盘、页签（Tabs）、控制台底座或悬浮标题背景。

基础用法 ​

默认形态 ​

默认情况下，ScifiTrapezoid 渲染为一个正梯形（上窄下宽）。 这种形态在视觉上极其稳定，仿佛是一个承载数据的“底座”。

vue
<template>
  <div class="hud-group">
    <ScifiTrapezoid />
    
    <ScifiTrapezoid :width="400" :height="60" />
  </div>
</template>

视觉特性与变体 ​

ScifiTrapezoid 提供了方向反转和角部细节修饰，使其能适配顶部和底部的不同布局需求。

方向反转 ​

控制梯形的开口方向。

  • 默认 (False): 正梯形（上窄下宽）。适合底部布局，如托盘、底座。
  • True: 倒梯形（上宽下窄）。适合顶部布局，如导航栏、吊顶装饰、标题背景。
vue
<template>
  <ScifiTrapezoid :directionAlt="true" :width="300" :height="50" />
</template>

机械切角 (Corner Alt) ​

开启 cornerAlt 后，梯形的锐角部分会增加额外的切角细节，使其看起来不那么尖锐，增加了机械结构的厚重感。 这在制作“重型装甲”风格的界面时非常有用。

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

双层幻影 (Decoration Alt) ​

开启 decorationAlt 会在主图形下方生成一个半透明的“幽灵层”。 配合倒梯形使用时，可以制作出非常有层次感的全息悬浮台效果。

vue
<template>
  <ScifiTrapezoid 
    :directionAlt="true"
    :decorationAlt="true"
    :decoAltScale="1.05"
    :decoAltTransY="5"
  />
</template>

渐变流光 ​

支持线性渐变填充，增强科幻氛围。

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

尺寸与动态计算 ​

ScifiTrapezoid 的几何计算公式会自动根据高度调整腰部的斜率。

  • 宽度 (Width): 梯形最宽边的长度（正梯形为底边，倒梯形为顶边）。
  • 高度 (Height): 垂直高度。

注意：为了保持视觉美观，组件内部对斜率有一定的约束。如果高度过高而宽度过窄，梯形可能会退化为矩形或三角形。

CSS变量 ​

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

案例：琥珀控制台 (Amber Console) ​

此案例定义了一个琥珀色调、高亮底座风格。

vue
<template>
  <ScifiTrapezoid 
    className="geom-console" 
    :width="400" 
    :height="100"
    :cornerAlt="true"
  />
</template>

<style lang="less">
.geom-console {
  /* 边框与高亮 */
  --sf-geom-bd: #92400e;     /* 深褐边框 */
  --sf-geom-hlite: #f59e0b;  /* 琥珀装饰 */
  
  /* 背景 */
  --sf-geom-bg: rgba(69, 26, 3, 0.6);
  
  /* 发光 */
  --sf-geom-glow: #fbbf24;
  --sf-geom-glowop: 0.6;
}
</style>

变量字典 ​

以下是 ScifiTrapezoid 支持的主要 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 裁剪，确保内容不会超出梯形边界。