Slint Kit Documentation

Présentation

Chronologie pour Slint

KitTimeline · Slint Kit 0.3.0

Chronologie verticale de titres, descriptions et métadonnées.

Chronologie verticale de titres, descriptions et métadonnées.
Application native de l’exemple ci-dessous.

Essayer le composant

Télécharger le projet complet, le décompresser et lancer cargo run --locked dans son dossier. Rust 1.92+ ; Slint Kit 0.3.0 depuis crates.io. Vous pouvez aussi copier les quatre fichiers ci-dessous.

Lancez l’application pour observer cette composition et redimensionner sa fenêtre.

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 et 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");
}

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

Fournissez des TimelineEntry dans l’ordre souhaité, avec des métadonnées déjà formatées par le contrôleur. Prévoyez la hauteur nécessaire au texte agrandi ou placez la chronologie dans une zone de défilement.

Chaque entrée est reliée par un marqueur et un trait visuels. La vue ne trie pas les événements et ne virtualise pas la collection.

Voir le code source ↗

Composition visuelle

Le fichier ci-dessous produit la capture. Pour les composants pilotés par un contrôleur, il montre l’état affiché sans fournir le branchement Rust. Créer un projet.

Afficher le fichier de la capture
Chronologie verticale de titres, descriptions et métadonnées.
Capture native du même exemple, moteur Skia.
// Public label overrides localize this fixture; toolkit/host defaults keep their language.
// 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 — exemple";
    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: "Chronologie"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitTimeline { theme: root.theme; entries: [{ title: "Projet créé", description: "Alex a ouvert l’espace de travail.", metadata: "09:00" }, { title: "Recherche partagée", description: "Jamie a ajouté les notes d’entretien.", metadata: "09:30" }, { title: "Prêt pour révision", description: "L’équipe peut laisser des commentaires.", 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; }
    }
}

Télécharger cet exemple

API publique

Hérite de VerticalLayout.

Propriétés

Nom Type Sens
theme KitTheme in
entries [TimelineEntry] in

Types et variantes

Type Déclaration
struct TimelineEntry title: string, description: string, metadata: string

Voir aussi