Timeline
v0.0.10
mix mishka.ui.gen.component timeline
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.
Overview of the Phoenix LiveView Timeline Component
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.
Colors
The timeline component offers a range of color options to customize its appearance. Colors like base, white, primary, secondary, dark, success, warning, danger, info, misc, and dawn, and silver ensuring it can adapt to a variety of timeline styles and design requirements.
Colors
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 AghiliComponent 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 AghiliInitial 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 AghiliComponent 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="base"></.timeline>
<.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="natural"></.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.
Timeline horizontal prop
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.
Timeline hide last line prop
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.
Timeline section
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 AghiliComponent 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 AghiliUI 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 size
The line_size 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 size according to the visual requirements of your timeline. By using larger bullets, thicker lines will complement your design more effectively.
Timeline section line size
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 AghiliComponent 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_size="extra_small"></.timeline_section>
<.timeline_section line_size="small"></.timeline_section>
<.timeline_section line_size="medium"></.timeline_section>
<.timeline_section line_size="large"></.timeline_section>
<.timeline_section line_size="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.
Timeline section size prop
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 AghiliComponent 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.
Timeline section bullet icon prop
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 AghiliComponent 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.
Timeline section title prop
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.
Timeline section description prop
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.
Timeline section time prop
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.
The alt prop is the alternative text of that image. Write what the picture shows, such as the name of the person in a profile photo. Its default is an empty string, which marks the image as decorative so screen readers skip it; the image path is never used as the text.
Timeline section image prop
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" alt="Mona Aghili" size="extra_small"></.timeline_section>
<.timeline_section image="/path" alt="Mona Aghili" size="small"></.timeline_section>
<.timeline_section image="/path" alt="Mona Aghili" size="medium"></.timeline_section>
<.timeline_section image="/path" alt="Mona Aghili" size="large"></.timeline_section>
<.timeline_section image="/path" alt="Mona Aghili" size="extra_large"></.timeline_section>
<.timeline_section image="/path" alt="Mona Aghili" size="double_large"></.timeline_section>
<.timeline_section image="/path" alt="Mona Aghili" size="triple_large"></.timeline_section>
<.timeline_section image="/path" alt="Mona Aghili" size="quadruple_large"></.timeline_section>
</.timeline>Timeline line style prop
Timeline line style prop
Initial Setup
Component Development
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 line_style="solid"></.timeline_section>
<.timeline_section line_style="dashed"></.timeline_section>
<.timeline_section line_style="dotted"></.timeline_section>
</.timeline>
<!--Examples-->
<.timeline color="success" horizontal>
<.timeline_section horizontal line_style="dashed" line_size="extra_large" />
<.timeline_section horizontal line_style="dotted" />
</.timeline>
<.timeline color="warning">
<.timeline_section line_style="dashed" />
<.timeline_section line_style="dotted" />
</.timeline>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | No | A unique identifier is used to manage state and interaction |
color
|
string
|
base
|
basewhiteprimarysecondarydarksuccesswarningdangerinfonaturalmiscdawnsilver
| No | Determines color theme |
hide_last_line
|
boolean
|
false
| — | No | Hides the line for the last timeline section |
gapped_sections
|
boolean
|
false
| — | No | Adds gaps between timeline sections |
class
|
any
| — | — | No | Custom CSS class for additional styling |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
horizontal
|
boolean
|
false
| — | No | Determines whether element is horizontal |
Slots
| Name | Required | Description |
|---|---|---|
inner_block
| No | Inner block that renders HEEx content |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--color
|
basewhiteprimarysecondarydarksuccesswarningdangerinfonaturalmiscdawnsilver
|
--size
|
extra_smallsmallmediumlargeextra_largedouble_largetriple_largequadruple_large
|
--type
|
timelinetimeline_section
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component timeline