https://github.com/react-widget/radio
https://react-widget.github.io/radio/
https://github.com/react-widget/radio
Last synced: 11 months ago
JSON representation
https://react-widget.github.io/radio/
- Host: GitHub
- URL: https://github.com/react-widget/radio
- Owner: react-widget
- License: mit
- Created: 2018-11-26T13:02:17.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:28:49.000Z (about 3 years ago)
- Last Synced: 2025-02-14T04:16:24.282Z (12 months ago)
- Language: TypeScript
- Homepage:
- Size: 5.04 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Radio
Radio组件
## 安装
```
npm install --save react-widget-radio
```
## 使用
[](https://codesandbox.io/s/keen-morning-kgrgi?fontsize=14&hidenavigation=1&theme=dark)
```js
import {Radio} from 'react-widget-radio';
import 'react-widget-radio/style';
Radio
```
### Interfaces
```ts
export interface RWRadioProps extends React.HTMLAttributes {
prefixCls?: string;
className?: string;
name?: string;
defaultChecked?: boolean;
checked?: boolean;
disabled?: boolean;
readOnly?: boolean;
inputRef?: React.RefObject;
}
export interface RWRadioState {
checked: boolean;
}
export declare class RWRadio extends React.Component {
static defaultProps: RWRadioProps;
static getDerivedStateFromProps(props: RWRadioProps, state: RWRadioState): {
checked: boolean;
};
state: {
checked: boolean;
};
handleChange: (e: React.ChangeEvent) => void;
render(): JSX.Element;
}
export interface RadioProps extends Omit {
name?: string;
value?: any;
onChange?: (checked: boolean, e: React.ChangeEvent) => void;
onMouseEnter?: (event: React.MouseEvent) => void;
onMouseLeave?: (event: React.MouseEvent) => void;
}
export declare const Radio: React.FC & {
Group: typeof RadioGroup;
};
export interface RenderProps {
value: T | undefined;
onChange: (value: T) => void;
}
export interface RadioOption {
value: T;
label: React.ReactNode;
style?: React.CSSProperties;
className?: string;
disabled?: boolean;
readOnly?: boolean;
onChange?: (checked: boolean, e: React.ChangeEvent) => void;
}
export interface RadioGroupProps extends Omit, "defaultValue" | "onChange" | "defaultChecked"> {
prefixCls?: string;
name?: string;
defaultValue?: T;
value?: T;
disabled?: boolean;
readOnly?: boolean;
options?: T extends string | number ? (string | number)[] : RadioOption[];
render?: (props: RenderProps) => React.ReactNode;
onChange?: (checkedValue: T) => void;
}
export interface RadioGroupState {
value: T | undefined;
}
export declare class RadioGroup extends React.Component, RadioGroupState> {
static defaultProps: {
prefixCls: string;
};
static getDerivedStateFromProps(nextProps: RadioGroupProps, state: RadioGroupState): {
value: any;
};
state: {
value: T | undefined;
};
getGroupContext(): {
toggleChange: (option: RadioOption) => void;
value: T | undefined;
name: string | undefined;
disabled: boolean;
readOnly: boolean;
};
getOptions(): RadioOption[];
toggleChange: (option: RadioOption) => 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;
}
```
### 基础样式
```css
/* 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;
}
```