react-widget-button

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;
}