antd 相關學習 Button

api:Ant Design of React

按鈕有四種類型:主按鈕(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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章