diff --git a/components/radio/Group.jsx b/components/radio/Group.jsx index 0b8a6e2d59..5f06fe9ec0 100644 --- a/components/radio/Group.jsx +++ b/components/radio/Group.jsx @@ -88,12 +88,13 @@ export default { const { mouseenter = noop, mouseleave = noop } = getListeners(this); const props = getOptionProps(this); const { prefixCls: customizePrefixCls, options, buttonStyle } = props; - const getPrefixCls = this.configProvider.getPrefixCls; + const { getPrefixCls, direction } = this.configProvider; const prefixCls = getPrefixCls('radio', customizePrefixCls); const groupPrefixCls = `${prefixCls}-group`; const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, { [`${groupPrefixCls}-${props.size}`]: props.size, + [`${groupPrefixCls}-rtl`]: direction === 'rtl', }); let children = filterEmpty(this.$slots.default); diff --git a/components/radio/Radio.jsx b/components/radio/Radio.jsx index e24b6924ee..a169fbd9b6 100644 --- a/components/radio/Radio.jsx +++ b/components/radio/Radio.jsx @@ -53,7 +53,7 @@ export default { const children = $slots.default; const { mouseenter = noop, mouseleave = noop, ...restListeners } = getListeners(this); const { prefixCls: customizePrefixCls, ...restProps } = props; - const getPrefixCls = this.configProvider.getPrefixCls; + const { getPrefixCls, direction } = this.configProvider; const prefixCls = getPrefixCls('radio', customizePrefixCls); const radioProps = { @@ -74,6 +74,7 @@ export default { [`${prefixCls}-wrapper`]: true, [`${prefixCls}-wrapper-checked`]: radioProps.props.checked, [`${prefixCls}-wrapper-disabled`]: radioProps.props.disabled, + [`${prefixCls}-wrapper-rtl`]: direction === 'rtl', }); return ( diff --git a/components/radio/style/index.less b/components/radio/style/index.less index e6095051b2..41fd8a3527 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -325,3 +325,5 @@ span.@{radio-prefix-cls} + * { vertical-align: text-bottom; } } + +@import './rtl'; diff --git a/components/radio/style/rtl.less b/components/radio/style/rtl.less new file mode 100644 index 0000000000..9890cf4593 --- /dev/null +++ b/components/radio/style/rtl.less @@ -0,0 +1,61 @@ +@import '../../style/themes/index'; +@import '../../style/mixins/index'; + +@radio-prefix-cls: ~'@{ant-prefix}-radio'; +@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group'; +@radio-prefix-cls-button-wrapper: ~'@{radio-prefix-cls}-button-wrapper'; + +.@{radio-group-prefix-cls} { + &&-rtl { + direction: rtl; + } +} + +// 一般状态 +.@{radio-prefix-cls}-wrapper { + &&-rtl { + margin-right: 0; + margin-left: 8px; + direction: rtl; + } +} + +.@{radio-prefix-cls-button-wrapper} { + &&-rtl { + border-right-width: 0; + border-left-width: @border-width-base; + } + + &:not(:first-child) { + &::before { + .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& { + right: -1px; + left: 0; + } + } + } + + &:first-child { + .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& { + border-right: @border-width-base @border-style-base @border-color-base; + border-radius: 0 @border-radius-base @border-radius-base 0; + } + .@{radio-prefix-cls-button-wrapper}-checked:not([class*=~"' @{radio-prefix-cls}-button-wrapper-disabled'"])& { + border-right-color: @radio-button-hover-color; + } + } + + &:last-child { + .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& { + border-radius: @border-radius-base 0 0 @border-radius-base; + } + } + + &-disabled { + &:first-child { + .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& { + border-right-color: @border-color-base; + } + } + } +} diff --git a/components/rate/index.jsx b/components/rate/index.jsx index d6d7eb411a..82cacf25a3 100644 --- a/components/rate/index.jsx +++ b/components/rate/index.jsx @@ -1,4 +1,5 @@ import omit from 'omit.js'; +import classNames from 'classnames'; import PropTypes from '../_util/vue-types'; import { getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util'; import { ConfigConsumerProps } from '../config-provider'; @@ -45,8 +46,11 @@ const Rate = { }, render() { const { prefixCls: customizePrefixCls, ...restProps } = getOptionProps(this); - const getPrefixCls = this.configProvider.getPrefixCls; + const { getPrefixCls, direction } = this.configProvider; const prefixCls = getPrefixCls('rate', customizePrefixCls); + const rateClassNames = classNames({ + [`${prefixCls}-rtl`]: direction === 'rtl', + }); const character = getComponentFromProp(this, 'character') || ; const rateProps = { @@ -59,7 +63,7 @@ const Rate = { on: getListeners(this), ref: 'refRate', }; - return ; + return ; }, }; diff --git a/components/rate/style/index.less b/components/rate/style/index.less index 34214491f9..43fba3a6f9 100644 --- a/components/rate/style/index.less +++ b/components/rate/style/index.less @@ -79,7 +79,9 @@ &-text { display: inline-block; - margin-left: 8px; + margin: 0 8px; font-size: @font-size-base; } } + +@import './rtl'; diff --git a/components/rate/style/rtl.less b/components/rate/style/rtl.less new file mode 100644 index 0000000000..425ab11e4e --- /dev/null +++ b/components/rate/style/rtl.less @@ -0,0 +1,26 @@ +@import '../../style/themes/index'; +@import '../../style/mixins/index'; + +@rate-prefix-cls: ~'@{ant-prefix}-rate'; + +.@{rate-prefix-cls} { + &-rtl { + direction: rtl; + } + + &-star { + &:not(:last-child) { + .@{rate-prefix-cls}-rtl & { + margin-right: 0; + margin-left: 8px; + } + } + + &-first { + .@{rate-prefix-cls}-rtl & { + right: 0; + left: auto; + } + } + } +}