vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #931 - Customizing the line of Timeline component

pull/1196/head^2
Cagatay Civici 2021-05-14 12:50:55 +03:00
parent 84ed5f3299
commit 2acf800b43
4 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api-generator/components/timeline.js
View File

@ -37,6 +37,10 @@ const TimelineSlots = [
{ {
name: "content", name: "content",
description: "Custom content" description: "Custom content"
},
{
name: "connector",
description: "Connector element"
} }
]; ];

1
src/components/timeline/Timeline.d.ts vendored
View File

@ -13,6 +13,7 @@ declare class Timeline {
content: VNode[]; content: VNode[];
opposite: VNode[]; opposite: VNode[];
marker: VNode[]; marker: VNode[];
connector: VNode[];
} }
} }

4
src/components/timeline/Timeline.vue
View File

@ -8,7 +8,9 @@
<slot name="marker" :item="item" :index="index"> <slot name="marker" :item="item" :index="index">
<div class="p-timeline-event-marker"></div> <div class="p-timeline-event-marker"></div>
</slot> </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>
<div class="p-timeline-event-content"> <div class="p-timeline-event-content">
<slot name="content" :item="item" :index="index"></slot> <slot name="content" :item="item" :index="index"></slot>

32
src/views/timeline/TimelineDoc.vue
View File

@ -110,6 +110,21 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/Timeline&gt; &lt;/Timeline&gt;
</template> </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> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
@ -164,18 +179,23 @@ export default {
<tbody> <tbody>
<tr> <tr>
<td>opposite</td> <td>opposite</td>
<td>item: Position of the component<br /> <td>item: Position of the event<br />
index: Index of the item</td> index: Index of the event</td>
</tr> </tr>
<tr> <tr>
<td>marker</td> <td>marker</td>
<td>item: Custom marker of the component<br /> <td>item: Custom marker of the event<br />
index: Index of the item</td> index: Index of the event</td>
</tr> </tr>
<tr> <tr>
<td>content</td> <td>content</td>
<td>item: Content of the component<br /> <td>item: Content of the event<br />
index: Index of the item</td> 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> </tr>
</tbody> </tbody>
</table> </table>