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

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

@ -36,7 +36,7 @@
position: absolute;
top: 50%;
left: 50%;
margin: (-@spin-dot-size / 2);
margin: -(@spin-dot-size / 2);
}
.@{spin-prefix-cls}-text {
position: absolute;
@ -46,31 +46,31 @@
text-shadow: 0 1px 2px @shadow-color-inverse;
}
&.@{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 {
.@{spin-prefix-cls}-dot {
margin: (-@spin-dot-size-sm / 2);
margin: -(@spin-dot-size-sm / 2);
}
.@{spin-prefix-cls}-text {
padding-top: ((@spin-dot-size-sm - @font-size-base) / 2) + 2px;
}
&.@{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 {
.@{spin-prefix-cls}-dot {
margin: (-@spin-dot-size-lg / 2);
margin: -(@spin-dot-size-lg / 2);
}
.@{spin-prefix-cls}-text {
padding-top: ((@spin-dot-size-lg - @font-size-base) / 2) + 2px;
}
&.@{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);
}
}
@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);
}
}