TechUI Docs

简中

EN

简中

EN

主题

ScifiButtonFin ​

⚡WASM 驱动
👑首创

科幻按钮-掠翼 是 TechUI Scifi Button 系列中的动感导向型组件。

它大胆摒弃了传统的垂直边界约束，采用了激进的 “平行四边形 (Parallelogram)” 几何构造。

这种整体倾斜的造型彻底打破了界面的静止平衡，在视觉上产生了一种强烈的 “剪切力” 与 “方向感”。它自带一种**“正在前进”**的动势，非常适合用于 成组的导向操作（如“上一页/下一页”导航）、赛车/运动类数据看板，或者任何需要强调 速度与趋势 的场景，能够有效引导用户的视线流动。

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

基础用法 ​

默认形态 ​

使用默认插槽传入按钮文本或图标。 默认情况下 (Appearance A)，按钮呈现为向右倾斜的平行四边形。

vue
<template>
  <div class="btn-group">
    <ScifiButtonFin>
      NEXT LEVEL
    </ScifiButtonFin>
    
    <ScifiButtonFin>
      <Icon name="fast-forward" /> SPEED UP
    </ScifiButtonFin>
  </div>
</template>

外观变体 ​

A5 提供了两种斜切风格，主要区别在于边框的复杂度和装饰细节。

模式对比 ​

  • Type A (默认): 标准斜切。简洁的单层平行四边形边框，视觉干净利落，适合大多数场景。
  • Type B: 重装斜切。在斜边或角部增加了额外的平行线条或切割细节，视觉权重更高，适合作为强调按钮。
vue
<template>
  <div class="grid">
    <ScifiButtonFin appearance="A">Standard Skew (A)</ScifiButtonFin>
    <ScifiButtonFin appearance="B">Armored Skew (B)</ScifiButtonFin>
  </div>
</template>

方向控制 ​

这是 A5 组件独有的特性。由于平行四边形具有方向性，A5 允许通过属性反转倾斜角度。

左右倾斜 ​

  • 默认 (False): 向右倾斜（通常代表“前进”、“正向”）。
  • True: 向左倾斜（通常代表“后退”、“反向”）。

这一特性使得 A5 非常适合制作导航栏或对战双方的状态栏。

vue
<template>
  <div class="nav-bar">
    <ScifiButtonFin :directionAlt="true">
      PREVIOUS
    </ScifiButtonFin>

    <ScifiButtonFin>
      NEXT
    </ScifiButtonFin>
  </div>
</template>

状态与交互 ​

A5 的交互动效结合了倾斜变形与色彩增强。

禁用与激活 (Disabled & Active) ​

  • disabled: 禁用状态。斜切块变暗，边缘光泽消失。
  • className="is-active": 激活状态。整体高亮，倾斜边缘会发出强烈的激光质感。
vue
<template>
  <div class="row">
    <ScifiButtonFin :disabled="true">DISABLED</ScifiButtonFin>
    <ScifiButtonFin className="is-active">ACTIVE</ScifiButtonFin>
  </div>
</template>

尺寸控制 (Size) ​

支持 default, large, small 三种尺寸。

vue
<template>
  <ScifiButtonFin size="small">LOW</ScifiButtonFin>
  <ScifiButtonFin size="default">MID</ScifiButtonFin>
  <ScifiButtonFin size="large">HIGH</ScifiButtonFin>
</template>

视觉定制 ​

装饰与配色 ​

  • decorationColorAlt: 交换装饰色。在 A5 中，这通常影响斜边高亮线条的颜色。
  • glow: 开启后，平行四边形的锐角部分会产生更明显的光晕。
vue
<template>
  <ScifiButtonFin :decorationColorAlt="true">
    ENEMY TEAM
  </ScifiButtonFin>
  
  <ScifiButtonFin :glow="false">
    FLAT MODE
  </ScifiButtonFin>
</template>

CSS变量 ​

A5 的 CSS 变量接口允许您定义极具速度感的配色，如赛车红、电光蓝。

案例：极速红移风格 ​

此案例定义了一个激进的红色斜切按钮，配合向左的倾斜方向，模拟紧急制动或回退操作。

vue
<template>
  <ScifiButtonFin 
    className="btn-red-shift"
    :directionAlt="true"
  >
    EMERGENCY BRAKE
  </ScifiButtonFin>
</template>

<style lang="less">
.btn-red-shift {
  /* --- 默认状态 (Default) --- */
  --sf-button-bg_def: rgba(127, 29, 29, 0.7); /* 深红背景 */
  --sf-button-bd_def: #dc2626;                /* 红色边框 */
  --sf-button-fc_def: #fecaca;                /* 浅红文字 */

  /* --- 悬停状态 (Hover) --- */
  --sf-button-bg_hov: rgba(153, 27, 27, 0.9);
  --sf-button-bd_hov: #ef4444;                /* 亮红边框 */
  --sf-button-fc_hov: #ffffff;

  /* --- 装饰色 --- */
  --sf-button-hlite: #f87171;  /* 斜边高亮 */
  --sf-button-glow: #b91c1c;   /* 红色拖尾光晕 */
  --sf-button-focus: #fee2e2;  /* 辅助白 */
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值
appearance外观变体。可选值: 'A' (标准), 'B' (重装)String'A'
directionAlt倾斜方向。false为右倾(前进)，true为左倾(后退)Booleanfalse
size尺寸。可选值: 'default', 'large', 'small'String'default'
disabled禁用状态。开启后样式变灰且不可点击Booleanfalse
glow发光开关。是否开启斜切辉光Booleantrue
glowOpacity发光不透明度Number—
decorationColorAlt装饰变体。是否交换高亮色与焦点色Booleanfalse
scaleAction缩放动画。是否开启悬停/点击时的缩放效果Booleantrue
backgroundOpacity背景不透明度Number—
borderWidth边框线条宽度 (px)Number—
className自定义类名String—

Slots ​

插槽名说明
default按钮的内容（文本、图标等）

CSS Variables ​

变量名说明默认值
--sf-button-hlite斜边/角部 (Skewed Edges) 的装饰色var(--scifi-hlite)
--sf-button-focus辅助装饰色var(--scifi-focus)
--sf-button-bdw边框宽度1px
--sf-button-bg_{state}各状态背景色var(--button-bg_*)