Skip to content
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 属性可以自定义按钮的颜色,使用自定义颜色之后,simpletext 将不会再继续工作,不过自定义颜色仅支持 hex 格式的色号

使用自定义颜色之后 Fighting Design 会自动推断 hoveractive 的效果,那么需要使用 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