diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss index 964db684e..30b780ae9 100644 --- a/scss/components/form/_checks.scss +++ b/scss/components/form/_checks.scss @@ -219,6 +219,7 @@ &-desc { color: $text--muted-color; margin-left: $Checkbox-gap; + margin-top: $gap-xs; } } diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index 206d74634..bcda435c5 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -23,6 +23,7 @@ interface CheckboxProps { type?: string; size?: 'sm' | 'lg' | 'small' | 'large'; label?: string; + labelClassName?: string; className?: string; onChange?: (value: any) => void; value?: any; @@ -75,7 +76,8 @@ export class Checkbox extends React.Component { checked, type, name, - data + data, + labelClassName } = this.props; className = (className ? className : '') + (size && sizeMap[size] ? ` ${sizeMap[size]}` : ''); @@ -105,7 +107,7 @@ export class Checkbox extends React.Component { name={name} /> - {children || label} + {children || label} {description ? (
{filter(description, data)}
) : null} ); diff --git a/src/components/Checkboxes.tsx b/src/components/Checkboxes.tsx index 5253572b2..cc4baa93b 100644 --- a/src/components/Checkboxes.tsx +++ b/src/components/Checkboxes.tsx @@ -111,8 +111,10 @@ interface CheckboxesProps extends OptionProps { inline?: boolean; columnsCount?: number; checked?: boolean; + labelClassName?: string; classPrefix: string; classnames: ClassNamesFn; + } export class Checkboxes extends React.PureComponent { @@ -173,7 +175,8 @@ export class Checkboxes extends React.PureComponent { placeholder, columnsCount, disabled, - inline + inline, + labelClassName } = this.props; let valueArray = value2array(value, { @@ -192,6 +195,7 @@ export class Checkboxes extends React.PureComponent { checked={!!~valueArray.indexOf(option)} disabled={disabled || option.disabled} inline={inline} + labelClassName={labelClassName} > {option.label} diff --git a/src/components/Radios.tsx b/src/components/Radios.tsx index 91019414c..0bf31f83e 100644 --- a/src/components/Radios.tsx +++ b/src/components/Radios.tsx @@ -31,6 +31,7 @@ interface RadioProps extends OptionProps { onChange?: Function; columnsCount: number; itemClassName?: string; + labelClassName?: string; classPrefix: string; classnames: ClassNamesFn; } @@ -83,7 +84,7 @@ export class Radios extends React.Component { return this.renderGroup(option, index, valueArray); } - const {disabled, inline, itemClassName, classnames: cx} = this.props; + const {disabled, inline, itemClassName, classnames: cx, labelClassName} = this.props; return ( { disabled={disabled || option.disabled} description={option.description} inline={inline} + labelClassName={labelClassName} > {option.label} diff --git a/src/renderers/Form/Checkboxes.tsx b/src/renderers/Form/Checkboxes.tsx index 1a3461909..a331fc81b 100644 --- a/src/renderers/Form/Checkboxes.tsx +++ b/src/renderers/Form/Checkboxes.tsx @@ -9,6 +9,7 @@ export interface CheckboxesProps extends OptionsControlProps { disabled?: boolean; itemClassName?: string; columnsCount?: number; + labelClassName?: string; } export default class CheckboxesControl extends React.Component { @@ -48,7 +49,7 @@ export default class CheckboxesControl extends React.Component {option.label} @@ -77,7 +79,8 @@ export default class CheckboxesControl extends React.Component = []; @@ -96,6 +99,7 @@ export default class CheckboxesControl extends React.Component 全选/不选 diff --git a/src/renderers/Form/Radios.tsx b/src/renderers/Form/Radios.tsx index 9f129b876..040646a3d 100644 --- a/src/renderers/Form/Radios.tsx +++ b/src/renderers/Form/Radios.tsx @@ -9,6 +9,7 @@ import {dataMapping} from '../../utils/tpl-builtin'; export interface RadiosProps extends OptionsControlProps { placeholder?: any; columnsCount?: number; + labelClassName?: string; } export default class RadiosControl extends React.Component { @@ -51,7 +52,8 @@ export default class RadiosControl extends React.Component { formMode, columnsCount, classPrefix, - itemClassName + itemClassName, + labelClassName } = this.props; return ( @@ -64,6 +66,7 @@ export default class RadiosControl extends React.Component { joinValues={joinValues} extractValue={extractValue} delimiter={delimiter} + labelClassName={labelClassName} placeholder={placeholder} options={options} columnsCount={columnsCount}