Jesse Roberts:
I would like to implement something like this: https://vuetifyjs.com/en/components/timelines/#opposite are there any prebuilt components in BF for this, or do I need to install the component separately?
Delfs:
this is fairly easy to build. do you want it to look exactly the same (well close)?
(with alternating events)
Delfs:
V1, zero code
Jesse Roberts:
nice. ok…no need for a component when BFA just pulls it together
Delfs:
give me a sec, almost there lol
Jesse Roberts:
indeed
Delfs:
Delfs:
<div class="relative">
<!-- Timeline -->
<div class="absolute w-0.5 bg-gray-300 h-full left-1/2 transform -translate-x-1/2"></div>
<!-- Events -->
<div v-for="(event, index) in model.events" :key="index" class="mb-8 flex justify-between items-center w-full right-timeline">
<!-- Event Content Left -->
<div v-if="index % 2 === 0" class="order-1 w-5/12">
<!-- Event Details -->
<div class="bg-white rounded-lg shadow-xl w-full px-6 py-4">
<h3 class="mb-3 font-bold text-gray-800 text-xl">{{ event.title }}</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">{{ event.description }}</p>
</div>
</div>
<!-- Timeline Dot -->
<div class="z-20 flex items-center order-1 bg-blue-100 rounded-full">
</div>
<!-- Timeline Dot -->
<div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-8 h-8 rounded-full absolute left-1/2 transform -translate-x-1/2">
<h1 class="mx-auto font-semibold text-lg text-white">{{ index + 1 }}</h1>
</div>
<!-- Event Content Right -->
<div v-if="index % 2 !== 0" class="order-1 w-5/12">
<!-- Event Details -->
<div class="bg-white rounded-lg shadow-xl w-full px-6 py-4">
<h3 class="mb-3 font-bold text-gray-800 text-xl">{{ event.title }}</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">{{ event.description }}</p>
</div>
</div>
</div>
</div>
example json
{
"events": [{
"date": "2023-03-01",
"description": "First contact with the client to introduce the company and services.",
"label": "Initial Contact",
"title": "Initial Outreach to Potential Client"
}, {
"date": "2023-03-08",
"description": "Second meeting to discuss client needs and potential solutions.",
"label": "Follow-up",
"title": "Follow-up Meeting"
}, {
"date": "2023-03-15",
"description": "Submission of a detailed proposal outlining the services and pricing.",
"label": "Proposal Submission",
"title": "Submit Proposal"
}, {
"date": "2023-03-22",
"description": "Negotiations on proposal terms and pricing.",
"label": "Negotiation",
"title": "Negotiation Phase"
}, {
"date": "2023-03-29",
"description": "Final agreement and signing of the contract to close the deal.",
"label": "Closing",
"title": "Closing the Deal"
}, {
"date": "2023-04-05",
"description": "Follow-up with the client after the sale to ensure satisfaction and discuss future services.",
"label": "Follow-up",
"title": "Post-Sale Follow-up"
}]
}
Jesse Roberts:
pretty good! what’s the font you are using there?
Delfs:
default, maybe inter?
Delfs:
@Jesse Roberts There is a public example now ‘vertical timeline’
https://christinatest.fmbetterforms.com/#/form/FR_5D8BF1FB-134A-4E4A-AFC3-752AA666FF37
Merry Christmas!