Slint Kit Documentation

Navigation

Collapse for Slint

KitCollapse · Slint Kit 0.3.0

Disclosure block for arbitrary content retained in the visual tree.

Disclosure block for arbitrary content retained in the visual tree.
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.

Open and close Publishing details; Rust publishes the expansion state.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitCollapse, KitTheme, KitThemes } from "@kit/kit.slint";
export component App inherits Window {
    title: "KitCollapse example";
    preferred-width: 520px;
    preferred-height: 280px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in property <bool> expanded;
    callback expand(bool);
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        alignment: start;
        control := KitCollapse { theme: root.theme; title: "Publishing details"; expanded: root.expanded; expansion-requested(value) => { root.expand(value); } Text { text: "Publishing sends your team a notification."; color: root.theme.text-primary; wrap: word-wrap; } }
        result := Text { text: root.expanded ? "Expanded" : "Collapsed"; color: root.theme.text-secondary; }
    }

}

src/main.rs

// SPDX-License-Identifier: GPL-3.0-or-later
use slint::ComponentHandle;

mod ui { slint::include_modules!(); }
fn main() -> Result<(), slint::PlatformError> {
    let app = ui::App::new()?;
    slint_kit::init_form_validation!(ui, app);
    let weak = app.as_weak();
    app.on_expand(move |expanded| { if let Some(app) = weak.upgrade() { app.set_expanded(expanded); } });
    app.run()
}
Cargo.toml and build.rs

Cargo.toml

[package]
name = "slint-kit-collapse-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 title and expanded, then acknowledge expansion-requested(bool) in your state. Place the disclosure content in its children.

The body stays mounted during the height animation and is hidden when collapsed. theme.reduced-motion removes transition duration.

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
Disclosure block for arbitrary content retained in the visual tree.
Native screenshot of the same example, rendered with Skia.
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitCollapse, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitCollapse example";
    preferred-width: 480px;
    preferred-height: 250px;
    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: "Collapse"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitCollapse { theme: root.theme; title: "What happens after I publish?"; expanded: true; Text { text: "Your team receives a notification and can review the latest version."; color: root.theme.text-primary; font-size: 14px * root.theme.text-scale; wrap: word-wrap; } }
        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
control-size ControlSize in
title string in
expanded bool in
disabled bool in

Types and variants

Type Declaration
enum ControlSize compact, medium, comfortable

Callbacks

Functions

See also