-
Notifications
You must be signed in to change notification settings - Fork 115
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated: Timeline component updated.
- Loading branch information
1 parent
013f4e0
commit 9eeadd1
Showing
19 changed files
with
207 additions
and
826 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,33 @@ | ||
| import { DefaultTimeline, DefaultTimelineCode } from './variant/DefaultTimeline' | ||
| import { HorizontalTimeline, HorizontalTimelineCode } from './variant/HorizontalTimeline' | ||
| import { DashedBorderTimeline, DashedBorderTimelineCode } from './variant/DashedBorderTimeline' | ||
| import { TimelineWithImage, TimelineWithImageCode } from './variant/TimelineWithImage' | ||
| import { timelineApiData } from './TimelineApi' | ||
|
|
||
| import CodePreview from '../../../components/CodePreview' | ||
|
|
||
| import ComponentApi from '../../../components/ComponentApi' | ||
|
|
||
| ## Table of Contents | ||
|
|
||
| Timeline Component is a graphical representation used to visualize a sequence of events or activities over time. It presents information in a chronological order, allowing users to track the progression of events, milestones, or changes. Timelines often include markers, labels, and other visual cues to enhance understanding and engagement. | ||
|
|
||
| ## Default Timeline | ||
|
|
||
| The Default Timeline is a fundamental component that visually presents a sequence of events over time. Each event is showcased in chronological order, offering details such as event dates, titles, and descriptions. | ||
| The Default Timeline is a fundamental component that visually presents a sequence of events over time. | ||
|
|
||
| <CodePreview github="Timeline" code={DefaultTimelineCode}> | ||
| <DefaultTimeline /> | ||
| </CodePreview> | ||
|
|
||
| ## Horizontal Timeline | ||
|
|
||
| The Horizontal Timeline component is designed to display a timeline of events in a horizontal layout. To do that, you need to add `horizontal={true}` props. | ||
|
|
||
| <CodePreview github="Timeline" code={HorizontalTimelineCode}> | ||
| <HorizontalTimeline /> | ||
| </CodePreview> | ||
|
|
||
| ## Dashed Border Timeline | ||
|
|
||
| The Dashed Border Timeline component represents a timeline with dashed borders, creating a distinct visual style for the timeline elements. There are two types of bar type variant in our design system. One is `timelineBarType="solid"`,which is set by default and the other is `timelineBarType="dashed"`. | ||
| The Dashed Border Timeline component represents a timeline with dashed borders. | ||
|
|
||
| <CodePreview github="Timeline" code={DashedBorderTimelineCode}> | ||
| <DashedBorderTimeline /> | ||
| </CodePreview> | ||
|
|
||
| ## Timeline With Image | ||
|
|
||
| The Image Timeline is a dynamic component that showcases a sequence of events along with corresponding images. Each event is presented within a timeline structure, featuring a time indicator, event title, image, and a concise description. | ||
| The Image Timeline is a dynamic component that showcases a sequence of events along with corresponding images. | ||
|
|
||
| <CodePreview github="Timeline" code={TimelineWithImageCode}> | ||
| <TimelineWithImage /> | ||
| </CodePreview> | ||
|
|
||
| ## API Reference | ||
|
|
||
| Explore the available props for the timeline component | ||
|
|
||
| <ComponentApi data={timelineApiData} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1 @@ | ||
| export const timelineApiData = [ | ||
| { | ||
| id: 1, | ||
| propsName: 'horizontal', | ||
| propsType: 'boolean', | ||
| propsDescription: 'Arranges the timeline component horizontally if set to true.', | ||
| default: 'false', | ||
| }, | ||
| { | ||
| id: 2, | ||
| propsName: 'gradientPoint', | ||
| propsType: 'boolean', | ||
| propsDescription: 'Adds a gradient effect to the timeline event markers.', | ||
| default: 'false', | ||
| }, | ||
| { | ||
| id: 3, | ||
| propsName: 'gradientColor', | ||
| propsType: 'string', | ||
| propsDescription: `Adds a gradient color with class "bg-gradient-{1-31}".`, | ||
| default: 'bg-gradient-9', | ||
| }, | ||
| { | ||
| id: 4, | ||
| propsName: 'timelineBarType', | ||
| propsType: ['solid', 'dashed'], | ||
| propsDescription: 'Sets the type of bar style in the timeline.', | ||
| default: 'solid', | ||
| }, | ||
| ] | ||
| export const timelineApiData = [] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.