fix: timeline custom color should work on antd icons

pull/5361/head
tangjinzhou 2022-03-17 14:56:09 +08:00
parent ccf9a410ac
commit 2b81a7213b
3 changed files with 18 additions and 5 deletions

View File

@ -171,7 +171,7 @@
&&-active &-btn {
color: @tabs-highlight-color;
text-shadow: 0 0 0.25px currentColor;
text-shadow: 0 0 0.25px currentcolor;
}
&&-disabled {

View File

@ -38,14 +38,12 @@ export default defineComponent({
[`${prefixCls.value}-item-head-custom`]: dot,
[`${prefixCls.value}-item-head-${color}`]: true,
});
const customColor = /blue|red|green|gray/.test(color || '') ? undefined : color;
return (
<li class={itemClassName}>
{label && <div class={`${prefixCls.value}-item-label`}>{label}</div>}
<div class={`${prefixCls.value}-item-tail`} />
<div
class={dotClassName}
style={{ borderColor: /blue|red|green|gray/.test(color) ? undefined : color }}
>
<div class={dotClassName} style={{ borderColor: customColor, color: customColor }}>
{dot}
</div>
<div class={`${prefixCls.value}-item-content`}>{slots.default?.()}</div>

View File

@ -40,5 +40,20 @@ Set the color of circles. `green` means completed or success status, `red` means
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</a-timeline-item>
<a-timeline-item color="#00CCFF">
<template #dot>
<SmileOutlined />
</template>
<p>Custom color testing</p>
</a-timeline-item>
</a-timeline>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { SmileOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
SmileOutlined,
},
});
</script>