Button 按钮

示例

import { Button, Header, ScrollView, TopView, GroupList, Space, duxappTheme } from '@/duxuiExample'

export default function ButtonExample() {
  return <TopView>
    <Header title='Button' />
    <ScrollView>
      <GroupList>
        <GroupList.Item title='基础按钮'>
          <Button type='primary'>按钮</Button>
        </GroupList.Item>
        <GroupList.Item title='镂空按钮'>
          <Button plain type='primary'>按钮</Button>
        </GroupList.Item>
        <GroupList.Item title='使用渐变'>
          <Space>
            <Button color={[duxappTheme.primaryColor, duxappTheme.secondaryColor]}>默认从左到右</Button>
            <Button color={[duxappTheme.primaryColor, duxappTheme.secondaryColor]} colorAngle={180}>指定角度从上到下</Button>
          </Space>
        </GroupList.Item>
        <GroupList.Item title='圆角类型'>
          <Space row>
            <Button type='primary' radiusType='round'>按钮</Button>
            <Button type='primary' radiusType='round-min'>按钮</Button>
            <Button type='primary' radiusType='square'>按钮</Button>
          </Space>
        </GroupList.Item>
        <GroupList.Item title='颜色'>
          <Space>
            <Button>默认</Button>
            <Button type='primary'>主色</Button>
            <Button type='secondary'>辅色</Button>
            <Button type='success'>成功</Button>
            <Button type='warning'>警告</Button>
            <Button type='danger'>失败</Button>
          </Space>
        </GroupList.Item>
        <GroupList.Item title='禁用'>
          <Button type='primary' disabled >按钮</Button>
        </GroupList.Item>
        <GroupList.Item title='加载中'>
          <Button type='primary' loading>按钮</Button>
        </GroupList.Item>
        <GroupList.Item title='按钮尺寸'>
          <Space>
            <Button type='primary' size='s'>按钮 s</Button>
            <Button type='primary' size='m'>按钮 m</Button>
            <Button type='primary' size='l'>按钮 l</Button>
          </Space>
        </GroupList.Item>
      </GroupList>

    </ScrollView>
  </TopView>
}

Props

继承自Taro的View Props

如果指定了 openType 那么他就会继承 Button Props （仅限小程序端）

type

按钮类型，类型用来指定主题颜色

类型	必填	默认值
enum('default', 'primary', 'secondary', 'success', 'danger', 'warning', 'custom1', 'custom2', 'custom3')	否	default

color

按钮颜色 设置多个颜色(数组的第一项和第二项)可以渐变 此属性优先级低于type

类型	必填	默认值
string | string[]	否

colorAngle

当你设置了多个颜色后，指定渐变颜色的角度，默认90从左到右

类型	必填	默认值
number	否	90

radiusType

指定按钮圆角类型

• square 直角
• round 圆角
• round-min 很小的圆角

类型	必填	默认值
enum('square', 'round', 'round-min')	否	round-min

size

按钮尺寸

类型	必填	默认值
enum('s', 'm', 'l')	否	m

plain

是否镂空效果，这个效果有边框和文本，背景透明，当为渐变是此属性不会生效

类型	必填	默认值
boolean	否	false

disabled

是否禁用

类型	必填	默认值
boolean	否	false

loading

是否显示loading动画，显示在按钮的左侧

类型	必填	默认值
boolean	否	false

onClick

按钮点击事件，如果按钮 disabled 设置为true，不会触发这个事件

类型	必填	默认值
(e) => void	否

openType

小程序的 openType属性 请查看Taro文档 OpenType

当指定这个属性后，按钮组件将使用 Button去实现，否则使用View实现

类型	必填	默认值
OpenType	否

textStyle

按钮文字样式

类型	必填	默认值
CSSProperties	否

renderContent

自定义渲染按钮内容 当你的内容是图片或者图标以外的内容时，使用此属性替换

类型	必填	默认值
ReactElement	否

children

按钮内容 支持文本或者图标

类型	必填	默认值
string | ReactElement	否

主题配置

主题配置位于 option.duxui.button

color

用于指定默认 color 属性

radiusType

用于指定默认的 radiusType 属性

size

用于指定默认的 size 属性

plain

用于指定默认的 plain 属性

sizes

用于指定不同size下按钮的大小

可以指定三个尺寸的字号，高度，内边距

{
  s: { fs: 24, p: 20, h: 50 },
  m: { fs: 28, p: 30, h: 70 },
  l: { fs: 32, p: 40, h: 90 }
}