Sobre el uso básico del botón Botón del marco de diseño de react-Ant

prefacio

Recientemente, estoy aprendiendo el marco de diseño de react-Ant, y registraré algunos usos básicos del componente de botón.

Introducir marco usando componentes

Botón básico

Primero, tenemos que importar Ant Design y los botones internos para usarlo. Por supuesto, asegúrese de haber instalado Ant Design en el proyecto antes, a
continuación se muestra el botón básico:

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>
  )
})

Efecto:

botón con icono

También puede importar un icono para implementar un botón con un icono:

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>

Efecto:

el estado de carga del botón

El componente del botón también puede realizar el estado de carga a través de la carga. Aquí hacemos un efecto: haga clic en el botón para controlar el estado de carga de otro botón:

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)
  }
})

Darse cuenta del efecto:

control de tamaño de botón

También puede modificar el tamaño del botón a través del atributo de tamaño, aquí también hacemos un requisito: seleccione el tamaño del botón de control haciendo clic en el botón de radio

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)
  }
})

Darse cuenta del efecto: