Rain-Bus/trailway-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Rain&Bus
2024-01-11 00:49:37 +08:00
commit 1d4ca069e7
169 changed files with 44956 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/components/ui/Buttons.tsx Normal file
View File

@@ -0,0 +1,167 @@
/**
* Created by hao.cheng on 2017/4/23.
*/
import React from 'react';
import { Row, Col, Card, Button, Radio, Menu, Dropdown } from 'antd';
import BreadcrumbCustom from '../widget/BreadcrumbCustom';
import { RadioChangeEvent } from 'antd/lib/radio';
import { ButtonSize } from 'antd/lib/button';
import { DownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
type ButtonsState = {
size: ButtonSize;
loading: boolean;
iconLoading: boolean;
};
class Buttons extends React.Component<any, ButtonsState> {
constructor(props: any) {
super(props);
this.state = {
size: 'middle',
loading: false,
iconLoading: false,
};
}
handleSizeChange = (e: RadioChangeEvent) => {
this.setState({ size: e.target.value });
};
handleMenuClick = (e: any) => {
console.log('click', e);
};
enterLoading = () => {
this.setState({ loading: true });
};
enterIconLoading = () => {
this.setState({ iconLoading: true });
};
render() {
const size = this.state.size;
const menu = (
<Menu onClick={this.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>
);
return (
<div className="gutter-example button-demo">
<BreadcrumbCustom breads={['UI', '按钮']} />
<Row gutter={16}>
<Col className="gutter-row" md={12}>
<div className="gutter-box">
<Card bordered={false}>
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button danger>Danger</Button>
</Card>
</div>
</Col>
<Col className="gutter-row" md={12}>
<div className="gutter-box">
<Card bordered={false}>
<Button type="primary" shape="circle" icon="search" />
<Button type="primary" icon="search">
Search
</Button>
<Button shape="circle" icon="search" />
<Button icon="search">Search</Button>
<br />
<Button shape="circle" icon="search" />
<Button icon="search">Search</Button>
<Button type="dashed" shape="circle" icon="search" />
<Button type="dashed" icon="search">
Search
</Button>
</Card>
</div>
</Col>
<Col className="gutter-row" md={12}>
<div className="gutter-box">
<Card bordered={false}>
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="middle">Middle</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Button type="primary" shape="circle" icon="download" size={size} />
<Button type="primary" icon="download" size={size}>
Download
</Button>
<Button type="primary" size={size}>
Normal
</Button>
<br />
<Button.Group size={size}>
<Button type="primary">
<LeftOutlined />
Backward
</Button>
<Button type="primary">
Forward
<RightOutlined />
</Button>
</Button.Group>
</Card>
</div>
</Col>
<Col className="gutter-row" md={12}>
<div className="gutter-box">
<Card bordered={false}>
<Button type="primary">primary</Button>
<Button>secondary</Button>
<Dropdown overlay={menu}>
<Button>
more <DownOutlined />
</Button>
</Dropdown>
</Card>
</div>
</Col>
<Col className="gutter-row" md={12}>
<div className="gutter-box">
<Card bordered={false}>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
<br />
<Button
type="primary"
loading={this.state.loading}
onClick={this.enterLoading}
>
Click me!
</Button>
<Button
type="primary"
icon="poweroff"
loading={this.state.iconLoading}
onClick={this.enterIconLoading}
>
Click me!
</Button>
<br />
<Button shape="circle" loading />
<Button type="primary" shape="circle" loading />
</Card>
</div>
</Col>
</Row>
<style>{`
.button-demo .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
`}</style>
</div>
);
}
}
export default Buttons;