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