Browse Source

fix: timeline custom color should work on antd icons

pull/5361/head
tangjinzhou 3 years ago
parent
commit
2b81a7213b
  1. 2
      components/tabs/style/index.less
  2. 6
      components/timeline/TimelineItem.tsx
  3. 15
      components/timeline/demo/color.vue

2
components/tabs/style/index.less

@ -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 {

6
components/timeline/TimelineItem.tsx

@ -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>

15
components/timeline/demo/color.vue

@ -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…
Cancel
Save