1.0.1 • Published 4 years ago
react-widget-button v1.0.1
Button
Button组件
安装
npm install --save react-widget-button
使用
import {Button} from 'react-widget-button';
import 'react-widget-button/style';
<Button>按钮</Button>
Interfaces
interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "prefix"> {
prefixCls: string;
className?: string;
htmlType?: React.ButtonHTMLAttributes<HTMLButtonElement>["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";
}
基础样式
.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;
}