ScifiButtonExo

⚡WASM 驱动

⭐明星组件

👑首创

科幻按钮-骸甲 是 TechUI Scifi Button 系列中的融合型重装组件。

它打破了传统按钮“非圆即方”的二元定式。它采用了独特的 “外骨骼加固 (Exoskeleton Reinforcement)” 与 “切角胶囊 (Chamfered Capsule)” 设计语言。

在视觉上，它由一个核心的切角条形主体和左右两侧独立的机械端盖结构咬合而成。这种设计既保留了胶囊按钮的流畅动势，又通过锋利的切角和多层结构赋予了其极强的工业精密感。它仿佛被装甲包裹的核心组件，非常适合用于 主功能操作、模组启停 或 系统导航，在提供明确点击区域的同时，传递出稳固可靠的操作手感。

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

基础用法

默认形态

使用默认插槽传入按钮文本或图标。默认情况下 (Appearance A)，按钮呈现为带有左右独立端盖的机械结构，中间区域用于承载文字。

vue

<template>
  <div class="btn-group">
    <ScifiButtonExo>
      ACTIVATE MODULE
    </ScifiButtonExo>
    
    <ScifiButtonExo>
      <Icon name="link" /> LINK START
    </ScifiButtonExo>
  </div>
</template>

外观变体

A4 提供了两种细微差别的机械结构，主要体现在端盖的封闭性上。

模式对比

Type A (默认): 开放端盖。左右两侧的端盖通过线条勾勒，中间部分与背景融合度较高，视觉上更通透。
Type B: 封闭装甲。端盖区域的色块填充更实，且边缘切角更加锐利，整体感更强，适合作为“实心”按钮使用。

vue

<template>
  <div class="grid">
    <ScifiButtonExo appearance="A">Open Cap (A)</ScifiButtonExo>
    <ScifiButtonExo appearance="B">Solid Armor (B)</ScifiButtonExo>
  </div>
</template>

状态与交互

组件内置了机械咬合般的交互反馈。

禁用与激活 (Disabled & Active)

disabled: 禁用状态。端盖结构变暗，仿佛机械结构已锁死，失去能量光泽。
className="is-active": 激活状态。端盖与中间连接处发出强光，表示能量已连通。

vue

<template>
  <div class="row">
    <ScifiButtonExo :disabled="true">
      LOCKED
    </ScifiButtonExo>

    <ScifiButtonExo className="is-active">
      LINKED
    </ScifiButtonExo>
  </div>
</template>

尺寸控制 (Size)

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

Large: 适合作为显著的“开始/停止”控制键。

vue

<template>
  <ScifiButtonExo size="small">MIN</ScifiButtonExo>
  <ScifiButtonExo size="default">NORM</ScifiButtonExo>
  <ScifiButtonExo size="large">MAX POWER</ScifiButtonExo>
</template>

视觉定制

装饰与配色

decorationColorAlt: 交换装饰色。A4 的端盖线条默认使用高亮色，开启此项后变为焦点色。
glow: 开启后，胶囊轮廓周围会产生柔和的光晕，类似能量护盾。

vue

<template>
  <ScifiButtonExo :decorationColorAlt="true">
    ALTERNATE
  </ScifiButtonExo>
  
  <ScifiButtonExo :glow="false">
    PHYSICAL
  </ScifiButtonExo>
</template>

CSS变量

A4 的 CSS 变量接口允许您打造极具辨识度的“品牌色”按钮。

案例：霓虹粉波风格 (Neon Vapor)

此案例定义了一个高饱和度粉紫配色的按钮，配合强烈的发光效果，适合赛博朋克风格的界面。

vue

<template>
  <ScifiButtonExo className="btn-vapor">
    VAPORWAVE
  </ScifiButtonExo>
</template>

<style lang="less">
.btn-vapor {
  /* --- 默认状态 (Default) --- */
  --sf-button-bg_def: rgba(40, 0, 40, 0.6);  /* 深紫背景 */
  --sf-button-bd_def: #d946ef;               /* 粉紫边框 */
  --sf-button-fc_def: #f0abfc;               /* 浅粉文字 */

  /* --- 悬停状态 (Hover) --- */
  --sf-button-bg_hov: rgba(80, 0, 80, 0.8);
  --sf-button-bd_hov: #e879f9;               /* 亮粉边框 */
  --sf-button-fc_hov: #ffffff;

  /* --- 装饰色 --- */
  --sf-button-hlite: #22d3ee;  /* 撞色青：端盖高亮 */
  --sf-button-glow: #c026d3;   /* 紫色光晕 */
  --sf-button-focus: #e879f9;  /* 辅助粉色 */
}
</style>

API 参考

Props

属性名	说明	类型	默认值
appearance	外观变体。可选值: `'A'` (开放端盖), `'B'` (封闭装甲)	`String`	`'A'`
size	尺寸。可选值: `'default'`, `'large'`, `'small'`	`String`	`'default'`
disabled	禁用状态。开启后样式变灰且不可点击	`Boolean`	`false`
glow	发光开关。是否开启胶囊辉光	`Boolean`	`true`
glowOpacity	发光不透明度	`Number`	—
decorationColorAlt	装饰变体。是否交换高亮色与焦点色	`Boolean`	`false`
scaleAction	缩放动画。是否开启悬停/点击时的缩放效果	`Boolean`	`true`
backgroundOpacity	背景不透明度	`Number`	—
borderWidth	边框线条宽度 (px)	`Number`	—
className	自定义类名	`String`	—

Slots

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

CSS Variables

变量名	说明	默认值
--sf-button-hlite	端盖线条 (End Caps) 的装饰色	`var(--scifi-hlite)`
--sf-button-focus	辅助装饰色	`var(--scifi-focus)`
--sf-button-bdw	边框宽度	`1px`
--sf-button-bg_{state}	各状态背景色	`var(--button-bg_*)`

ScifiButtonExo ​

基础用法 ​

默认形态 ​

外观变体 ​

模式对比 ​

状态与交互 ​

禁用与激活 (Disabled & Active) ​

尺寸控制 (Size) ​

视觉定制 ​

装饰与配色 ​

CSS变量 ​

案例：霓虹粉波风格 (Neon Vapor) ​

API 参考 ​

Props ​

Slots ​

CSS Variables ​