• Vant React

Button 按钮

介绍

按钮用于触发一个操作,如提交表单。

引入

import { Button } from "@taroify/core"

代码演示

按钮颜色

按钮支持 defaultprimaryinfosuccesswarningdanger 六种颜色,默认为 default

<Button color="primary">主要按钮</Button>
<Button color="info">信息按钮</Button>
<Button color="success">成功按钮</Button>
<Button color="warning">警告按钮</Button>
<Button color="danger">危险按钮</Button>
<Button color="default">默认按钮</Button>

文本按钮

通过 variant="text" 属性将按钮设置为文本按钮。

<Button variant="text" color="primary">主要按钮</Button>
<Button variant="text" color="info">信息按钮</Button>
<Button variant="text" color="success">成功按钮</Button>
<Button variant="text" color="warning">警告按钮</Button>
<Button variant="text" color="danger">危险按钮</Button>
<Button variant="text" color="default">默认按钮</Button>

轮廓按钮

通过 variant="contained" 属性将按钮设置为轮廓按钮。

<Button variant="outlined" color="primary">主要按钮</Button>
<Button variant="outlined" color="info">信息按钮</Button>
<Button variant="outlined" color="success">成功按钮</Button>
<Button variant="outlined" color="warning">警告按钮</Button>
<Button variant="outlined" color="danger">危险按钮</Button>
<Button variant="outlined" color="default">默认按钮</Button>

细边框

设置 hairline 属性可以展示 0.5px 的细边框。

<Button variant="outlined" color="primary" hairline>主要按钮</Button>
<Button variant="outlined" color="info" hairline>信息按钮</Button>
<Button variant="outlined" color="success" hairline>成功按钮</Button>
<Button variant="outlined" color="warning" hairline>警告按钮</Button>
<Button variant="outlined" color="danger" hairline>危险按钮</Button>
<Button variant="outlined" color="default" hairline>默认按钮</Button>

禁用状态

通过 disabled 属性来禁用按钮,禁用状态下按钮不可点击。

<Button variant="contained" color="primary" disabled>主要按钮</Button>
<Button variant="contained" color="info" disabled>信息按钮</Button>
<Button variant="contained" color="success" disabled>成功按钮</Button>
<Button variant="contained" color="warning" disabled>警告按钮</Button>
<Button variant="contained" color="danger" disabled>危险按钮</Button>
<Button variant="contained" color="default" disabled>默认按钮</Button>

加载状态

通过 loading 属性设置按钮为加载状态,可以通过 {type: "spinner"} 设置加载类型。

<Button color="success" loading />
<Button color="success" loading={{ type: "spinner" }} />
<Button color="primary" loading>加载中...</Button>

按钮形状

通过 shape="square" 设置方形按钮,通过 shape="round" 设置圆形按钮。

<Button variant="contained" color="primary" shape="square">方形按钮</Button>
<Button variant="contained" color="primary" shape="round">圆形按钮</Button>

图标按钮

通过 icon 属性设置按钮图标,支持 Icon 组件里的所有图标,也可以传入图标 URL。

<Button variant="contained" color="primary" icon={<DoneOutlined />} />
<Button variant="contained" color="primary" icon={<DoneOutlined />}>主要按钮</Button>
<Button variant="outlined" color="primary" icon={<DoneOutlined />} iconPosition="right">轮廓按钮</Button>

按钮尺寸

支持 largemediumsmallmini 四种尺寸,默认为 medium

<Button color="primary" size="large">大号按钮</Button>
<Button color="primary" size="medium">普通按钮</Button>
<Button color="primary" size="small">小型按钮</Button>
<Button color="primary" size="mini">迷你按钮</Button>

块级元素

按钮在默认情况下为行内块级元素,通过 block 属性可以将按钮的元素类型设置为块级元素。

<Button color="primary" block>块级按钮</Button>

自定义颜色

通过 css 属性可以自定义按钮的颜色。

<Button style={{ backgroundColor: "#7232dd", color: "#fff" }}>单色按钮</Button>
<Button style={{ borderColor: "#7232dd", color: "#7232dd" }}>单色按钮</Button>
<Button style={{ background: "linear-gradient(to right, #ff6034, #ee0a24)", color: "#fff" }}>渐变色按钮</Button>

按钮组

<Button.Group variant="contained" color="primary" shape="round">
  <Button> <ArrowLeft /> 上一步</Button>
  <Button> <Replay /> 刷新</Button>
  <Button>下一步 <Arrow /></Button>
</Button.Group>

<Button.Group variant="outlined" shape="round" size="small">
  <Button> <ArrowLeft /> 上一步</Button>
  <Button><Replay /> 刷新</Button>
  <Button>下一步 <Arrow /></Button>
</Button.Group>

<Button.Group variant="text" color="primary" shape="round">
  <Button> <ArrowLeft /> 上一步</Button>
  <Button> <Replay /> 刷新</Button>
  <Button>下一步 <Arrow /></Button>
</Button.Group>

API

Props

参数说明类型默认值
variant按钮变种,可选值为 contained text outlinedstringcontained
color按钮颜色,可选值为 primary success warning dangerstringdefault
size尺寸,可选值为 large small ministringmedium
shape按钮形状,可选值为 square roundstringsquare
icon左侧图标图片ReactNode-
iconPosition图标展示位置,可选值为 rightstringleft
formType原生 button 标签的 type 属性stringbutton
block是否为块级元素booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否使用 0.5px 边框booleanfalse
loading是否显示为加载状态boolean | LoadingPropsfalse
children按钮文字string-

Button.Group Props

参数说明类型默认值
variant按钮变种,可选值为 contained text outlinedstringcontained
color按钮颜色,可选值为 primary success warning dangerstringdefault
size尺寸,可选值为 large small ministringmedium
shape按钮形状,可选值为 roundstringsquare
block是否为块级元素boolean-
disabled是否禁用按钮boolean-
hairline是否使用 0.5px 边框boolean-

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称默认值描述
—button-line-height1.2-
—button-border-widthvar(—border-width-base)-
—button-border-radiusvar(—border-radius-sm)-
—button-border-radius-maxvar(—border-radius-max)-
—button-transition-durationvar(—animation-duration-fast)-
—button-disabled-opacityvar(—disabled-opacity)-
—button-loading-icon-size20px * $hd-
—button-height-mini24px * $hd-
—button-padding-mini0 var(—padding-base)-
—button-font-size-minivar(—font-size-xs)-
—button-height-small32px * $hd-
—button-padding-small0 var(—padding-xs)-
—button-font-size-smallvar(—font-size-sm)-
—button-height-medium44px * $hd-
—button-padding-medium0 var(—padding-md)-
—button-font-size-mediumvar(—font-size-md)-
—button-height-large50px * $hd-
—button-font-size-largevar(—font-size-lg)-
—button-default-colorvar(—text-color)-
—button-default-background-colorvar(—white)-
—button-default-border-colorvar(—border-color)-
—button-primary-colorvar(—white)-
—button-primary-background-colorvar(—primary-color)-
—button-primary-border-colorvar(—button-primary-background-color)-
—button-info-colorvar(—white)-
—button-info-background-colorvar(—info-color)-
—button-info-border-colorvar(—button-info-background-color)-
—button-success-colorvar(—white)-
—button-success-background-colorvar(—success-color)-
—button-success-border-colorvar(—button-success-background-color)-
—button-warning-colorvar(—white)-
—button-warning-background-colorvar(—warning-color)-
—button-warning-border-colorvar(—button-warning-background-color)-
—button-danger-colorvar(—white)-
—button-danger-background-colorvar(—danger-color)-
—button-danger-border-colorvar(—button-danger-background-color)-