fix: timeline custom color should work on antd icons
parent
ccf9a410ac
commit
2b81a7213b
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue