Button Phase 相位

🏅原创

科幻按钮-相位 是 TechUI Tui Button 系列中的状态指示型组件。

它引入了独特的 “相位条 (Phase Bar)” 设计语言。与普通按钮均匀的背景填充不同，它的视觉核心在于按钮内部拥有一个浮动的高亮色块。

该组件包含 6 种 不同的相位风格（A-F），涵盖了顶部挂载、底部支撑、侧边索引等多种形态。这个高亮色块不仅仅是装饰，更像是一个状态游标，支持通过参数精细控制其位置与厚度。

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

基础用法

默认为 A型相位，表现为标准的基础底部高亮条效果，支持高度自定义的圆角设置。

vue

<template>
  <div class="demo-row">
    <TuiButtonPhase>Default</TuiButtonPhase>
    <TuiButtonPhase type="primary">Primary</TuiButtonPhase>
    <TuiButtonPhase type="success">Success</TuiButtonPhase>
    <TuiButtonPhase type="warning">Warning</TuiButtonPhase>
    <TuiButtonPhase type="danger">Danger</TuiButtonPhase>
    <TuiButtonPhase type="emphasis">Emphasis</TuiButtonPhase>
  </div>
  <div class="demo-row">
    <TuiButtonPhase plain>Plain Default</TuiButtonPhase>
    <TuiButtonPhase type="primary" plain>Plain Primary</TuiButtonPhase>
    <TuiButtonPhase type="info" plain>Plain Info</TuiButtonPhase>
  </div>
</template>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
</style>

多样化风格

通过 decoType 属性切换 A-J型 显示不同方向的浮动高亮条的效果:
- A:南侧
- B:北侧
- C:西侧
- D:东侧
- E:南北
- F:东西

vue

<template>
  <div class="demo-label">Type B</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="B">Default</TuiButtonPhase>
    <TuiButtonPhase decoType="B" type="invert">Invert</TuiButtonPhase>
    <TuiButtonPhase decoType="B" type="primary" icon="tui-icon ti-star">Primary</TuiButtonPhase>
  </div>

  <div class="demo-label">Type C</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="C" type="success">Type C Success</TuiButtonPhase>
    <TuiButtonPhase decoType="C" plain type="warning">Type C Plain</TuiButtonPhase>
    <TuiButtonPhase decoType="C" type="primary" size="small" :borderRadius="10">Small Radius</TuiButtonPhase>
  </div>

  <div class="demo-label">Type D</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="D" type="danger">Type D Danger</TuiButtonPhase>
    <TuiButtonPhase decoType="D" type="emphasis">Type D Emphasis</TuiButtonPhase>
  </div>
</template>

<style scoped>
.demo-label {
  font-size: 12px;
  color: var(--vp-c-text-2);
  margin: 10px 0 5px;
}
.demo-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
</style>

vue


<template>
  <div class="demo-label">Type E - Offset & Thickness</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="E" type="info" :decoThickness="6">Thick Bar</TuiButtonPhase>
    <TuiButtonPhase decoType="E" type="primary" :decoOffset="20">Offset 20</TuiButtonPhase>
    <TuiButtonPhase decoType="E" type="primary" :decoOffset="40">Offset 40</TuiButtonPhase>
  </div>

  <div class="demo-label">Type F - Mixed Config</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="F" type="emphasis" :decoOffset="0">No Offset</TuiButtonPhase>
    <TuiButtonPhase decoType="F" type="success" :decoOffset="8">Offset 8</TuiButtonPhase>
    <TuiButtonPhase decoType="F" type="warning" size="small" :decoOffset="2">Small Offset</TuiButtonPhase>
  </div>
</template>

<style scoped>
.demo-label {
  font-size: 12px;
  color: var(--vp-c-text-2);
  margin: 10px 0 5px;
}
.demo-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
</style>

圆角控制

TuiButtonPhase 支持通过 borderRadius 属性灵活控制圆角，从直角到全圆角均可适配。

vue

<template>
  <div class="demo-label">圆角控制 (borderRadius)</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="A" type="primary" :borderRadius="50">Radius 50</TuiButtonPhase>
    <TuiButtonPhase decoType="B" type="success" :borderRadius="10">Radius 10</TuiButtonPhase>
    <TuiButtonPhase decoType="C" type="warning" :borderRadius="0">Radius 0</TuiButtonPhase>
  </div>
</template>

<style scoped>
.demo-label {
  font-size: 12px;
  color: var(--vp-c-text-2);
  margin: 10px 0 5px;
}
.demo-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
</style>

状态展示

支持 disabled (禁用) 与 plain (朴素) 状态。在禁用状态下，内部的相位高亮条会自动变灰或降低透明度。

vue

<template>
  <div class="demo-label">Disabled State</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="A" disabled>Disabled A</TuiButtonPhase>
    <TuiButtonPhase decoType="B" disabled type="primary">Disabled B</TuiButtonPhase>
    <TuiButtonPhase decoType="C" disabled plain type="warning">Disabled C Plain</TuiButtonPhase>
    <TuiButtonPhase decoType="D" disabled plain type="danger">Disabled D Plain</TuiButtonPhase>
  </div>
  
  <div class="demo-label">Custom Color</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="E" customColor="#8a2be2">Custom E</TuiButtonPhase>
    <TuiButtonPhase decoType="A" plain customColor="#00ced1">Custom A Plain</TuiButtonPhase>
  </div>
</template>

<style scoped>
.demo-label {
  font-size: 12px;
  color: var(--vp-c-text-2);
  margin: 10px 0 5px;
}
.demo-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
</style>

API 参考

Props

TuiButtonPhase 继承了基础 TuiButton 的部分通用属性。

参数	说明	类型	可选值	默认值
type	按钮类型 (颜色主题)	`string`	`default` / `invert` / `focus` / `info` / `primary` / `success` / `warning` / `danger` / `emphasis`	`default`
plain	是否为朴素按钮	`boolean`	-	`false`
disabled	是否禁用	`boolean`	-	`false`
loading	是否加载中	`boolean`	-	`false`
size	尺寸	`string`	`large` / `small`	-
icon	图标类名	`string`	-	-
customColor	自定义颜色	`string` / `Array`	-	-

以下是该组件特有的属性。

参数	说明	类型	可选值	默认值	适用类型
decoType	相位风格类型	`string`	`A` / `B` / `C` / `D` / `E` / `F`	`A`	All
borderRadius	边框圆角大小	`number`	-	-	All
decoOffset	相位条偏移量/位置	`number`	-	-	E, F
decoThickness	相位条厚度	`number`	-	-	E

Slots

插槽名	说明
default	按钮内容
icon	图标插槽

Events

事件名	说明	回调参数
click	点击按钮时触发	`(event: Event)`

Button Phase 相位 ​

基础用法 ​

多样化风格 ​

圆角控制 ​

状态展示 ​

API 参考 ​

Props ​

Slots ​

Events ​