https://github.com/react-widget/button
https://react-widget.github.io/button/
https://github.com/react-widget/button
Last synced: about 2 months ago
JSON representation
https://react-widget.github.io/button/
- Host: GitHub
- URL: https://github.com/react-widget/button
- Owner: react-widget
- License: mit
- Created: 2018-06-29T13:39:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:17:31.000Z (about 3 years ago)
- Last Synced: 2025-02-24T19:39:07.122Z (11 months ago)
- Language: TypeScript
- Homepage:
- Size: 4.2 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Button
Button组件
## 安装
```
npm install --save react-widget-button
```
## 使用
[](https://codesandbox.io/s/react-widget-button-dv1xf?fontsize=14&hidenavigation=1&theme=dark)
```js
import {Button} from 'react-widget-button';
import 'react-widget-button/style';
按钮
```
### Interfaces
```ts
interface ButtonProps extends Omit, "type" | "prefix"> {
prefixCls: string;
className?: string;
htmlType?: React.ButtonHTMLAttributes["type"];
type?: "primary";
size?: "small" | "default" | "large";
disabled?: boolean;
loading?: boolean;
active?: boolean;
prefix?: React.ReactNode;
suffix?: React.ReactNode;
tagName: React.ElementType;
}
export interface ButtonGroupProps {
prefixCls: string;
className?: string;
disabled?: boolean;
type?: "primary";
size?: "small" | "default" | "large";
}
```
### 基础样式
```css
.rw-btn {
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
height: 32px;
padding: 0 15px;
font-size: 14px;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
border: 1px solid #d9d9d9;
color: #404040;
background-color: #fff;
vertical-align: middle;
line-height: 1;
}
.rw-btn-small {
height: 24px;
padding: 0 7px;
font-size: 14px;
border-radius: 2px;
}
.rw-btn-large {
height: 40px;
padding: 0 15px;
font-size: 16px;
border-radius: 2px;
}
.rw-btn:hover {
text-decoration: none;
border-color: #bababa;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.rw-btn:focus {
outline: 0;
}
.rw-btn.rw-btn-active,
.rw-btn:active {
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
background-color: #e3e3e3;
border-color: #bababa;
}
/* primary */
.rw-btn-primary {
color: #fff;
background-color: #1890ff;
border-color: #1890ff;
}
.rw-btn-primary:hover {
background-color: #2281e7;
border-color: #2281e7;
}
.rw-btn-primary.rw-btn-active,
.rw-btn-primary:active {
box-shadow: inset 0 2px 0 #0055e1;
background-color: #096dd9;
border-top-color: #096dd9;
border-color: #096dd9;
}
/* disabled */
.rw-btn-loading {
opacity: 0.35;
}
.rw-btn.rw-btn-disabled:not(.rw-btn-loading),
.rw-btn:disabled:not(.rw-btn-loading) {
color: rgba(0, 0, 0, 0.25);
background: #f5f5f5;
border-color: #d9d9d9;
text-shadow: none;
box-shadow: none;
cursor: not-allowed;
}
.rw-btn-loading {
cursor: default;
}
/* group */
.rw-btn-group {
display: inline-flex;
}
.rw-btn-group .rw-btn {
position: relative;
z-index: 1;
flex: 1;
margin-right: -1px;
border-radius: 0;
}
.rw-btn-group .rw-btn:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.rw-btn-group .rw-btn:last-child {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.rw-btn-group .rw-btn:focus,
.rw-btn-group .rw-btn:hover,
.rw-btn-group .rw-btn-active,
.rw-btn-group .rw-btn-active {
z-index: 2;
}
.rw-btn-group .rw-btn:disabled,
.rw-btn-group .rw-btn-disabled {
z-index: 0;
}
```