style: popover & progress

pull/5820/head
tangjinzhou 2022-05-19 22:28:59 +08:00
parent 3656dd5dbb
commit 76585f75b9
4 changed files with 11 additions and 8 deletions

View File

@ -137,6 +137,7 @@
background-color: @popover-bg;
content: '';
pointer-events: auto;
.roundedArrow(@popover-arrow-width, 5px, @popover-bg);
}
}
@ -170,8 +171,8 @@
left: @popover-distance - @popover-arrow-rotate-width;
&-content {
box-shadow: -3px 3px 7px fade(@black, 7%);
transform: translateX((@popover-arrow-rotate-width / 2)) rotate(45deg);
box-shadow: 3px 3px 7px fade(@black, 7%);
transform: translateX((@popover-arrow-rotate-width / 2)) rotate(135deg);
}
}
@ -194,8 +195,8 @@
top: @popover-distance - @popover-arrow-rotate-width;
&-content {
box-shadow: -2px -2px 5px fade(@black, 6%);
transform: translateY((@popover-arrow-rotate-width / 2)) rotate(45deg);
box-shadow: 2px 2px 5px fade(@black, 6%);
transform: translateY((@popover-arrow-rotate-width / 2)) rotate(-135deg);
}
}
@ -218,8 +219,8 @@
right: @popover-distance - @popover-arrow-rotate-width;
&-content {
box-shadow: 3px -3px 7px fade(@black, 7%);
transform: translateX((-@popover-arrow-rotate-width / 2)) rotate(45deg);
box-shadow: 3px 3px 7px fade(@black, 7%);
transform: translateX((-@popover-arrow-rotate-width / 2)) rotate(-45deg);
}
}

View File

@ -93,7 +93,7 @@ export default defineComponent({
return {
width: `${validProgress(percent)}%`,
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
borderRadius: strokeLinecap === 'square' ? 0 : '',
borderRadius: strokeLinecap === 'square' ? 0 : undefined,
...(backgroundProps.value as any),
};
});
@ -106,7 +106,7 @@ export default defineComponent({
return {
width: `${validProgress(successPercent.value)}%`,
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
borderRadius: strokeLinecap === 'square' ? 0 : '',
borderRadius: strokeLinecap === 'square' ? 0 : undefined,
backgroundColor: success?.strokeColor,
};
});

View File

@ -23,6 +23,7 @@ Properties that shared by all types.
| format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` | |
| percent | To set the completion percentage | number | 0 | |
| showInfo | Whether to display the progress value and the status icon | boolean | true | |
| size | To set the size of the progress | `default` \| `small` | `default` |
| status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - | |
| strokeColor | The color of progress bar | string | - | |
| strokeLinecap | To set the style of the progress linecap | `round` \| `square` | `round` | |

View File

@ -24,6 +24,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` | |
| percent | 百分比 | number | 0 | |
| showInfo | 是否显示进度数值或状态图标 | boolean | true | |
| size | 进度条大小 | `default` \| `small` | `default` |
| status | 状态,可选:`success` `exception` `normal` `active`(仅限 line) | string | - | |
| strokeColor | 进度条的色彩 | string | - | |
| strokeLinecap | 进度条的样式 | `round` \| `square` | `round` | |