SimpleTimeline
Create horizontal timelines and linear scales with this Vaadin component.
SimpleTimeline is a Vaadin component for presenting data points on a horizontal line. It consists of two classes:
- SimpleTimeline Timeline element itself containing the items.
- SimpleTimelineItem A single item on the timeline that contains the text, HTML.
Basic usage is as follows:
final SimpleTimeline t = new SimpleTimeline("Release schedule");
t.add(10, "Planning").addClassNames(SimpleTimelineItem.STYLE_SECONDARY,SimpleTimelineItem.VARIANT_DASHED);
t.add(20, -1, "Brainstorming");
t.add(40, "More planning").addClassNames(SimpleTimelineItem.STYLE_PRIMARY);
t.add(70, 2, "Scrum").addClassNames(SimpleTimelineItem.STYLE_PRIMARY, SimpleTimelineItem.VARIANT_FILLED);
t.add(95, 2, "Deadline: 31.12.2022").addClassNames(SimpleTimelineItem.VARIANT_FILLED, SimpleTimelineItem.STYLE_ERROR);
t.setBreaks(25,50,75);
t.addClickListener(e -> Notification.show(e.getItem().getText()));
add(t);
Which creates the following timeline:
This component is based on @parttio/simple-timeline
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
First Vaadin version based on @parttio/simple-timeline 2.0.5
- Released
- 2022-12-27
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 23+
- Browser
- Browser Independent
SimpleTimeline - Vaadin Add-on Directory
Create horizontal timelines and linear scales with this Vaadin component.
SimpleTimeline is a Vaadin component for presenting data points on a horizontal line. It consists of two classes:
- __SimpleTimeline__ Timeline element itself containing the items.
- __SimpleTimelineItem__ A single item on the timeline that contains the text, HTML.
Basic usage is as follows:
```
final SimpleTimeline t = new SimpleTimeline("Release schedule");
t.add(10, "Planning").addClassNames(SimpleTimelineItem.STYLE_SECONDARY,SimpleTimelineItem.VARIANT_DASHED);
t.add(20, -1, "Brainstorming");
t.add(40, "More planning").addClassNames(SimpleTimelineItem.STYLE_PRIMARY);
t.add(70, 2, "Scrum").addClassNames(SimpleTimelineItem.STYLE_PRIMARY, SimpleTimelineItem.VARIANT_FILLED);
t.add(95, 2, "Deadline: 31.12.2022").addClassNames(SimpleTimelineItem.VARIANT_FILLED, SimpleTimelineItem.STYLE_ERROR);
t.setBreaks(25,50,75);
t.addClickListener(e -> Notification.show(e.getItem().getText()));
add(t);
```
Which creates the following timeline:
This component is based on [@parttio/simple-timeline](https://www.npmjs.com/package/@parttio/simple-timeline)
View on GitHubSimpleTimeline version 1.0.0
First Vaadin version based on @parttio/simple-timeline 2.0.5