Button 按钮
按钮用于开始一个即时操作。
何时使用
标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。
代码演示
按钮展现模式
按钮的展现模式,有flat和raised两种,默认为raised。
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'choerodon-ui/pro';
class App extends React.PureComponent {
render() {
return (
<div>
<Button>默认raised按钮</Button>
<Button funcType="flat">flat按钮</Button>
<Button funcType="raised">raised按钮</Button>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('container'));
按钮颜色
按钮的颜色,当 funcType 为 flat 时,color 为字体颜色。
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'choerodon-ui/pro';
class App extends React.PureComponent {
render() {
return (
<div>
<div>
<div style={{ margin: '20px 0' }}>
Background Color(With raised funcType)
</div>
<Button color="gray">Gray</Button>
<Button color="primary">Blue</Button>
<Button color="green">Green</Button>
<Button color="red">Red</Button>
<Button color="yellow">Yellow</Button>
<Button color="purple">Purple</Button>
<Button color="dark">Dark</Button>
</div>
<div>
<div style={{ margin: '20px 0' }}>Font Color(With flat funcType)</div>
<Button funcType="flat" color="gray">
Gray
</Button>
<Button funcType="flat" color="primary">
Blue
</Button>
<Button funcType="flat" color="green">
Green
</Button>
<Button funcType="flat" color="red">
Red
</Button>
<Button funcType="flat" color="yellow">
Yellow
</Button>
<Button funcType="flat" color="purple">
Purple
</Button>
<Button funcType="flat" color="dark">
按钮不可选择
按钮能否选择,默认为false。
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'choerodon-ui/pro';
class App extends React.PureComponent {
render() {
return (
<div>
<Button>默认可选择按钮</Button>
<Button disabled>不可选择按钮</Button>
<Button color="primary" disabled>
不可选择按钮
</Button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
图标按钮
为按钮增加图标的多种方式。
import React from 'react';
import ReactDOM from 'react-dom';
import { Row, Col } from 'choerodon-ui';
import { Button, Icon } from 'choerodon-ui/pro';
class App extends React.PureComponent {
render() {
return (
<div>
<h3>funcType - 默认 raised</h3>
<Row>
<Col span={12}>
icon - save & children - false {' '}
<Button icon="save">{false}</Button>
</Col>
<Col span={12}>
children - Icon 组件 {' '}
<Button>
<Icon type="sync" />
</Button>
</Col>
</Row>
<h3>funcType - flat</h3>
<Row>
<Col span={12}>
color - primary & icon - save & children - 保存
<Button funcType="flat" color="primary" icon="save">
保存
</Button>
</Col>
<Col span={12}>
icon - sync <Button funcType="flat" icon="sync" />
</Col>
</Row>
<Row>
<Col span={12}>
color - primary & icon - search {' '}
<Button funcType="flat" icon="search" color="primary" />
</Col>
<Col span={12}>
icon - close & style - color: #e12330 & disabled - true
图标加载中
图标是否加载中(加载中无法点击)。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Button } from 'choerodon-ui/pro';
import { runInAction } from 'mobx';
class App extends React.Component {
ds = new DataSet();
state = {
loading: true,
};
componentWillMount() {
runInAction(() => {
this.ds.status = 'submitting';
});
}
handleClick = () => {
this.setState({ loading: !this.state.loading });
return new Promise((resolve) => setTimeout(resolve, 1000));
};
render() {
return (
<div>
<Button icon="save" loading={this.state.loading}>
保存
超链接按钮
超链接按钮。
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'choerodon-ui/pro';
ReactDOM.render(
<div>
<Button href="https://choerodon.io" target="_blank">跳转按钮</Button>
<Button funcType="flat" href="https://choerodon.io" target="_blank">跳转按钮</Button>
<Button funcType="flat" href="https://choerodon.io" target="_blank" icon="link" />
</div>,
document.getElementById('container')
);
按钮大小
按钮大小。
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'choerodon-ui/pro';
class App extends React.PureComponent {
render() {
return (
<div>
<div>
<Button>默认raised按钮</Button>
<Button size="large">大raised按钮</Button>
<Button size="small">小raised按钮</Button>
</div>
<div>
<Button funcType="flat">flat按钮</Button>
<Button funcType="flat" size="large">大flat按钮</Button>
<Button funcType="flat" size="small">小flat按钮</Button>
</div>
<div>
<Button funcType="flat" icon="search" />
<Button funcType="flat" icon="search" size="large" />
<Button funcType="flat" icon="search" size="small" />
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
按钮节流
按钮点击节流。该类型按钮事件无法冒泡。
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'choerodon-ui/pro';
class App extends React.Component {
state = {
num: 0,
};
handleClick = e => {
e.stopPropagation();
this.setState({
num: this.state.num + 1,
});
};
handleBubbleClick = () => {
console.log('bubble click');
};
render() {
return (
<div onClick={this.handleBubbleClick}>
<Button onClick={this.handleClick} wait={1000} waitType="throttle">
节流按钮{this.state.num}
</Button>
<Button onClick={this.handleClick} wait={1000} waitType="debounce">
去抖按钮{this.state.num}
API
按钮的属性说明如下:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 设置按钮类型,可选值为 button | submit | reset | string | button |
color | 设置按钮颜色风格,可选值为 default primary blue yellow red dark green purple | string | default |
funcType | 设置按钮展现模式,可选值为 flat | raised | string | raised |
loading | 设置按钮是否是加载状态 | boolean | false |
icon | 设置按钮图标 | string | |
href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | |
target | 相当于 a 链接的 target 属性,href 存在时生效 | string | |
wait | 设置按钮点击间隔时间 | number | |
waitType | 设置按钮点击间隔类型,可选值: throttle | debounce | string | throttle |
onClick | 点击按钮时的回调, 当回调返回值为 Promise,则会出现 loading 状态直到 Promise 的状态不为 pending | (e) => void | Promise |
更多属性请参考 ViewComponent。
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .