Slint Kit Documentation

Présentation

Étapes pour Slint

KitSteps · Slint Kit 0.3.1

Indicateur d’étapes avec états explicites de progression.

Indicateur d’étapes avec états explicites de progression.
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
import { KitSteps, KitTheme, KitThemes, StepState } from "@kit/kit.slint";

export component App inherits Window {
    title: "KitSteps example";
    preferred-width: 420px;
    preferred-height: 280px;
    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: "Steps"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitSteps { theme: root.theme; entries: [{ token: 11, label: "Account", state: StepState.complete }, { token: 23, label: "Workspace", state: StepState.current }, { token: 38, label: "Invite team", state: StepState.pending }]; }
    }
}

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-steps-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 StepEntry avec un token stable, un libellé et StepState.pending, .current, .complete ou .error. Projetez l’état depuis votre flux métier.

Le numéro visuel suit l’ordre des entrées, tandis que le token reste l’identité de l’étape. Les étapes terminées affichent une coche et les libellés accessibles incluent l’état.

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
Indicateur d’étapes avec états explicites de progression.
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
import { KitSteps, KitTheme, KitThemes, StepState } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitSteps — exemple";
    preferred-width: 420px;
    preferred-height: 280px;
    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: "Étapes"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitSteps { theme: root.theme; entries: [{ token: 11, label: "Compte", state: StepState.complete }, { token: 23, label: "Espace de travail", state: StepState.current }, { token: 38, label: "Inviter l’équipe", state: StepState.pending }]; }
        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 [StepEntry] in

Types et variantes

Type Déclaration
struct StepEntry token: int, label: string, state: StepState
enum StepState pending, current, complete, error

Voir aussi