Fixed #931 - Customizing the line of Timeline component

primefaces · May 14, 2021 · 2acf800 · 2acf800
1 parent 84ed5f3
commit 2acf800
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/api-generator/components/timeline.js b/api-generator/components/timeline.js
@@ -37,6 +37,10 @@ const TimelineSlots = [
     {
         name: "content",
         description: "Custom content"
+    },
+    {
+        name: "connector",
+        description: "Connector element"
     }
 ];
 

diff --git a/src/components/timeline/Timeline.d.ts b/src/components/timeline/Timeline.d.ts
@@ -13,6 +13,7 @@ declare class Timeline {
         content: VNode[];
         opposite: VNode[];
         marker: VNode[];
+        connector: VNode[];
     }
 }
 

diff --git a/src/components/timeline/Timeline.vue b/src/components/timeline/Timeline.vue
@@ -8,7 +8,9 @@
                 <slot name="marker" :item="item" :index="index">
                     <div class="p-timeline-event-marker"></div>
                 </slot>
-                <div v-if="index !== (value.length - 1)" class="p-timeline-event-connector"></div>
+                <slot name="connector" v-if="index !== (value.length - 1)">
+                    <div class="p-timeline-event-connector"></div>
+                </slot>
             </div>
             <div class="p-timeline-event-content">
                 <slot name="content" :item="item" :index="index"></slot>

diff --git a/src/views/timeline/TimelineDoc.vue b/src/views/timeline/TimelineDoc.vue
@@ -110,6 +110,21 @@ export default {
 	&lt;/template&gt;
 &lt;/Timeline&gt;
 </template>
+</code></pre>
+
+        <h5>Custom Connectors</h5>
+        <p>Connector is an element that binds two events together, use the <i>connector</i> slot to use your own element instead of the default one. If you just require to customize simple properties like the 
+        color and width, apply the "p-timeline-event-connector" class to your element to use the built-in positioning.</p>
+<pre v-code><code><template v-pre>
+&lt;Timeline :value="events"&gt;
+	&lt;template #content="slotProps"&gt;
+		&#123;&#123;slotProps.item.status&#125;&#125;
+	&lt;/template&gt;
+    &lt;template #connector&gt;
+		&lt;div class="p-timeline-event-connector" style="width:4px; color: blue"&gt;&lt;/div&gt;
+	&lt;/template&gt;
+&lt;/Timeline&gt;
+</template>
 </code></pre>
 
 		<h5>Properties</h5>
@@ -164,18 +179,23 @@ export default {
 				<tbody>
                     <tr>
                         <td>opposite</td>
-                        <td>item: Position of the component<br />
-							index: Index of the item</td>
+                        <td>item: Position of the event<br />
+							index: Index of the event</td>
                     </tr>
                     <tr>
                         <td>marker</td>
-                        <td>item: Custom marker of the component<br />
-							index: Index of the item</td>
+                        <td>item: Custom marker of the event<br />
+							index: Index of the event</td>
                     </tr>
 					<tr>
                         <td>content</td>
-                        <td>item: Content of the component<br />
-							index: Index of the item</td>
+                        <td>item: Content of the event<br />
+							index: Index of the event</td>
+                    </tr>
+                    <tr>
+                        <td>connector</td>
+                        <td>item: Content of the event<br />
+							index: Index of the event</td>
                     </tr>
 				</tbody>
 			</table>