Choix et valeurs

Étiquette amovible pour Slint

KitChip · Slint Kit 0.3.1

Étiquette compacte demandant le retrait d’un élément identifié.

Lancer l’aperçu

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.

Retirez la pastille Design, puis rétablissez-la avec Restore tag.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitChip, KitButton, KitTheme, KitThemes } from "@kit/kit.slint";
export component App inherits Window {
    title: "KitChip 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> showing: true;
    callback remove(int);
    callback reset();
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        alignment: start;
        if root.showing: control := KitChip { theme: root.theme; chip: { token: 11, label: "Design", removable: true }; remove-requested(token) => { root.remove(token); } }
        KitButton { theme: root.theme; text: "Restore tag"; activated => { root.reset(); } }
        result := Text { text: root.showing ? "Design selected" : "No tags selected"; color: root.theme.text-primary; }
    }

}

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_remove(move |token| { if token == 11 { if let Some(app) = weak.upgrade() { app.set_showing(false); } } });
    let weak = app.as_weak();
    app.on_reset(move || { if let Some(app) = weak.upgrade() { app.set_showing(true); } });
    app.run()
}

[package]
name = "slint-kit-chip-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]

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 chip: ChipRow et traitez remove-requested(token) dans le modèle propriétaire. Réglez chip.removable selon les droits de retrait.

Le token est capturé au début de l’appui et un changement de puce annule cet appui. Une puce non supprimable désactive l’action.

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

// Public label overrides localize this fixture; toolkit/host defaults keep their language.
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitChip, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitChip — 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: "Étiquette amovible"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitChip { theme: root.theme; chip: { token: 11, label: "Design", removable: true }; remove-requested(token) => { root.status = "Retirer l’identifiant " + token; } }
        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 KitButton.

Propriétés

Types et variantes

Signaux

• remove-requested(int)

Voir aussi

• Bouton