About the basic usage of the Button button of the react-Ant Design framework

foreword

Recently, I am learning the react-Ant Design framework, and I will record some basic usage of the button component.

Introduce framework using components

Basic button

First, we have to import Ant Design and the buttons inside to use it. Of course, make sure that you have installed Ant Design in the project before.
Below is the basic button:

import React, {
    
     memo } from 'react'
import {
    
     Button } from 'antd'
import './index.scss'

// React.memo是一个高阶组件,memo类似于PureComponent,不同的是,memo是一个function组件
export default memo(function Index() {
    
    
  return (
    <div className='wrap'>
      <Card title='基础款按钮' className='button-wrap'>
        <Button>按钮</Button>
        <Button type='primary'>按钮</Button>
        <Button type='danger'>按钮</Button>
        <Button type='dashed'>按钮</Button>
      </Card>
    </div>
  )
})

Effect:

insert image description here

button with icon

You can also import icon to implement a button with an icon:

import {
    
    
  PlusOutlined,
  DeleteOutlined,
  EditOutlined,
  SearchOutlined,
  LeftOutlined,
  RightOutlined
  } from '@ant-design/icons'

<Card title='图表款按钮组' className='button-wrap'>
  <Button icon={
    
    <PlusOutlined />}>添加</Button>
  <Button icon={
    
    <DeleteOutlined />}>删除</Button>
  <Button icon={
    
    <EditOutlined />}>修改</Button>
  <Button icon={
    
    <SearchOutlined />}>查找</Button>
  <Button icon={
    
    <SearchOutlined />} shape='circle'></Button>
  <Button icon={
    
    <SearchOutlined />} shape='round'></Button>
</Card>

Effect:

insert image description here

the loading state of the button

The button component can also realize the loading state through loading. Here we make an effect: click the button to control the loading state of another button:

export default memo(function Index() {
    
    
  const [loading, setLoadnig] = useState(true)
  return (
    <div className='wrap'>
      <Card title='loading按钮' className='button-wrap'>
        <Button type='primary' loading={
    
    loading}>加载中</Button>
        <Button onClick={
    
    e=>close()}>关闭加载</Button>
        <Button onClick={
    
    e=>open()}>打开加载</Button>
      </Card>
    </div>
  )
  function open() {
    
    
    setLoadnig(true)
  }
  function close() {
    
    
    setLoadnig(false)
  }
})

Realize the effect:

insert image description here

button size control

You can also modify the size of the button through the size attribute. Here we also make a requirement: select the size of the control button by clicking the radio button

export default memo(function Index() {
    
    
  const [size, setSize] = useState('default')
  return (
    <div className='wrap'>
      <Card title='控制按钮尺寸' className='button-wrap'>
        <Radio.Group value={
    
    size} onChange={
    
    e=>changeSize(e)}>
          <Radio value='large'>大</Radio>
          <Radio value='default'>中</Radio>
          <Radio value='small'>小</Radio>
        </Radio.Group>
          <Button type='primary' size={
    
    size}>金渡教育</Button>
          <Button type='danger' size={
    
    size}>金渡教育</Button>
          <Button type='dashed' size={
    
    size}>金渡教育</Button>
      </Card>
    </div>
  )
  function changeSize(e) {
    
    
    console.log(e)
    setSize(e.target.value)
  }
})

Realize the effect:

insert image description here