react-AntDesignフレームワークのボタンボタンの基本的な使用法について

序文

最近、react-Ant Designフレームワークを学び、ボタンコンポーネントの基本的な使用法を記録します。

コンポーネントを使用してフレームワークを導入する

基本ボタン

まず、AntDesignとその中のボタンをインポートして使用する必要があります。もちろん、以前にプロジェクトにAntDesignをインストールしたことを確認してください。
以下は基本的なボタンです。

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

効果を実現します。