react-widget-radio

Radio

Radio组件

安装

npm install --save react-widget-radio

使用

import {Radio} from 'react-widget-radio';
import 'react-widget-radio/style';
 
<Radio>Radio</Radio>
 

Interfaces

export interface RWRadioProps extends React.HTMLAttributes<HTMLInputElement> {
    prefixCls?: string;
    className?: string;
    name?: string;
    defaultChecked?: boolean;
    checked?: boolean;
    disabled?: boolean;
    readOnly?: boolean;
    inputRef?: React.RefObject<HTMLInputElement>;
}
export interface RWRadioState {
    checked: boolean;
}
export declare class RWRadio extends React.Component<RWRadioProps, RWRadioState> {
    static defaultProps: RWRadioProps;
    static getDerivedStateFromProps(props: RWRadioProps, state: RWRadioState): {
        checked: boolean;
    };
    state: {
        checked: boolean;
    };
    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    render(): JSX.Element;
}
 
export interface RadioProps extends Omit<RWRadioProps, "onChange" | "onMouseEnter" | "onMouseLeave" | "type"> {
    name?: string;
    value?: any;
    onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
    onMouseLeave?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
}
export declare const Radio: React.FC<RadioProps> & {
    Group: typeof RadioGroup;
};
 
export interface RenderProps<T = any> {
    value: T | undefined;
    onChange: (value: T) => void;
}
export interface RadioOption<T = any> {
    value: T;
    label: React.ReactNode;
    style?: React.CSSProperties;
    className?: string;
    disabled?: boolean;
    readOnly?: boolean;
    onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
}
export interface RadioGroupProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "defaultChecked"> {
    prefixCls?: string;
    name?: string;
    defaultValue?: T;
    value?: T;
    disabled?: boolean;
    readOnly?: boolean;
    options?: T extends string | number ? (string | number)[] : RadioOption<T>[];
    render?: (props: RenderProps<T>) => React.ReactNode;
    onChange?: (checkedValue: T) => void;
}
export interface RadioGroupState<T = any> {
    value: T | undefined;
}
export declare class RadioGroup<T = any> extends React.Component<RadioGroupProps<T>, RadioGroupState<T>> {
    static defaultProps: {
        prefixCls: string;
    };
    static getDerivedStateFromProps(nextProps: RadioGroupProps, state: RadioGroupState): {
        value: any;
    };
    state: {
        value: T | undefined;
    };
    getGroupContext(): {
        toggleChange: (option: RadioOption<T>) => void;
        value: T | undefined;
        name: string | undefined;
        disabled: boolean;
        readOnly: boolean;
    };
    getOptions(): RadioOption<any>[];
    toggleChange: (option: RadioOption<T>) => void;
    handleChange: (value: T) => void;
    render(): JSX.Element;
}
 
export interface RadioGroupContextValue {
    toggleChange: (option: {
        value: any;
        label: React.ReactNode;
    }) => void;
    value: any;
    name: string | undefined;
    disabled: boolean;
    readOnly: boolean;
}
 

基础样式

/* RWRadio 基础样式 */
.rw-radio {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    outline: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex: none;
}
 
.rw-radio-input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
.rw-radio-inner {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    box-sizing: border-box;
}
 
.rw-radio-input:focus + .rw-radio-inner,
.rw-radio:hover .rw-radio-inner {
    border-color: #1890ff;
}
 
.rw-radio-disabled .rw-radio-input,
.rw-radio-disabled {
    cursor: not-allowed;
}
 
.rw-radio-disabled:hover .rw-radio-inner,
.rw-radio-disabled:active .rw-radio-inner,
.rw-radio-disabled .rw-radio-inner {
    background-color: #f5f5f5 !important;
    border-color: #d9d9d9 !important;
}
 
/* RWRadio 选中样式 */
.rw-radio-checked .rw-radio-inner {
    /* background: #1890ff; */
    border-color: #1890ff;
}
 
.rw-radio-inner:after {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    display: table;
    background: #1890ff;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: scale(0) translate(-4px, -4px);
    opacity: 0;
    content: " ";
}
 
.rw-radio-checked .rw-radio-inner:after {
    opacity: 1;
    transform: scale(1) translate(-4px, -4px);
}
 
.rw-radio-disabled .rw-radio-inner:after {
    background-color: #d9d9d9;
}
 
/* Radio */
.rw-radio-wrapper {
    display: inline-flex;
    cursor: pointer;
    vertical-align: middle;
    outline: none;
    align-items: center;
    flex: 1;
}
 
.rw-radio-wrapper:hover .rw-radio-inner {
    border-color: #1890ff;
}
 
.rw-radio-label {
    flex: 1;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
.rw-radio-wrapper-disabled .rw-radio-label {
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
}
 
/* RadioGroup */
.rw-radio-group {
    display: inline-flex;
}