github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: spin add rtl

pull/4134/head
tangjinzhou 2021-05-26 22:49:33 +08:00
parent 2089961d6f
commit b53a91c337
3 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/spin/Spin.tsx
View File

@ -120,7 +120,7 @@ export default defineComponent({
render() { render() {
const { size, prefixCls: customizePrefixCls, tip, wrapperClassName } = this.$props; const { size, prefixCls: customizePrefixCls, tip, wrapperClassName } = this.$props;
const { class: cls, style, ...divProps } = this.$attrs; const { class: cls, style, ...divProps } = this.$attrs;
const { getPrefixCls } = this.configProvider; const { getPrefixCls, direction } = this.configProvider;
const prefixCls = getPrefixCls('spin', customizePrefixCls); const prefixCls = getPrefixCls('spin', customizePrefixCls);
const { sSpinning } = this; const { sSpinning } = this;
@ -130,6 +130,7 @@ export default defineComponent({
[`${prefixCls}-lg`]: size === 'large', [`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-spinning`]: sSpinning, [`${prefixCls}-spinning`]: sSpinning,
[`${prefixCls}-show-text`]: !!tip, [`${prefixCls}-show-text`]: !!tip,
[`${prefixCls}-rtl`]: direction === 'rtl',
[cls as string]: !!cls, [cls as string]: !!cls,
}; };

14
components/spin/style/index.less
View File

@ -36,7 +36,7 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin: (-@spin-dot-size / 2); margin: -(@spin-dot-size / 2);
} }
.@{spin-prefix-cls}-text { .@{spin-prefix-cls}-text {
position: absolute; position: absolute;
@ -46,31 +46,31 @@
text-shadow: 0 1px 2px @shadow-color-inverse; text-shadow: 0 1px 2px @shadow-color-inverse;
} }
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot { &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
margin-top: (-@spin-dot-size / 2) - 10px; margin-top: -(@spin-dot-size / 2) - 10px;
} }
} }
> div > .@{spin-prefix-cls}-sm { > div > .@{spin-prefix-cls}-sm {
.@{spin-prefix-cls}-dot { .@{spin-prefix-cls}-dot {
margin: (-@spin-dot-size-sm / 2); margin: -(@spin-dot-size-sm / 2);
} }
.@{spin-prefix-cls}-text { .@{spin-prefix-cls}-text {
padding-top: ((@spin-dot-size-sm - @font-size-base) / 2) + 2px; padding-top: ((@spin-dot-size-sm - @font-size-base) / 2) + 2px;
} }
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot { &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
margin-top: (-@spin-dot-size-sm / 2) - 10px; margin-top: -(@spin-dot-size-sm / 2) - 10px;
} }
} }
> div > .@{spin-prefix-cls}-lg { > div > .@{spin-prefix-cls}-lg {
.@{spin-prefix-cls}-dot { .@{spin-prefix-cls}-dot {
margin: (-@spin-dot-size-lg / 2); margin: -(@spin-dot-size-lg / 2);
} }
.@{spin-prefix-cls}-text { .@{spin-prefix-cls}-text {
padding-top: ((@spin-dot-size-lg - @font-size-base) / 2) + 2px; padding-top: ((@spin-dot-size-lg - @font-size-base) / 2) + 2px;
} }
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot { &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
margin-top: (-@spin-dot-size-lg / 2) - 10px; margin-top: -(@spin-dot-size-lg / 2) - 10px;
} }
} }
} }
@ -212,3 +212,5 @@
transform: rotate(405deg); transform: rotate(405deg);
} }
} }
@import './rtl';

20
components/spin/style/rtl.less Normal file
View File

@ -0,0 +1,20 @@
.@{spin-prefix-cls} {
&-rtl {
direction: rtl;
}
&-dot {
&-spin {
.@{spin-prefix-cls}-rtl & {
transform: rotate(-45deg);
animation-name: antRotateRtl;
}
}
}
}
@keyframes antRotateRtl {
to {
transform: rotate(-405deg);
}
}