style: popover & progress
parent
3656dd5dbb
commit
76585f75b9
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
});
|
||||
|
|
|
@ -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` | |
|
||||
|
|
|
@ -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` | |
|
||||
|
|
Loading…
Reference in New Issue