feat(comp:timeline): support for timeline (#1992)

IDuxFE · Oct 15, 2024 · c35a883 · c35a883
1 parent 6d3e185
commit c35a883
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 8 deletions.
diff --git a/packages/components/timeline/demo/Label.vue b/packages/components/timeline/demo/Label.vue
@@ -8,6 +8,14 @@
       <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
     </IxTimeline>
 
+    <p>1-1.标签的一般用法，label 文本在上方</p>
+    <IxTimeline labelPlacement="top">
+      <IxTimelineItem label="2021-02-08">New issue</IxTimelineItem>
+      <IxTimelineItem label="2021-02-10">Create IxTimeline</IxTimelineItem>
+      <IxTimelineItem label="2021-02-12">Update component documentation</IxTimelineItem>
+      <IxTimelineItem label="2021-02-14">Write test cases</IxTimelineItem>
+    </IxTimeline>
+
     <p>2.标签的一般用法</p>
     <IxTimeline placement="start">
       <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
@@ -16,7 +24,7 @@
       <IxTimelineItem key="3" label="2021-02-14">Write test cases</IxTimelineItem>
     </IxTimeline>
 
-    <p>3.标签的一般用法</p>
+    <p>3.标签的一般用法，时间节点交替出现在时间轴左右两边</p>
     <IxTimeline placement="alternate">
       <IxTimelineItem key="0" label="2021-02-08">New issue</IxTimelineItem>
       <IxTimelineItem key="1" label="2021-02-10">Create IxTimeline</IxTimelineItem>

diff --git a/packages/components/timeline/docs/Api.zh.md b/packages/components/timeline/docs/Api.zh.md
@@ -6,10 +6,11 @@
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `pending` | 设置幽灵节点 | `boolean\|string\|#pending` | `false` | - | - |
-| `pendingDot` | 幽灵节点存在时的时间轴点 | `string\|#pendingDot` | `undefined` | - |- |
+| `pendingDot` | 幽灵节点存在时的时间轴点 | `string\|#pendingDot` | `undefined` | - | - |
 | `reverse` | 时间节点是否倒叙 | `boolean` | `false` | - |- |
-| `placement` | 时间节点内容相对于时间轴的位置 | `'start'\| 'end' \| 'alternate'` | `'end'` | - |- |
-| `both` | 设置标签和内容是否分开 | `boolean` | `false` | - |- |
+| `placement` | 时间节点内容相对于时间轴的位置 | `'start' \| 'end' \| 'alternate'` | `'end'` | - | - |
+| `labelPlacement` | 标签文本在时间节点中的位置 | `'top' \| 'bottom'` | `'bottom'` | - | - |
+| `both` | 设置标签和内容是否分开 | `boolean` | `false` | - | - |
 
 ### IxTimelineItem
 

diff --git a/packages/components/timeline/src/TimelineItem.tsx b/packages/components/timeline/src/TimelineItem.tsx
@@ -39,6 +39,8 @@ export default defineComponent({
 
     const isPresetOrStatusColor = computed(() => isPresetColor(props.color) || isStatusColor(props.color))
 
+    const isTopLabel = computed(() => parentProps.labelPlacement === 'top')
+
     const dotStyle = computed(() => {
       const { color } = props
       if (isPresetOrStatusColor.value) {
@@ -98,10 +100,17 @@ export default defineComponent({
               {!isCustomDot.value && <div class={`${prefixCls}-head-dot-inner`} style={dotInnerStyle.value}></div>}
             </div>
           </div>
-          <div class={`${prefixCls}-content`}>
-            {slots.default && <div class={`${prefixCls}-content-desc`}>{slots.default()}</div>}
-            {labelNode && <div class={`${prefixCls}-content-label`}>{labelNode}</div>}
-          </div>
+          {isTopLabel.value ? (
+            <div class={`${prefixCls}-content ${prefixCls}-content-top`}>
+              {labelNode && <div class={`${prefixCls}-content-label`}>{labelNode}</div>}
+              {slots.default && <div class={`${prefixCls}-content-desc`}>{slots.default()}</div>}
+            </div>
+          ) : (
+            <div class={`${prefixCls}-content`}>
+              {slots.default && <div class={`${prefixCls}-content-desc`}>{slots.default()}</div>}
+              {labelNode && <div class={`${prefixCls}-content-label`}>{labelNode}</div>}
+            </div>
+          )}
         </li>
       )
     }

diff --git a/packages/components/timeline/src/types.ts b/packages/components/timeline/src/types.ts
@@ -9,6 +9,7 @@ import type { ExtractInnerPropTypes, ExtractPublicPropTypes } from '@idux/cdk/ut
 import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
 
 export type TimelinePlacement = 'start' | 'alternate' | 'end'
+export type TimelineLabelPlacement = 'top' | 'bottom'
 export type TimelineItemPlacement = 'start' | 'end'
 
 export const timelineProps = {
@@ -25,6 +26,10 @@ export const timelineProps = {
     type: String as PropType<TimelinePlacement>,
     default: 'end',
   },
+  labelPlacement: {
+    type: String as PropType<TimelineLabelPlacement>,
+    default: 'bottom',
+  },
   both: {
     type: Boolean,
     default: true,

diff --git a/packages/components/timeline/style/index.less b/packages/components/timeline/style/index.less
@@ -91,6 +91,16 @@
         margin-top: var(--ix-timeline-content-label-margin-top);
       }
     }
+
+    &-content-top {
+      .@{timeline-item-prefix}-content-label {
+        margin-top: 0;
+      }
+
+      .@{timeline-item-prefix}-content-desc {
+        margin-top: var(--ix-timeline-content-label-margin-top);
+      }
+    }
   }
 
   .timeline-dot-color-classes(@status-colors);