TechUI Docs

简中

EN

简中

EN

主题

ScifiParallelogram 平行四边形 ​

⚡WASM 驱动
👑首创

TechUI Scifi Geometry 系列中的动态倾斜组件。

ScifiParallelogram 是一个参数化的平行四边形容器。不同于静态的 CSS transform: skew()，它是通过数学公式计算出四个精确的顶点坐标来绘制 SVG 路径。这使得它在倾斜的同时，依然能够保持边框线条（stroke）的像素级清晰，不会出现 CSS 变换常见的边缘模糊或锯齿。

它常用于构建列表背景、导航菜单或进度条底槽，给人一种“正在前进”或“高速运动”的视觉暗示。

基础用法 ​

默认形态 ​

默认情况下，ScifiParallelogram 渲染为一个向右倾斜的平行四边形。 它的高度和宽度完全可控，且倾斜角度会根据高度自动优化以保持美观。

vue
<template>
  <div class="list-group">
    <ScifiParallelogram />
    
    <ScifiParallelogram :width="300" :height="60" />
  </div>
</template>

视觉特性与变体 ​

ScifiParallelogram 提供了方向控制和角部细节修饰，使其适配不同的排版需求。

倾斜方向 ​

控制平行四边形的倾斜角度。

  • 默认 (False): 向右倾斜（通常代表“正向”、“前进”）。
  • True: 向左倾斜（通常代表“反向”、“回退”或作为右侧对齐的容器）。
vue
<template>
  <ScifiParallelogram :directionAlt="true" />
</template>

机械切角 (Corner Alt) ​

开启 cornerAlt 后，平行四边形的两个锐角会被“切掉”，形成一个六边形的变体（但依然保持平行四边形的主体轮廓）。 这种设计增加了工业感，适合表现“装甲”或“机械组件”。

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

双层幻影 (Decoration Alt) ​

开启 decorationAlt 会在主图形下方生成一个半透明的“幽灵层”。 配合 decoAltScale (缩放) 和 decoAltTransX (位移)，可以制作出具有速度感的重影效果。

vue
<template>
  <ScifiParallelogram 
    :decorationAlt="true"
    :decoAltScale="1.04"
    :decoAltTransX="10" 
    :decoAltTransY="0"
  />
</template>

渐变流光 ​

支持线性渐变填充，增强动态氛围。

vue
<template>
  <ScifiParallelogram 
    :gradientBackground="true" 
    :gradientReverse="true"
  />
</template>

尺寸与动态计算 ​

ScifiParallelogram 的几何计算公式会确保在任意宽高比下，倾斜角度始终保持在视觉舒适区，不会因为高度过低而导致倾斜角变得过于尖锐。

  • 宽度 (Width): 容器的总宽度（包含倾斜部分）。
  • 高度 (Height): 垂直高度。

CSS变量 ​

通过 CSS 变量，您可以定义平行四边形的主题色。

案例：极速运动风格 (Speed Runner) ​

此案例定义了一个蓝紫色调、带有强烈运动感的风格。

vue
<template>
  <ScifiParallelogram 
    className="geom-speed" 
    :width="300" 
    :height="80"
    :directionAlt="true"
  />
</template>

<style lang="less">
.geom-speed {
  /* 边框与高亮 */
  --sf-geom-bd: #8b5cf6;     /* 紫色边框 */
  --sf-geom-hlite: #c4b5fd;  /* 亮紫装饰 */
  
  /* 背景渐变 */
  --sf-geom-bg: rgba(76, 29, 149, 0.4);
  --sf-geom-bg_alt: rgba(124, 58, 237, 0.1);
  
  /* 发光 */
  --sf-geom-glow: #a78bfa;
}
</style>

变量字典 ​

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