Slint Kit Documentation

Display

Timeline for Slint

KitTimeline · Slint Kit 0.3.0

Vertical timeline of headings, descriptions and metadata.

Vertical timeline of headings, descriptions and metadata.
Native app built from the example below.

Try the component

Download the complete project, extract it and run cargo run --locked in its folder. Rust 1.92+; Slint Kit 0.3.0 from crates.io. You can also copy the four files below.

Run the app to inspect this composition and resize its window.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
// Display projections are fixtures. Validate accepted domain values in Rust.
import { KitTheme, KitThemes, KitTimeline } from "@kit/kit.slint";

export component App inherits Window {
    title: "KitTimeline example";
    preferred-width: 480px;
    preferred-height: 350px * root.theme.text-scale;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Timeline"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitTimeline { theme: root.theme; entries: [{ title: "Project created", description: "Alex opened the workspace.", metadata: "09:00" }, { title: "Research shared", description: "Jamie added the interview notes.", metadata: "09:30" }, { title: "Ready for review", description: "The team can leave feedback.", metadata: "10:15" }]; }
    }
}

src/main.rs

// SPDX-License-Identifier: GPL-3.0-or-later
slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slint_kit::init_form_validation!(self, app);
    app.run()
}
Cargo.toml and build.rs

Cargo.toml

[package]
name = "slint-kit-timeline-example"
version = "0.1.0"
edition = "2024"
rust-version = "1.92"
license = "GPL-3.0-or-later"
publish = false

[dependencies]
slint-kit = "=0.3.0"
slint = { version = "=1.18.1", default-features = false, features = ["std", "compat-1-18", "backend-winit", "renderer-skia", "accessibility"] }

[build-dependencies]
slint-kit-build = "=0.3.0"

[workspace]

build.rs

fn main() {
    slint_kit_build::compile("ui/app.slint").expect("compile component example");
}

Files: Cargo.toml · build.rs · ui/app.slint · src/main.rs

Supply TimelineEntry values in the desired order, with metadata already formatted by the controller. Allow height for enlarged text or place the timeline in a scroll area.

Each entry is connected by a visual marker and rule. The view neither sorts events nor virtualizes the collection.

View source ↗

Visual composition

The file below produces the screenshot. For controller-driven components, it shows the displayed state without supplying the Rust wiring. Create a project.

Show the screenshot source
Vertical timeline of headings, descriptions and metadata.
Native screenshot of the same example, rendered with Skia.
// SPDX-License-Identifier: GPL-3.0-or-later
// Display projections are fixtures. Validate accepted domain values in Rust.
import { KitTheme, KitThemes, KitTimeline } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitTimeline example";
    preferred-width: 480px;
    preferred-height: 350px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in-out property <string> status;
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Timeline"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitTimeline { theme: root.theme; entries: [{ title: "Project created", description: "Alex opened the workspace.", metadata: "09:00" }, { title: "Research shared", description: "Jamie added the interview notes.", metadata: "09:30" }, { title: "Ready for review", description: "The team can leave feedback.", metadata: "10:15" }]; }
        if root.status != "": Text { text: root.status; color: root.theme.text-secondary; font-size: 12px * root.theme.text-scale; wrap: word-wrap; }
    }
}

Download this example

Public API

Inherits VerticalLayout.

Properties

Name Type Direction
theme KitTheme in
entries [TimelineEntry] in

Types and variants

Type Declaration
struct TimelineEntry title: string, description: string, metadata: string

See also