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