react-Ant Design 프레임워크의 Button 버튼 기본 사용법

머리말

최근에 나는 react-Ant Design 프레임워크를 배우고 있으며 버튼 컴포넌트의 기본적인 사용법을 기록할 것입니다.

컴포넌트를 이용한 프레임워크 도입

기본 버튼

먼저 Ant Design과 내부의 버튼을 가져와 사용해야 합니다. 물론 이전에 프로젝트에 Ant Design을 설치했는지 확인하십시오.
기본 버튼은 다음과 같습니다.

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

효과:

아이콘이 있는 버튼

아이콘을 가져와 아이콘이 있는 버튼을 구현할 수도 있습니다.

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>

효과:

버튼 로딩 상태

버튼 구성 요소는 로딩을 통해 로딩 상태를 실현할 수도 있습니다. 여기에서 우리는 효과를 냅니다: 버튼을 클릭하여 다른 버튼의 로딩 상태를 제어합니다:

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

효과를 실현하십시오:

버튼 크기 조절

또한 size 속성을 통해 버튼의 크기를 수정할 수 있습니다.여기서 우리는 또한 요구사항을 만듭니다: 라디오 버튼을 클릭하여 컨트롤 버튼의 크기를 선택합니다

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

효과를 실현하십시오: