JetLime Documentation

JetLime is a UI library for Compose Multiplatform designed to display timeline views. It supports Android, iOS, Desktop (JVM), and Web (JS & WASM).

Key Capabilities:

• Layouts: Supports both vertical (JetLimeColumn) and horizontal (JetLimeRow) timelines.
• Point Placement: Flexible placement options including START, CENTER, and END with continuous line joins.
• Styling: Supports dashed, gradient, or solid lines using Brush and PathEffect.
• RTL Support: Built-in Right-to-Left (RTL) support for JetLimeRow and JetLimeExtendedEvent to ensure content visibility and mirrored layouts.
• Advanced Events: JetLimeExtendedEvent provides dual content slots (left/right), icons, and animations.
• Pagination: Built-in infinite scroll support via JetLimePaginatedColumn and JetLimePaginatedRow without additional dependencies.
• Defaults: Uses JetLimeDefaults for sensible API defaults.

Use JetLimeEventDefaults.eventStyle() to style the individual event points. You must pass the position (provided by the timeline lambda) to the style.

Key properties:

• pointColor: Background color of the point circle.
• pointFillColor: Fill color drawn over the pointColor.
• pointRadius: Radius of the point circle (Dp).
• pointStrokeWidth: Width of the circle border (Dp).
• pointStrokeColor: Color of the circle border.
• pointType: Determines the shape/style (EMPTY, FILLED, or CUSTOM).
• pointPlacement: Controls where the point renders relative to the item (START, CENTER, or END).
• pointAnimation: Configures the point's animation (use JetLimeEventDefaults.pointAnimation() for default).

JetLimeEvent(
  style = JetLimeEventDefaults.eventStyle(
    position = position,
    pointColor = Color(0xFF2889D6),
    pointFillColor = Color(0xFFD5F2FF),
    pointRadius = 14.dp,
    pointAnimation = JetLimeEventDefaults.pointAnimation(),
    pointType = EventPointType.filled(0.8f),
    pointStrokeWidth = 2.dp,
    pointStrokeColor = MaterialTheme.colorScheme.onBackground,
  ),
) {
  // Content
}

Use JetLimeDefaults.columnStyle() or JetLimeDefaults.rowStyle() to configure the timeline appearance.

Common properties:

• contentDistance: Distance from the line to the content (Dp).
• itemSpacing: Gap between event items (Dp).
• lineThickness: Thickness of the timeline line (Dp).
• lineBrush: The Brush used to draw the line (e.g., JetLimeDefaults.lineSolidBrush() or JetLimeDefaults.lineGradientBrush()).
• lineVerticalAlignment (Column only): LEFT or RIGHT (Default: LEFT).
• lineHorizontalAlignment (Row only): TOP or BOTTOM (Default: TOP).
• pathEffect: Used for dashed or dotted lines via PathEffect.dashPathEffect.

// Column Example
JetLimeColumn(
  style = JetLimeDefaults.columnStyle(
    contentDistance = 32.dp,
    itemSpacing = 16.dp,
    lineThickness = 2.dp,
    lineBrush = JetLimeDefaults.lineSolidBrush(color = Color(0xFF2196F3)),
    lineVerticalAlignment = RIGHT,
  ),
) { /* ... */ }

// Row Example
JetLimeRow(
  style = JetLimeDefaults.rowStyle(
    contentDistance = 32.dp,
    itemSpacing = 16.dp,
    lineThickness = 2.dp,
    lineBrush = JetLimeDefaults.lineSolidBrush(color = Color(0xFF2196F3)),
    lineHorizontalAlignment = BOTTOM,
  ),
) { /* ... */ }

Use JetLimePaginatedColumn (or JetLimePaginatedRow) to load items page by page. The component triggers onLoadMore when the user scrolls near the end of the list, provided isLoading is false and hasMoreItems is true.

Key behaviors:

• The timeline line remains continuous as long as hasMoreItems is true.
• The line terminates once hasMoreItems is set to false.
• A default progress indicator is shown during loading. To customize it, use loadingContent. To hide it, set loadingContent = null.

val items = remember { mutableStateListOf<Item>() }
var isLoading by remember { mutableStateOf(false) }
var hasMore by remember { mutableStateOf(true) }
val scope = rememberCoroutineScope()

// Trigger the first page
LaunchedEffect(Unit) { if (items.isEmpty()) loadNextPage() }

JetLimePaginatedColumn(
  itemsList = ItemsList(items),
  key = { _, item -> item.id },
  isLoading = isLoading,
  hasMoreItems = hasMore,
  onLoadMore = {
    scope.launch {
      isLoading = true
      val page = repository.loadNextPage()
      items.addAll(page.items)
      hasMore = !page.isLast
      isLoading = false
    }
  },
  loadingContent = null, // or { MyLoader() }
) { index, item, position ->
  JetLimeEvent(
    style = JetLimeEventDefaults.eventStyle(position = position)
  ) {
    // Content here
  }
}