按鈕有四種類型:主按鈕(primary)、次按鈕(default)、虛線按鈕(dashed)、危險按鈕(danger)
通過配置type屬性即可:<Button type=""></Button>
圖標按鈕:
當需要在Button內嵌入Icon時,可以設置icon屬性,或者直接在Button內使用Icon組件。如果想控制Icon具體的位置,只能直接使用Icon組件,而非icon屬性。
兩種情況:
<Button shape="circle" icon="search"/>
<Button icon="search">Search</Button>
按鈕尺寸:
按鈕有大、中、小三種尺寸。
通過設置size爲large small分別把按鈕設爲大、小尺寸。若不設置,則尺寸爲中。
<Button size="large">Large</Button>
添加disabled屬性即可讓按鈕處於不可用狀態,同時按鈕的樣式也會改變。
<Button disabled>Disable</Button>
多個按鈕的組合
按鈕組合使用時,推薦使用1個主操作+n個此操作,3個以上操作時把更多操作放到Dropdown.Button中組合使用。
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1">1st item</Menu.Item>
<Menu.Item key="2">2nd item</Menu.Item>
<Menu.Item key="3">3rd item</Menu.Item>
</Menu>
);
<div>
<Button type="primary">primary</Button>
<Button>secondary</Button>
<Dropdown overlay={menu}>
<Button>
more<Icon type="down" />
</Button>
</Dropdown>
</div>
添加loading屬性即可讓按鈕處於加載狀態,最後兩個按鈕演示點擊後進入加載狀態。
<Button loading>...</Button>
幽靈按鈕
幽靈按鈕將其他按鈕的內容反色,背景變爲透明,常用在有色背景上。
<Button ghost>....</Button>
按鈕組合
可以將多個Button放入Button.Group的容器中。
通過設置size爲large small分別把按鈕組合設爲大、小尺寸。若不設置size,則尺寸爲中。
<Button.Group>是一個連在一起的Button組合。
<Radio.Group>是一個連在一起的Radio組合。
屬性:
type
htmlType
icon
shape
size
loading
onClick
ghost