TechUI Docs

简中

EN

简中

EN

主题

ScifiButton 科技按钮综述 ​

TechUI Scifi Button 是专为科幻（Sci-Fi）、赛博朋克（Cyberpunk）及军武风格界面打造的高性能交互组件库。

与传统的 CSS 按钮不同，ScifiButton 全系基于 SVG (Scalable Vector Graphics) 构建。这使得它们能够呈现出 CSS border-radius 无法实现的复杂几何形态（如物理切角、镂空括弧、机械咬合结构），同时保持在任意屏幕分辨率下的绝对清晰。

它是 ScifiPanel 系列的最佳交互伴侣，共同构建统一的未来派 UI 语言。

核心特性 ​

  • SVG 矢量渲染: 告别图片切图。所有按钮均由代码实时绘制，体积轻量，无锯齿。
  • 多态外观: 每个组件内置 A/B/C 等多种几何变体，无需更换组件即可改变视觉风格。
  • 智能交互引擎: 内置基于 SVGDefs 的统一交互逻辑。自动处理 悬停(Hover)、激活(Active)、禁用(Disabled) 的样式流转，并支持 缩放(Scale) 与 流光(Glow) 动画。
  • 深度定制 (Theming): 开放全量的 CSS 变量接口，支持从“默认”到“悬停”再到“激活”的全链路颜色定义。

关于命名与别名 ​

为了平衡开发稳定性与代码可读性，TechUI Scifi 按钮组件采用了双重命名策略。每个组件都拥有一个固定的原始序列名和一个语义化的别名。

  • 原始序列名 (Fixed Serial Name)
    • 例如：ScifiButtonA1、ScifiButtonA5
    • 这是组件的底层物理 ID，基于开发序列命名。它是永久固定且不可变更的。如果您希望您的代码在未来的版本迭代中保持绝对的向后兼容性，建议优先使用此名称。
  • 语义化别名 (Semantic Alias)
    • 例如：ScifiButtonHex、ScifiButtonFin
    • 这是基于外观风格或设计隐喻命名的快捷方式（例如：Hex/晶格、Fin/掠翼），旨在提高代码的可读性。

注意：随着设计语言的演进，个别别名可能会在后期版本中进行语义微调或更名。虽然我们会尽量保持兼容，但在跨大版本升级时请留意相关变更日志。

组件家族 ​

ScifiButton 目前包含 5 个核心组件，分别对应不同的语义场景。

ScifiButtonHex ​

关键词： Universal · Brackets · Standard

系列中的万能型按钮。采用经典的“四角括弧”设计。

  • 适用场景: 页面主操作、表单提交、弹窗确认。
  • 特点: 拥有最全的外观变体（A/B/C），适配性最强。

ScifiButtonPod ​

关键词： Toolbar · Horizontal · Clamp

强调横向约束的组件。左右两侧设计了机械夹具或侧翼结构。

  • 适用场景: 工具栏（Toolbar）、功能组、横向排列的选项卡。
  • 特点: 视觉重心在两侧，中间开阔，适合排列放置。

ScifiButtonDash ​

关键词： Data · Precision · Ticks

主打精密感的轻量化组件。使用虚线或刻度代替连续边框。

  • 适用场景: 密集数据列表中的操作项、参数微调、次级指令。
  • 特点: 视觉干扰极低，带有“信号接通”的电子质感。

ScifiButtonExo ​

关键词： Capsule · Toggle · Solid

融合了圆润手感与硬核切角的胶囊型组件。

  • 适用场景: 状态切换（Start/Stop）、模块启停、独立的浮动按钮。
  • 特点: 结构封闭感强，像是一个实体的物理按键。

ScifiButtonFin ​

关键词： Direction · Speed · Skew

采用平行四边形设计的速度型组件。

  • 适用场景: “下一步/上一步”导航、游戏界面、强调动势的操作。
  • 独有特性: 支持 directionAlt 属性来控制向左或向右倾斜。

通用 API 速查 ​

ScifiButton 全系组件共享一套标准化的 Props 定义，降低了学习成本。

属性名说明默认值
appearance外观模式。通常支持 'A', 'B' 等变体'A'
size尺寸。支持 'default', 'large', 'small''default'
disabled禁用状态。开启后样式变灰，禁止交互false
glow发光开关。控制背景流光和边框光晕true
scaleAction缩放反馈。悬停/点击时的微缩放动画true
decorationColorAlt配色反转。交换高亮色与焦点色false

快速上手 ​

vue
<script setup>
import { ScifiButtonHex, ScifiButtonFin } from '@techui/scifi-button'
</script>

<template>
  <div class="control-panel">
    <ScifiButtonHex @click="handleSubmit">
      CONFIRM
    </ScifiButtonHex>

    <ScifiButtonHex :decorationColorAlt="true">
      ABORT
    </ScifiButtonHex>

    <div class="nav-group">
      <ScifiButtonFin :directionAlt="true">PREV</ScifiButtonFin>
      <ScifiButtonFin>NEXT</ScifiButtonFin>
    </div>
  </div>
</template>

CSS变量系统 ​

ScifiButton 的样式由一组标准化的 CSS 变量控制。您可以在任何层级覆盖它们。

css
/* 全局覆盖或局部类名覆盖 */
.my-custom-theme {
  /* --- 1. 定义状态色 (Def/Hov/Act/Dis) --- */
  --sf-button-bg_def: rgba(0, 50, 100, 0.5); /* 默认背景 */
  --sf-button-bd_def: #00aaff;               /* 默认边框 */
  --sf-button-fc_def: #ffffff;               /* 默认文字 */
  
  --sf-button-bd_hov: #66ccff;               /* 悬停边框 */
  --sf-button-bd_act: #ffffff;               /* 激活边框 */

  /* --- 2. 定义装饰色 --- */
  --sf-button-hlite: #00aaff;  /* 高亮装饰 */
  --sf-button-glow: #00aaff;   /* 发光光晕 */
}