TechUI Docs

简中

EN

简中

EN

主题

ScifiButtonHex ​

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

科幻按钮-晶格 是 TechUI Scifi Button 系列中的核心基础组件。

它是一款通用的战术风格按钮，也是整个按钮系统的基石。它采用了经典的 “括弧约束 (Bracket Constraint)” 与 “晶体切角 (Crystal Chamfer)” 设计语言。

作为该系列中变体最丰富的组件，它提供了多种视觉形态（A/B/C 变体）：从轻量级的两侧括弧，到全包裹的六边形边框，再到高亮的填充样式。它内置了基于 SVG 的高性能交互动画，支持悬停缩放、点击反馈以及流光效果，能够完美适配从主操作按钮到次级功能键的各种交互场景。

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

基础用法 ​

默认形态 ​

使用默认插槽传入按钮文本或图标。 默认情况下 (Appearance A)，按钮呈现为经典的“四角括弧”包裹形态，适合作为主要的交互触发器。

vue
<template>
  <div class="btn-group">
    <ScifiButtonHex>
      CONFIRM
    </ScifiButtonHex>
    
    <ScifiButtonHex>
      <Icon name="upload" /> UPLOAD DATA
    </ScifiButtonHex>
  </div>
</template>

外观变体 ​

A1 是系列中唯一拥有三种形态的组件，通过 appearance 属性切换。

模式对比 ​

  • Type A (默认): 标准括弧。四角带有明显的 L 型增强括弧，强调点击区域的边界，适合大多数通用场景。
  • Type B: 切角长条。两侧采用切角设计，视觉上更具流线感，适合较长的文字或导航栏选项。
  • Type C: 极简上下。去除了左右边框，仅保留上下线条和角部暗示，适合作为次级按钮或密集排列的按钮组。
vue
<template>
  <div class="grid">
    <ScifiButtonHex appearance="A">Standard (A)</ScifiButtonHex>
    <ScifiButtonHex appearance="B">Chamfered (B)</ScifiButtonHex>
    <ScifiButtonHex appearance="C">Minimal (C)</ScifiButtonHex>
  </div>
</template>

状态与交互 ​

组件内置了完整的交互状态管理，无需手动编写 CSS。

禁用与激活 (Disabled & Active) ​

  • disabled: 禁用按钮。样式会变为暗淡的灰色，且鼠标指针变为不可用状态，不仅是视觉变化，同时会拦截点击事件。
  • className="is-active": 强制激活状态。按钮会保持高亮，常用于表示开关的“开启”状态或当前选中的选项。
vue
<template>
  <div class="row">
    <ScifiButtonHex :disabled="true">
      OFFLINE
    </ScifiButtonHex>

    <ScifiButtonHex className="is-active">
      SELECTED
    </ScifiButtonHex>
  </div>
</template>

尺寸控制 (Size) ​

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

  • Large: 字体放大，内边距增加，适合作为页面主入口。
  • Small: 字体缩小，结构更紧凑，适合工具栏或表格操作列。
vue
<template>
  <ScifiButtonHex size="small">EDIT</ScifiButtonHex>
  <ScifiButtonHex size="default">SAVE</ScifiButtonHex>
  <ScifiButtonHex size="large">LAUNCH</ScifiButtonHex>
</template>

视觉定制 ​

装饰与配色 ​

  • decorationColorAlt: 交换装饰色。默认情况下，高亮色用于发光，焦点色用于点缀。开启此项后两者互换，可用于区分“确认”和“取消”等语义。
  • glow: 是否开启流光背景和边框发光。
  • scaleAction: 是否开启悬停/点击时的缩放动画。
vue
<template>
  <ScifiButtonHex 
    :decorationColorAlt="true" 
    :scaleAction="false"
  >
    CANCEL
  </ScifiButtonHex>
  
  <ScifiButtonHex :glow="false">
    SILENT MODE
  </ScifiButtonHex>
</template>

CSS变量 ​

ScifiButton 系列拥有非常强大的 CSS 变量系统，允许您精确控制 默认(Def)、悬停(Hov)、激活(Act)、禁用(Dis) 四种状态下的 背景(bg)、边框(bd) 和 文字(fc) 颜色。

案例：警告风格 (Warning State) ​

此案例定义了一个橙红色的警告按钮，在悬停时变亮，点击时变白。

vue
<template>
  <ScifiButtonHex className="btn-warning">
    SELF DESTRUCT
  </ScifiButtonHex>
</template>

<style lang="less">
.btn-warning {
  /* --- 默认状态 (Default) --- */
  --sf-button-bg_def: rgba(69, 10, 10, 0.5); /* 深红背景 */
  --sf-button-bd_def: #b91c1c;               /* 红色边框 */
  --sf-button-fc_def: #fca5a5;               /* 浅红文字 */

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

  /* --- 激活状态 (Active) --- */
  --sf-button-bg_act: #ef4444;
  --sf-button-bd_act: #f87171;
  --sf-button-fc_act: #ffffff;

  /* --- 装饰色 (Highlight & Focus) --- */
  --sf-button-hlite: #fca5a5;  /* 装饰点亮色 */
  --sf-button-glow: #ef4444;   /* 发光色 */
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值
appearance外观变体。可选值: 'A' (括弧), 'B' (切角), 'C' (极简)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 ​

以下变量均支持通过 className 覆盖。

变量名说明默认值 (Light/Dark)
状态颜色
--sf-button-bg_{state}背景色 (def, hov, act, dis)var(--button-bg_*)
--sf-button-bd_{state}边框色 (def, hov, act, dis)var(--button-bd_*)
--sf-button-fc_{state}文字色 (def, hov, act, dis)var(--button-fc_*)
装饰与效果
--sf-button-hlite高亮装饰色var(--scifi-hlite)
--sf-button-focus焦点装饰色var(--scifi-focus)
--sf-button-glow发光颜色var(--scifi-hlite)
--sf-button-glowop发光强度0.5
--sf-button-bdw边框宽度1px