Button 按钮

按钮用于开始一个即时操作。

代码演示

Button

 <r-button >Button</r-button>

属性

类型type

按钮有四种类型

主要按钮

警告按钮

文本按钮

默认按钮

 <r-button type="primary">主要按钮</r-button>
 <r-button type="warning">警告按钮</r-button>
 <r-button type="text">文本按钮</r-button>
 <r-button >默认按钮</r-button>

不可用状态disabled

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

主要按钮

警告按钮

文本按钮

默认按钮

 <r-button type="primary" disabled>主要按钮</r-button>
 <r-button type="warning" disabled>警告按钮</r-button>
 <r-button type="text" disabled>文本按钮</r-button>
 <r-button disabled>默认按钮</r-button>

图标icon

当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。

如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。

默认按钮

主要按钮

<r-button type="default" icon="user">默认按钮</r-button>
<r-button type="primary" icon="home">主要按钮</r-button>

特效 effect

如果需要纯净的 Button，可以加上 effect = false，屏蔽点击时候的水波纹特效

默认按钮主要按钮

<r-button type="default" icon="user">默认按钮</r-button>
<r-button type="primary" icon="home">主要按钮</r-button>