TechUI Docs

简中

EN

简中

EN

主题

ScifiButtonPod ​

⚡WASM 驱动
⭐明星组件
👑首创

科幻按钮-能量舱 是 TechUI Scifi Button 系列中的侧翼增强型组件。

它的设计重心在于左右两侧的 “机械侧翼 (Side Wings)” 与 “水平延伸 (Horizontal Extension)”。与 A1 的全包围结构不同，A2 将视觉重量集中在水平两端，构建出类似机械夹具或推进器喷口的几何结构。

这种独特的设计语言赋予了按钮一种强烈的 “已锁定 (Locked)” 或 “就绪 (Ready)” 的稳固感。它非常适合用于 功能控制区、多选切换面板 或 工具栏，在这些场景中，它能有效强调操作项的独立性与功能性，同时保持界面的横向秩序。

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

基础用法 ​

默认形态 ​

使用默认插槽传入按钮文本或图标。 默认情况下 (Appearance A)，按钮左右两侧带有独特的凹槽与垂直短线装饰，中间区域平坦开阔。

vue
<template>
  <div class="btn-group">
    <ScifiButtonPod>
      SYSTEM CHECK
    </ScifiButtonPod>
    
    <ScifiButtonPod>
      <Icon name="radar" /> SCAN SECTOR
    </ScifiButtonPod>
  </div>
</template>

外观变体 ​

A2 提供了两种截然不同的几何风格，以适配不同的 UI 密度。

模式对比 ​

  • Type A (默认): 侧翼夹具。左右两侧拥有复杂的凹槽和垂直线装饰，科技感较强，适合作为独立的功能按钮。
  • Type B: 硬核切角。简化了侧翼的细节，转变为更硬朗的几何切角矩形，视觉上更加紧凑，适合作为密集排列的导航菜单或标签页。
vue
<template>
  <div class="grid">
    <ScifiButtonPod appearance="A">Clamp Mode (A)</ScifiButtonPod>
    <ScifiButtonPod appearance="B">Chamfer Mode (B)</ScifiButtonPod>
  </div>
</template>

状态与交互 ​

组件内置了全套交互动效。

禁用与激活 (Disabled & Active) ​

  • disabled: 禁用状态。按钮整体变暗，侧翼装饰失去光泽，鼠标交互被屏蔽。
  • className="is-active": 激活状态。按钮整体高亮，侧翼装饰会发出强光，表示当前处于工作状态。
vue
<template>
  <div class="row">
    <ScifiButtonPod :disabled="true">
      LOCKED
    </ScifiButtonPod>

    <ScifiButtonPod className="is-active">
      ENGAGED
    </ScifiButtonPod>
  </div>
</template>

尺寸控制 (Size) ​

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

  • Small: A2 的 Small 模式非常精致，常用于侧边栏的小型控制开关。
vue
<template>
  <ScifiButtonPod size="small">ON</ScifiButtonPod>
  <ScifiButtonPod size="default">STANDBY</ScifiButtonPod>
  <ScifiButtonPod size="large">POWER UP</ScifiButtonPod>
</template>

视觉定制 ​

装饰与配色 ​

  • decorationColorAlt: 交换装饰色。A2 的侧翼通常使用高亮色，开启此项后会反转为焦点色，可用于制作“危险操作”按钮（如发射、删除）。
  • glow: 开启后，左右侧翼会产生类似引擎喷口的辉光效果。
vue
<template>
  <ScifiButtonPod :decorationColorAlt="true">
    PURGE
  </ScifiButtonPod>
  
  <ScifiButtonPod :glow="false">
    ECO MODE
  </ScifiButtonPod>
</template>

CSS变量 ​

A2 的 CSS 变量接口与全系列保持一致。

案例：深海泰坦风格 (Titan Blue) ​

此案例定义了一个深蓝色调的重工业风格按钮，强调厚重感。

vue
<template>
  <ScifiButtonPod className="btn-titan">
    DEPLOY MECH
  </ScifiButtonPod>
</template>

<style lang="less">
.btn-titan {
  /* --- 默认状态 (Default) --- */
  --sf-button-bg_def: rgba(15, 23, 42, 0.8); /* 深蓝黑背景 */
  --sf-button-bd_def: #1e40af;               /* 蓝色边框 */
  --sf-button-fc_def: #93c5fd;               /* 浅蓝文字 */

  /* --- 悬停状态 (Hover) --- */
  --sf-button-bg_hov: rgba(30, 58, 138, 0.9);
  --sf-button-bd_hov: #3b82f6;               /* 亮蓝边框 */
  --sf-button-fc_hov: #ffffff;

  /* --- 装饰色 --- */
  --sf-button-hlite: #60a5fa;  /* 侧翼高亮色 */
  --sf-button-glow: #2563eb;   /* 引擎辉光 */
  --sf-button-glowop: 0.8;     /* 增强发光强度 */
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值
appearance外观变体。可选值: 'A' (夹具), 'B' (切角)String'A'
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左右侧翼 (Side Wings) 的装饰色var(--scifi-hlite)
--sf-button-focus辅助装饰色var(--scifi-focus)
--sf-button-bdw边框宽度1px
--sf-button-bg_{state}各状态背景色var(--button-bg_*)