antd 相关学习 Button

api:Ant Design of React

按钮有四种类型:主按钮(primary)、次按钮(default)、虚线按钮(dashed)、危险按钮(danger)

通过配置type属性即可:


图标按钮:

当需要在Button内嵌入Icon时,可以设置icon属性,或者直接在Button内使用Icon组件。如果想控制Icon具体的位置,只能直接使用Icon组件,而非icon属性。

两种情况:


按钮尺寸:

按钮有大、中、小三种尺寸。

通过设置size为large small分别把按钮设为大、小尺寸。若不设置,则尺寸为中。


添加disabled属性即可让按钮处于不可用状态,同时按钮的样式也会改变。


多个按钮的组合

按钮组合使用时,推荐使用1个主操作+n个此操作,3个以上操作时把更多操作放到Dropdown.Button中组合使用。

const menu = (

1st item

2nd item

3rd item

);


添加loading属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。


幽灵按钮

幽灵按钮将其他按钮的内容反色,背景变为透明,常用在有色背景上。


按钮组合

可以将多个Button放入Button.Group的容器中。

通过设置size为large small分别把按钮组合设为大、小尺寸。若不设置size,则尺寸为中。


是一个连在一起的Button组合。

是一个连在一起的Radio组合。


属性:

type

htmlType

icon

shape

size

loading

onClick

ghost

你可能感兴趣的:(React学习)