ScifiButtonDash

⚡WASM 驱动

⭐明星组件

👑首创

科幻按钮-突进 是 TechUI Scifi Button 系列中的精密数据型组件。

它的设计灵感源自战术显示器上的 “数据读数 (Data Readout)” 与 “信号频段 (Signal Band)”。它大胆摒弃了传统的连续重型边框，转而采用断续的 几何刻度 与 虚线段 来界定按钮边界。

这种 “非连续 (Discontinuous)” 的视觉特征极大地降低了组件的视觉噪点。它非常适合用于 高密度数据列表、参数调整面板 或 次级操作区。在这些场景中，它既能提供清晰的交互反馈，又不会因为线条堆叠而导致界面杂乱，确保了信息的高效传递。

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

基础用法

默认形态

使用默认插槽传入按钮文本或图标。默认情况下 (Appearance A)，按钮的四角或底部带有类似“信号强度”的条状刻度装饰。

vue

<template>
  <div class="btn-group">
    <ScifiButtonDash>
      CALIBRATE
    </ScifiButtonDash>
    
    <ScifiButtonDash>
      <Icon name="settings" /> CONFIGURE
    </ScifiButtonDash>
  </div>
</template>

外观变体

A3 提供了两种外观风格，主要区别在于刻度的位置和密度。

模式对比

Type A (默认): 四角刻度。在按钮的四个角落分布着微型的 L 型或一字型刻度，视觉重心分散，适合独立按钮。
Type B: 底部阵列。装饰元素集中在按钮的底部或两侧，呈现为一排整齐的信号块，具有很强的“底座”感，适合作为选项卡 (Tab) 或导航按钮。

vue

<template>
  <div class="grid">
    <ScifiButtonDash appearance="A">Corner Ticks (A)</ScifiButtonDash>
    <ScifiButtonDash appearance="B">Base Array (B)</ScifiButtonDash>
  </div>
</template>

状态与交互

A3 的交互动效强调“信号接通”的瞬时感。

禁用与激活 (Disabled & Active)

disabled: 禁用状态。刻度熄灭，背景透明度大幅降低，呈现“信号丢失”的离线感。
className="is-active": 激活状态。所有的刻度装饰瞬间点亮，仿佛数据传输通道已打通。

vue

<template>
  <div class="row">
    <ScifiButtonDash :disabled="true">
      NO SIGNAL
    </ScifiButtonDash>

    <ScifiButtonDash className="is-active">
      CONNECTED
    </ScifiButtonDash>
  </div>
</template>

尺寸控制 (Size)

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

Small: A3 的小尺寸模式非常适合用作分页器 (Pagination) 或 工具栏图标 (Toolbar Icons)。

vue

<template>
  <ScifiButtonDash size="small">PREV</ScifiButtonDash>
  <ScifiButtonDash size="default">INDEX</ScifiButtonDash>
  <ScifiButtonDash size="large">NEXT PAGE</ScifiButtonDash>
</template>

视觉定制

装饰与配色

decorationColorAlt: 交换配色。默认刻度使用高亮色 (Highlight)，开启此项后变为焦点色 (Focus)。可用于区分“普通数据”与“关键参数”。
glow: 开启后，刻度周围会产生微弱的电子辉光。

vue

<template>
  <ScifiButtonDash :decorationColorAlt="true">
    CRITICAL
  </ScifiButtonDash>
  
  <ScifiButtonDash :glow="false">
    ITEM 01
  </ScifiButtonDash>
</template>

CSS变量

A3 的 CSS 变量接口允许您定义出极具未来感的“全息界面”。

案例：赛博黄蜂风格 (Cyber Wasp)

此案例定义了一个黄黑色调的工业风格按钮，模拟工程机械的操作界面。

vue

<template>
  <ScifiButtonDash className="btn-wasp">
    INITIATE
  </ScifiButtonDash>
</template>

<style lang="less">
.btn-wasp {
  /* --- 默认状态 (Default) --- */
  --sf-button-bg_def: rgba(20, 20, 0, 0.6);  /* 暗黄黑背景 */
  --sf-button-bd_def: #854d0e;               /* 暗金边框 */
  --sf-button-fc_def: #fcd34d;               /* 金色文字 */

  /* --- 悬停状态 (Hover) --- */
  --sf-button-bg_hov: rgba(40, 30, 0, 0.8);
  --sf-button-bd_hov: #eab308;               /* 亮黄边框 */
  --sf-button-fc_hov: #ffffff;

  /* --- 装饰色 --- */
  --sf-button-hlite: #facc15;  /* 刻度高亮色 */
  --sf-button-glow: #fbbf24;   /* 黄色辉光 */
  --sf-button-focus: #ffffff;  /* 辅助装饰白 */
}
</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	刻度/阵列 (Ticks/Array) 的装饰色	`var(--scifi-hlite)`
--sf-button-focus	辅助装饰色	`var(--scifi-focus)`
--sf-button-bdw	边框宽度	`1px`
--sf-button-bg_{state}	各状态背景色	`var(--button-bg_*)`

ScifiButtonDash ​

基础用法 ​

默认形态 ​

外观变体 ​

模式对比 ​

状态与交互 ​

禁用与激活 (Disabled & Active) ​

尺寸控制 (Size) ​

视觉定制 ​

装饰与配色 ​

CSS变量 ​

案例：赛博黄蜂风格 (Cyber Wasp) ​

API 参考 ​

Props ​

Slots ​

CSS Variables ​