feat(timeline): add label slot

arco-design · Jul 27, 2023 · 73d2d84 · 73d2d84
1 parent 8448770
commit 73d2d84
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 2 deletions.
diff --git a/packages/web-vue/components/timeline/README.en-US.md b/packages/web-vue/components/timeline/README.en-US.md
@@ -26,6 +26,8 @@ description: Display information content in chronological or reverse order.
 
 @import ./__demo__/label.md
 
+@import ./__demo__/custom.md
+
 ## API
 
 
@@ -62,5 +64,6 @@ description: Display information content in chronological or reverse order.
 |Slot Name|Description|Parameters|
 |---|---|---|
 |dot|Custom dot|-|
+|label|Custom label|-|
 
 
diff --git a/packages/web-vue/components/timeline/README.zh-CN.md b/packages/web-vue/components/timeline/README.zh-CN.md
@@ -24,6 +24,8 @@ description: 按照时间顺序或倒序规则的展示信息内容。
 
 @import ./__demo__/label.md
 
+@import ./__demo__/custom.md
+
 ## API
 
 
@@ -60,5 +62,6 @@ description: 按照时间顺序或倒序规则的展示信息内容。
 |插槽名|描述|参数|
 |---|:---:|---|
 |dot|自定义节点|-|
+|label|自定义标签|-|
 
 
diff --git a/packages/web-vue/components/timeline/TEMPLATE.md b/packages/web-vue/components/timeline/TEMPLATE.md
@@ -35,6 +35,8 @@ description: Display information content in chronological or reverse order.
 
 @import ./__demo__/label.md
 
+@import ./__demo__/custom.md
+
 ## API
 
 %%API(timeline.tsx)%%

diff --git a/packages/web-vue/components/timeline/__demo__/custom.md b/packages/web-vue/components/timeline/__demo__/custom.md
@@ -0,0 +1,35 @@
+```yaml
+title:
+  zh-CN: 自定义标签
+  en-US: Custom Label
+```
+
+## zh-CN
+
+可以通过 `label` 插槽自定义标签
+
+---
+
+## en-US
+
+You can customize labels through the 'label' slot
+
+---
+
+```vue
+<template>
+  <a-timeline>
+    <a-timeline-item>
+      Code Review
+      <template #label>
+        <a-tag>
+          <template #icon>
+            <icon-check-circle-fill />
+          </template>
+          Passed
+        </a-tag>
+      </template>
+    </a-timeline-item>
+  </a-timeline>
+</template>
+```
diff --git a/packages/web-vue/components/timeline/item.vue b/packages/web-vue/components/timeline/item.vue
@@ -14,11 +14,13 @@
         <slot />
       </div>
       <div v-if="labelPosition !== 'relative'" :class="`${prefixCls}-label`">
-        {{ label }}
+        <slot v-if="$slots.label" name="label" />
+        <template v-else>{{ label }}</template>
       </div>
     </div>
     <div v-if="labelPosition === 'relative'" :class="`${prefixCls}-label`">
-      {{ label }}
+      <slot v-if="$slots.label" name="label" />
+      <template v-else>{{ label }}</template>
     </div>
   </div>
 </template>
@@ -106,6 +108,11 @@ export default defineComponent({
    * @en Custom dot
    * @slot dot
    */
+  /**
+   * @zh 自定义标签
+   * @en Custom label
+   * @slot label
+   */
   setup(props) {
     const prefixCls = getPrefixCls('timeline-item');
     const instance = getCurrentInstance();