react-widget-button
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Button

    Button组件

    安装

    npm install --save react-widget-button
    

    使用

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

    Install

    npm i react-widget-button

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    24.4 kB

    Total Files

    26

    Last publish

    Collaborators

    • bplok20010