Overview of the Phoenix LiveView Timeline Component
The Mishka Chelekom Timeline component is a versatile and customizable Phoenix LiveView tool for displaying chronological or sequential events. Ideal for timelines that track progress, milestones, or history, it supports both horizontal and vertical layouts. Developers can fully customize it with flexible options for colors, line widths, and bullet sizes to match your app's design.
This Phoenix LiveView component also offers thematic colors, icon support, and responsive design, ensuring a seamless user experience for both desktop and mobile users. It is perfect for any project that requires an organized, visually appealing timeline to represent events or steps.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.
Colors
The timeline component
offers a range of color options to customize its appearance. Colors like
white
,
primary
,
secondary
,
dark
,
success
,
warning
,
danger
,
info
,
light
,
misc
, and
dawn
, and
silver
ensuring it can adapt to a variety of timeline styles and design requirements.
Initial Setup and Configuration
I set up the initial project structure for Mishka Chelekom, ensuring the environment was configured correctly for Phoenix LiveView. This involved configuring the necessary libraries and tools for seamless component development and ensuring the project was ready for the team to start working efficiently.
Mona Aghili
Component Development and Testing
I developed several core components for Mishka Chelekom, including the timeline and card components. I also wrote test cases to ensure that the components functioned correctly in different scenarios, ensuring they were ready for integration into the larger project.
Mona Aghili
<.timeline color="white"></.timeline> <.timeline color="primary"></.timeline> <.timeline color="secondary"></.timeline> <.timeline color="dark"></.timeline> <.timeline color="success"></.timeline> <.timeline color="warning"></.timeline> <.timeline color="danger"></.timeline> <.timeline color="info"></.timeline> <.timeline color="light"></.timeline> <.timeline color="misc"></.timeline> <.timeline color="dawn"></.timeline> <.timeline color="silver"></.timeline>
Timeline horizontal prop
The
horizontal
prop changes the Mishka Chelekom Timeline from its default vertical layout to horizontal. By setting
horizontal
to true on the timeline, it switches to a left-to-right orientation. To make this work, you must also set the
horizontal
prop on each
timeline_section
. This ensures both the timeline and its sections display correctly in the horizontal format.
Initial Setup
Component Development
<.timeline horizontal> <.timeline_section horizontal></.timeline_section> <.timeline_section horizontal></.timeline_section> <.timeline_section horizontal></.timeline_section> <.timeline_section horizontal></.timeline_section> <.timeline_section horizontal></.timeline_section> <.timeline_section horizontal></.timeline_section> </.timeline>
Timeline hide last line prop
The
hide_last_line
attribute in the Mishka Chelekom Timeline component is a boolean prop that allows you to hide the last vertical line in the timeline. By default, the timeline displays a line after each event or section, but when
hide_last_line
is set to true, the line after the final section is removed. This is useful when you want to visually indicate that the timeline has reached its conclusion or to create a cleaner design at the end of the sequence.
Initial Setup
Component Development
Initial Design Phase
The initial design phase for the Mishka Chelekom project focused on creating wireframes and mockups for core components like buttons, forms, and the navigation bar. This step laid the foundation for the overall look and feel of the application.
Component Development
During this stage, the development team began implementing the designed components, focusing on responsiveness and accessibility. The button and form elements were the first to be coded, ensuring they met both functionality and design requirements.
<.timeline hide_last_line> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> </.timeline>
Timeline section
The
timeline_section
component is the core building block of the Mishka Chelekom Timeline. Every individual event or milestone displayed in the timeline is wrapped within a
timeline_section
. It acts as a container for each section, allowing you to include details like titles, descriptions, timestamps, and even custom content like images or icons. For every event or step you want to display on the timeline, you would use a
timeline_section
. This provides flexibility for customizing each section's appearance and content, making it easy to visually organize sequential information or milestones. The
timeline_section
component also includes a
horizontal
prop, ensuring it aligns correctly when used in a horizontal timeline. Whether you're working with a simple or complex timeline, multiple
timeline_section
components can be added to create a comprehensive, detailed timeline.
Initial Setup and Configuration
I set up the initial project structure for Mishka Chelekom, ensuring the environment was configured correctly for Phoenix LiveView. This involved configuring the necessary libraries and tools for seamless component development and ensuring the project was ready for the team to start working efficiently.
Mona Aghili
Component Development and Testing
I developed several core components for Mishka Chelekom, including the timeline and card components. I also wrote test cases to ensure that the components functioned correctly in different scenarios, ensuring they were ready for integration into the larger project.
Mona Aghili
UI Enhancements and Final Review
I worked on refining the user interface for Mishka Chelekom, focusing on improving the accessibility and responsiveness of the components. After ensuring all design elements were aligned with the project’s guidelines, I conducted a final review to verify that the timeline, cards, and other components were performing well across different devices and screen sizes.
Mona Aghili
<.timeline> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> <.timeline_section></.timeline_section> </.timeline>
Timeline section line width
The
line_width
attribute in the
Mishka Chelekom Timeline
component controls the thickness of the timeline's lines. It offers several options:
"extra_small"
(the default),
"small"
,
"medium"
,
"large"
, and
"extra_large"
. These size options allow you to customize the line width according to the visual requirements of your timeline. By using larger bullets, thicker lines will complement your design more effectively.
Initial Setup and Configuration
I set up the initial project structure for Mishka Chelekom, ensuring the environment was configured correctly for Phoenix LiveView. This involved configuring the necessary libraries and tools for seamless component development and ensuring the project was ready for the team to start working efficiently.
Mona Aghili
Component Development and Testing
I developed several core components for Mishka Chelekom, including the timeline and card components. I also wrote test cases to ensure that the components functioned correctly in different scenarios, ensuring they were ready for integration into the larger project.
Mona Aghili
<.timeline> <.timeline_section line_width="extra_small"></.timeline_section> <.timeline_section line_width="small"></.timeline_section> <.timeline_section line_width="medium"></.timeline_section> <.timeline_section line_width="large"></.timeline_section> <.timeline_section line_width="extra_large"></.timeline_section> </.timeline>
Timeline section size prop
The
size
attribute in the Mishka Chelekom Timeline component determines the overall size of the timeline elements, including the bullet points that mark each event. By adjusting the
size
attribute, you can change the bullet size to better fit the design of your timeline. The available options include
"extra_small"
(the default),
"small"
,
"medium"
,
"large"
,
"extra_large"
, and larger sizes like
"double_large"
,
"triple_large"
, and
"quadruple_large"
. These sizes allow for flexibility in bullet appearance, ensuring that the timeline's visual elements are appropriately scaled.
Initial Setup and Configuration
I set up the initial project structure for Mishka Chelekom, ensuring the environment was configured correctly for Phoenix LiveView. This involved configuring the necessary libraries and tools for seamless component development and ensuring the project was ready for the team to start working efficiently.
Mona Aghili
Component Development and Testing
I developed several core components for Mishka Chelekom, including the timeline and card components. I also wrote test cases to ensure that the components functioned correctly in different scenarios, ensuring they were ready for integration into the larger project.
Mona Aghili
<.timeline> <.timeline_section size="extra_small"></.timeline_section> <.timeline_section size="small"></.timeline_section> <.timeline_section size="medium"></.timeline_section> <.timeline_section size="large"></.timeline_section> <.timeline_section size="extra_large"></.timeline_section> <.timeline_section size="double_large"></.timeline_section> <.timeline_section size="triple_large"></.timeline_section> <.timeline_section size="quadruple_large"></.timeline_section> </.timeline>
Timeline section bullet icon prop
The
bullet_icon
attribute lets you add an icon, like those from Heroicons, inside the timeline's bullet. Just pass the icon name as a string to display it in the bullet. If not set, the bullet will show as a plain circle by default.
Initial Setup and Configuration
I set up the initial project structure for Mishka Chelekom, ensuring the environment was configured correctly for Phoenix LiveView. This involved configuring the necessary libraries and tools for seamless component development and ensuring the project was ready for the team to start working efficiently.
Mona Aghili
Component Development and Testing
I developed several core components for Mishka Chelekom, including the timeline and card components. I also wrote test cases to ensure that the components functioned correctly in different scenarios, ensuring they were ready for integration into the larger project.
Mona Aghili
<.timeline> <.timeline_section bullet_icon="hero-home"></.timeline_section> <.timeline_section bullet_icon="hero-tag"></.timeline_section> </.timeline>
Timeline section title prop
The
title
prop in timeline section is used to set the main heading or label for each event or milestone. It provides a clear, concise description of the section's content, making it easy for users to quickly understand the purpose of each step in the timeline. This prop is optional, but when used, it adds structure and readability to your timeline.
Title prop
Title prop
<.timeline> <.timeline_section title="This is title"></.timeline_section> <.timeline_section title="This is title"></.timeline_section> </.timeline>
Timeline section description prop
The
description
prop in the timeline section allows you to add detailed information or context for each event or milestone. It provides a space to explain what the event is about, offering more clarity and insight into each step of the timeline. This prop is useful for giving users additional details about the event without overcrowding the timeline visually.
This is description of time line section of mishka chelekom timeline component
This is description of time line section of mishka chelekom timeline component
<.timeline> <.timeline_section description="This is description"></.timeline_section> <.timeline_section description="This is description"></.timeline_section> </.timeline>
Timeline section time prop
The
time
prop in the Timeline section is used to display the time or date associated with each event or milestone. This prop helps users understand when a specific event occurred, providing important chronological context for the timeline. It's particularly useful for tracking progress, history, or scheduled events.
This is description of time line section of mishka chelekom timeline component
This is description of time line section of mishka chelekom timeline component
<.timeline> <.timeline_section time="Oct, 24"></.timeline_section> <.timeline_section time="Oct, 24"></.timeline_section> </.timeline>
Timeline section image prop
The
image
prop in the Mishka Chelekom Timeline section allows you to display an image alongside an event instead of the default bullet. By providing a URL as a string, you can replace the bullet with an image, adding a more personalized or visually rich representation of each event. Additionally, the
size
prop will adjust the size of the image, allowing you to scale it according to the design needs of your timeline. This feature is ideal for displaying profile pictures, icons, or other visuals that enhance the understanding of each milestone.
Initial Setup and Configuration
I set up the initial project structure for Mishka Chelekom, ensuring the environment was configured correctly for Phoenix LiveView. This involved configuring the necessary libraries and tools for seamless component development and ensuring the project was ready for the team to start working efficiently.
Component Development and Testing
I developed several core components for Mishka Chelekom, including the timeline and card components. I also wrote test cases to ensure that the components functioned correctly in different scenarios, ensuring they were ready for integration into the larger project.
<.timeline> <.timeline_section image="/path" size="extra_small"></.timeline_section> <.timeline_section image="/path" size="small"></.timeline_section> <.timeline_section image="/path" size="medium"></.timeline_section> <.timeline_section image="/path" size="large"></.timeline_section> <.timeline_section image="/path" size="extra_large"></.timeline_section> <.timeline_section image="/path" size="double_large"></.timeline_section> <.timeline_section image="/path" size="triple_large"></.timeline_section> <.timeline_section image="/path" size="quadruple_large"></.timeline_section> </.timeline>
Timeline more examples