You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.4 KiB
74 lines
1.4 KiB
import type { CSSProperties } from 'vue';
|
|
import type { NotificationPlacement } from './interface';
|
|
import type { CSSMotionProps } from '../_util/transition';
|
|
|
|
export function getPlacementStyle(
|
|
placement: NotificationPlacement,
|
|
top: number | string,
|
|
bottom: number | string,
|
|
) {
|
|
let style: CSSProperties;
|
|
top = typeof top === 'number' ? `${top}px` : top;
|
|
bottom = typeof bottom === 'number' ? `${bottom}px` : bottom;
|
|
switch (placement) {
|
|
case 'top':
|
|
style = {
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
right: 'auto',
|
|
top,
|
|
bottom: 'auto',
|
|
};
|
|
break;
|
|
|
|
case 'topLeft':
|
|
style = {
|
|
left: 0,
|
|
top,
|
|
bottom: 'auto',
|
|
};
|
|
break;
|
|
|
|
case 'topRight':
|
|
style = {
|
|
right: 0,
|
|
top,
|
|
bottom: 'auto',
|
|
};
|
|
break;
|
|
|
|
case 'bottom':
|
|
style = {
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
right: 'auto',
|
|
top: 'auto',
|
|
bottom,
|
|
};
|
|
break;
|
|
|
|
case 'bottomLeft':
|
|
style = {
|
|
left: 0,
|
|
top: 'auto',
|
|
bottom,
|
|
};
|
|
break;
|
|
|
|
default:
|
|
style = {
|
|
right: 0,
|
|
top: 'auto',
|
|
bottom,
|
|
};
|
|
break;
|
|
}
|
|
return style;
|
|
}
|
|
|
|
export function getMotion(prefixCls: string): CSSMotionProps {
|
|
return {
|
|
name: `${prefixCls}-fade`,
|
|
};
|
|
}
|