Button Shade 暗影

🏅原创

科幻按钮-暗影 是 TechUI Tui Button 系列中的广谱装饰型组件。

它专注于 “多态边界 (Polymorphic Borders)” 的演绎。它不仅仅是一个单一样式的按钮，而是一个拥有庞大变体库的集合体。

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

基础用法

默认为 A型暗影，在按钮的左右有两个明显的暗影效果。

vue

<template>
  <div class="demo-row">
    <TuiButtonShade>Default</TuiButtonShade>
    <TuiButtonShade type="primary">Primary</TuiButtonShade>
    <TuiButtonShade type="success">Success</TuiButtonShade>
    <TuiButtonShade type="warning">Warning</TuiButtonShade>
    <TuiButtonShade type="danger">Danger</TuiButtonShade>
    <TuiButtonShade type="emphasis">Emphasis</TuiButtonShade>
  </div>
  <div class="demo-row">
    <TuiButtonShade plain>Plain Default</TuiButtonShade>
    <TuiButtonShade type="primary" plain>Plain Primary</TuiButtonShade>
    <TuiButtonShade type="info" plain>Plain Info</TuiButtonShade>
  </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:西侧
- G:西北
- H:东北
- I:西南
- J:东南

vue

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

  <div class="demo-label">Type C & D</div>
  <div class="demo-row">
    <TuiButtonShade decoType="C" type="success">Type C Success</TuiButtonShade>
    <TuiButtonShade decoType="C" plain type="warning">Type C Plain</TuiButtonShade>
    <TuiButtonShade decoType="D" type="danger">Type D Danger</TuiButtonShade>
    <TuiButtonShade decoType="D" type="emphasis">Type D Emphasis</TuiButtonShade>
  </div>

  <div class="demo-label">Type E</div>
  <div class="demo-row">
    <TuiButtonShade decoType="E" type="info">Type E Info</TuiButtonShade>
    <TuiButtonShade decoType="E" type="primary" size="large">Large E</TuiButtonShade>
  </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>

几何控制

TuiButtonShade 的所有变体（A-J）均支持以下两个几何参数，用于微调按钮的物理外观：

borderRadius: 控制按钮的圆角半径。
decoThickness: 控制装饰边框或光影层的厚度。

vue

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

  <div class="demo-label">厚度控制 (decoThickness)</div>
  <div class="demo-row">
    <TuiButtonShade decoType="D" type="danger" :decoThickness="5">Thickness 5</TuiButtonShade>
    <TuiButtonShade decoType="E" type="info" :decoThickness="1">Thickness 1</TuiButtonShade>
    <TuiButtonShade decoType="F" type="emphasis" :decoThickness="4" :borderRadius="20">Mixed</TuiButtonShade>
  </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">
    <TuiButtonShade decoType="A" disabled>Disabled A</TuiButtonShade>
    <TuiButtonShade decoType="B" disabled type="primary">Disabled B</TuiButtonShade>
    <TuiButtonShade decoType="C" disabled plain type="warning">Disabled C Plain</TuiButtonShade>
  </div>
  
  <div class="demo-label">Custom Color</div>
  <div class="demo-row">
    <TuiButtonShade decoType="J" customColor="#8a2be2">Custom J</TuiButtonShade>
    <TuiButtonShade decoType="A" plain customColor="#00ced1">Custom A Plain</TuiButtonShade>
  </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

TuiButtonShade 继承了基础 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`	-	-
native-type	原生 button 类型	`string`	`button` / `submit` / `reset`	`button`

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

参数	说明	类型	可选值	默认值	适用类型
decoType	装饰变体类型	`string`	`A` / `B` / `C` / `D` / `E` / `F` / `G` / `H` / `I` / `J`	`A`	All
borderRadius	边框圆角大小	`number`	-	-	All
decoThickness	装饰/边框厚度	`number`	-	-	All

Slots

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

Events

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

Button Shade 暗影 ​

基础用法 ​

多样化风格 ​

几何控制 ​

状态展示 ​

API 参考 ​

Props ​

Slots ​

Events ​