Jenga/io.github.joelkanyi.jenga.component.timeline

Package-level declarations

Timelines: JengaTimelineItem (fixed states, or your own marker and content), JengaTimelineMarker and JengaTimelinePosition.of.

Types

JengaTimelineColors

@Immutable

class JengaTimelineColors(val done: Color, val current: Color, val stopped: Color, val toDo: Color, val onMarker: Color, val connector: Color, val reachedConnector: Color, val title: Color, val subtitle: Color)

Resolved colors for a JengaTimelineItem. Override via JengaTimelineDefaults.colors.

JengaTimelineDefaults

object JengaTimelineDefaults

Defaults and token mappings for JengaTimelineItem.

JengaTimelineMarkerStyle

enum JengaTimelineMarkerStyle : Enum<JengaTimelineMarkerStyle>

How a JengaTimelineMarker is drawn.

JengaTimelinePosition

enum JengaTimelinePosition : Enum<JengaTimelinePosition>

Where a JengaTimelineItem sits in its timeline; the last stage draws no connector below.

JengaTimelineState

enum JengaTimelineState : Enum<JengaTimelineState>

Progress state of a stage in a timeline.

Functions

JengaTimelineItem

@Composable

fun JengaTimelineItem(position: JengaTimelinePosition, marker: @Composable () -> Unit, modifier: Modifier = Modifier, lineColor: Color = JengaTimelineDefaults.colors().connector, markerSize: Dp = JengaTimelineDefaults.MarkerSize, contentPadding: PaddingValues = JengaTimelineDefaults.contentPadding, content: @Composable () -> Unit)

One item of a vertical timeline with any marker and any content: a marker with the content beside it, and a line in lineColor from the marker down to the next item. The line follows the item's height. Stack items in a column or give each its own item {} in a lazy list, with JengaTimelinePosition.of for position.

@Composable

fun JengaTimelineItem(state: JengaTimelineState, title: String, position: JengaTimelinePosition, modifier: Modifier = Modifier, subtitle: String? = null, trailingContent: @Composable () -> Unit? = null, stateDescription: String? = null, markerSize: Dp = JengaTimelineDefaults.MarkerSize, contentPadding: PaddingValues = JengaTimelineDefaults.contentPadding, titleStyle: TextStyle = JengaTimelineDefaults.titleStyle, subtitleStyle: TextStyle = JengaTimelineDefaults.subtitleStyle, colors: JengaTimelineColors = JengaTimelineDefaults.colors())

One stage of a vertical timeline: a state marker with a title and optional subtitle beside it, and a connector line down to the next stage. Stack items in a column or lazy list, giving each its position; each item draws its own connector, so no measuring pass is needed. The connector below a done stage is drawn in the reached color.

JengaTimelineMarker

@Composable

fun JengaTimelineMarker(color: Color, modifier: Modifier = Modifier, style: JengaTimelineMarkerStyle = JengaTimelineMarkerStyle.Filled, size: Dp = JengaTimelineDefaults.MarkerSize, ringWidth: Dp = JengaTimelineDefaults.RingWidth, contentColor: Color = if (style == JengaTimelineMarkerStyle.Ring) color else JengaTimelineDefaults.colors().onMarker, content: @Composable () -> Unit? = null)

A round timeline marker in color, filled or as a ring, with optional content (e.g. a step number or an icon) centered inside.