Fighting Design

Appearance

On this page

Button 按钮 ​

这个按钮可不简单

基本使用 ​

type 属性可以配置不同的按钮类型，展示不同的颜色状态

simple 属性可以配置简约的按钮，样式依然由 type 控制


开启

圆角按钮 ​

round 属性可以将按钮变成圆角风格的按钮


开启

圆形按钮 ​

circle 属性可以将按钮变成圆形按钮

开启

带有 Icon ​

before-icon 或者 after-icon 可配置内容前后的 icon，当然你也可以直接通过插槽插入

开启

禁用状态 ​

disabled 属性可以将按钮变成禁用状态

loading 属性可以将按钮变成 loading 状态


开启

不同尺寸 ​

size 属性可以配置不同尺寸的按钮

开启

文字按钮 ​

text 属性可以将按钮设置成文字按钮


开启

带有阴影 ​

可以自定义按钮的阴影样式，可传入一个原生 box-shadow 属性值

或者也可以通过 Neumorphism 自己手动调节阴影样式

开启

涟漪效果 ​

ripples 可以配置是否展示点击涟漪效果，也可以通过 ripples-color 自定义涟漪背景色

开启

扩散效果 ​

spread 可以配置是否展示点击扩散效果

开启

按钮组 ​

使用 f-button-group 组件包裹按钮组件可以实现按钮组效果

vertical 属性可以配置纵向排列的按钮组



开启

自定义颜色 ​

color 属性可以自定义按钮的颜色，使用自定义颜色之后，simple 和 text 将不会再继续工作，不过自定义颜色仅支持 hex 格式的色号

使用自定义颜色之后 Fighting Design 会自动推断 hover 和 active 的效果，那么需要使用 font-color 来自定义文字的颜色

开启

Button Attributes ​

参数说明类型可选值默认值
bold按钮文字是否加粗boolean——false
circle是否为圆形按钮boolean——false
round是否为圆角按钮boolean——false
font-size文字字体大小string / number————
font-color文字字体颜色string————
size按钮尺寸FightingSizelarge middle small minimiddle
block是否为块级元素boolean——false
href链接按钮的地址string————
target原生 target 属性，在 link="true" 时生效FightingTarget_blank _self _parent _top_self
loading是否展示 loading 状态boolean——false
disabled是否禁用按钮boolean——false
before-icon之前的 iconFightingIcon————
after-icon之后的 iconFightingIcon————
loading-iconloading 状态下的 iconFightingIcon————
type按钮的类型 （不同类型对应不同的背景和字体颜色，非自定义按钮颜色时有效）FightingTypedefault primary success danger warning info——
autofocus是否自动获取焦点boolean——false
spread是否带有点击扩散效果boolean——false
name按钮的名字string——f-button
shadow按钮的阴影string————
text是否为文字按钮 （非自定义按钮颜色时有效）boolean——false
simple是否为简约按钮 （非自定义按钮颜色时有效）boolean——false
ripples是否启用点击涟漪效果boolean——false
ripples-color涟漪背景色string————
native-type按钮的原生类型ButtonNativebutton submit resetbutton
color自定义按钮的背景颜色，仅支持 hex 格式的色号。如果未指定font-color，则字体颜色默认为白色string————
on-click点击执行的回调HandleMouse————

ButtonGroup Attributes ​

参数说明类型可选值默认值
size按钮尺寸FightingSizelarge middle small minimiddle
direction排列方式ButtonGroupDirectionhorizontal verticalhorizontal

Button Slots ​

名称说明
default默认按钮的内容

ButtonGroup Slots ​

名称说明
default默认按钮组的内容

Interface ​

组件导出以下类型定义：

ts
import type {
  ButtonInstance,
  ButtonProps,
  ButtonNative,
  ButtonGroupInstance,
  ButtonGroupProps,
  ButtonGroupDirection
} from 'fighting-design'

ButtonNative ​

ts
type ButtonNative = 'submit' | 'reset' | 'button'

ButtonGroupDirection ​

ts
type ButtonGroupDirection = 'horizontal' | 'vertical'

ButtonClick ​

ts
type ButtonClick = (evt: MouseEvent) => void

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述
--button-color文字颜色
--button-background背景色
--button-hoverhover 状态背景色
--button-activeactive 状态背景色
--button-height高度
--button-padding内边距
--button-font-size文字大小
--button-border-radius圆角大小

Contributors ​