ReactAntd(八) ANTD Button

Antd 框架之 Button 总结

Button 总结

(1) 需要引入 Button 组件

import { Button } from 'antd'

(2) 使用

• 形状用 shape

<Button shape="circle"></Button>

• 图标用 icon

import { DownloadOutlined } from '@ant-design/icons'
<Button icon={<DownloadOutlined />}> 下载</Button>

• loading 加载

<Button
  type="primary"
  loading={this.state.loading}
  style={{
    marginRight: '20px',
  }}
>
  点击加载
</Button>

• disabled 禁止

<Button disabled style={{ marginRight: '20px' }}>
  禁用按钮
</Button>

• 类型 type

<Button type="primary" style={{ marginRight: '20px' }}>按钮</Button>
<Button type="default" style={{ marginRight: '20px' }}>按钮</Button>
<Button type="dashed" style={{ marginRight: '20px' }}>按钮</Button>
<Button type="danger" style={{ marginRight: '20px' }}>按钮</Button>

• 尺寸大小

<Button type="dashed" size='small'>次要按钮</Button>
<Button type="danger" size='default'>危险</Button>
<Button disabled size='large'>禁止</Button>

• 长度随父元素长度

<Button block type="primary">
  按钮按照父元素宽度走
</Button>