ButtonGroup的使用與應用

一、ButtonGroup簡介

ButtonGroup組件是Ant Design中的一個用於放置多個Button的組合部件。它可以使多個Button組合成一個單元，顯得更加美觀。

ButtonGroup除了可以用於組合多個Button，還可以用於對多個按鈕進行控制，例如在多個按鈕中只能選中一個時，通過ButtonGroup可以實現一組按鈕的單選。

二、ButtonGroup的基本用法

在Ant Design中，使用ButtonGroup非常方便。只需要將多個Button作為ButtonGroup的子組件即可自動組合成一個單元。

{`import { Button, ButtonGroup } from 'antd';


  Button1
  Button2
  Button3
`}

三、ButtonGroup的大小與形狀

除了基本用法外，ButtonGroup還支持多種大小和形狀。通過設置ButtonGroup的size屬性即可實現大小的控制，可選值有large、middle和small。

{`
  Button1
  Button2
  Button3
`}

除了大小控制外，ButtonGroup還支持控制按鈕的形狀，通過設置ButtonGroup的shape屬性即可實現。可選值有circle和round。

{`
  Button1
  Button2
  Button3
`}

四、ButtonGroup單選和多選

在多個Button中進行單選或多選時，可以使用ButtonGroup。在ButtonGroup中，我們可以使用value屬性來設置選中的值。

當ButtonGroup的mode屬性為multiple時，value屬性可以設置為選中的多個值。

{`const [selected, setSelected] = useState(['Button1']);


  Button1
  Button2
  Button3
`}

當ButtonGroup的mode屬性為single時，value屬性可以設置為選中的單個值。

{`const [selected, setSelected] = useState('Button1');


  Button1
  Button2
  Button3
`}

五、ButtonGroup的屬性和事件

除了上述提到的基本屬性外，ButtonGroup還有一些其他的屬性和事件。例如：

• disabled: 是否禁用ButtonGroup。
• loading: 是否將所有Button設置為加載狀態。
• onClick: 點擊Button時的回調函數。

這些屬性和事件的使用方式與Button基本相同，這裡不再贅述。

六、結語

ButtonGroup可以方便地對多個Button進行組合，而且還支持多種大小和形狀的控制。在多個Button中進行單選或多選時，也可以使用ButtonGroup。因此，ButtonGroup是我們前端開發中常用的一個組合部件。