Slint Kit Documentation

Présentation

En-tête de carte pour Slint

KitCardHeader · Slint Kit 0.3.1

Titre et description d’une carte avec hiérarchie typographique.

Titre et description d’une carte avec hiérarchie typographique.
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 { KitCardHeader, KitTheme, KitThemes } from "@kit/kit.slint";

export component App inherits Window {
    title: "KitCardHeader example";
    preferred-width: 420px;
    preferred-height: 180px;
    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: "Card Header"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitCardHeader { width: 372px; theme: root.theme; title: "Project settings"; description: "Manage your workspace and collaborators."; }
    }
}

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-card-header-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

Définissez title et, si utile, description, puis placez l’en-tête en premier dans KitCard. Fournissez le thème de la carte.

Le titre et la description reviennent à la ligne à la largeur disponible. Une description vide retire son bloc de texte.

Voir le code source ↗

Choisir entre une option intégrée et une composition personnalisée

Options partagées

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
Titre et description d’une carte avec hiérarchie typographique.
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 { KitCardHeader, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitCardHeader — exemple";
    preferred-width: 420px;
    preferred-height: 180px;
    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: "En-tête de carte"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitCardHeader { width: 372px; theme: root.theme; title: "Réglages du projet"; description: "Gérez votre espace de travail et vos collaborateurs."; }
        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
title string in
description string in

Voir aussi