Skip to content

基础按钮 ​


vue
<fv-button borderRadius="3"></fv-button>

带图标的按钮 ​


vue
<fv-button icon="CalculatorAddition" theme="dark">Add</fv-button>

自定义按钮 ​


vue
<fv-button icon="CalculatorAddition" :isBoxShadow="true">Add</fv-button>
vue
<fv-button icon="CalculatorAddition" theme="dark" background="linear-gradient(to right, #000046, #1cb5e0)" borderRadius="3" :isBoxShadow="true">Add</fv-button>

自定义 Reveal 边框

vue
<fv-button icon="CalculatorAddition" theme="dark" background="#000046" revealBorderColor="#1cb5e0" revealBackgroundColor="rgba(28, 181, 226, 0.3)" borderRadius="3" borderWidth="3" :isBoxShadow="true">Add</fv-button>

禁用按钮 ​


vue
<fv-button disabled icon="CalculatorAddition">Add</fv-button>

属性 ​


属性类型必填默认值说明
iconstring否''Icon with Fabric-Icon
foregroundstring否''Button 前景色。
backgroundstring否''Button 背景色。
borderRadiusnumber否3Button 圆角大小。
borderColorstring否''Button 边框颜色。
fontSizenumber否13.3Button 字体大小。
fontWeightstring否'normal'Button 字体粗细。
revealBorderColorboolean否falseButton Reveal 边框颜色。
revealBackgroundColorboolean否falseButton Reveal 背景颜色。
isBoxShadowboolean否false开启Button阴影。
disabledboolean否falseDisabled button
borderWidthnumber否1Button 边框宽度。
themestring否'global'主题样式。支持 global、light、dark、system 和 custom。
revealBorderGradientListarray否[]参见组件的 revealBorderGradientList 选项。
revealBackgroundGradientListarray否[]参见组件的 revealBackgroundGradientList 选项。
langstring否"global"参见组件的 lang 选项。

事件 ​


事件名参数说明
clickeventButton onclick

插槽 ​


  1. Default
javascript
<fv-button>
    <div></div>
</fv-button>

MIT Licensed