Structure des formulaires

Message d’erreur pour Slint

KitFieldError · Slint Kit 0.3.1

Message d’erreur visuel avec annonce accessible polie.

Composant de composition · option commune error

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.

Lancez l’application : l’état invalide fourni et son message sont affichés ensemble.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitField, KitFieldError, KitTextField, KitTheme, KitThemes, ValidationPresentation } from "@kit/kit.slint";

export component App inherits Window {
    title: "KitFieldError example";
    preferred-width: 420px;
    preferred-height: 220px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in-out property <string> draft-0: "alex@";
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Field Error"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitField {
            KitTextField { theme: root.theme; label: "Email"; text <=> root.draft-0; validation: ValidationPresentation.invalid; } KitFieldError { theme: root.theme; text: "Enter a complete email address."; }
        }
    }
}

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()
}

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

Placez-le près du champ concerné et fournissez un message décrivant comment corriger la valeur. Pilotez sa présence depuis le résultat de validation du contrôleur.

Il hérite de KitFieldDescription et utilise la couleur danger. Sa région dynamique est polite ; l’annonce effective dépend du backend et des technologies d’assistance.

Voir le code source ↗

Option commune error

La démonstration utilise la brique KitFieldError séparément. Les contrôles ci-dessous exposent directement une propriété error : utilisez-la pour leur comportement intégré. Le rendu et les détails de focus dépendent du contrôle choisi.

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 { KitFieldError, KitTextField, KitTheme, KitThemes, ValidationPresentation } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitFieldError — exemple";
    preferred-width: 420px;
    preferred-height: 220px;
    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: "Erreur de champ"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitTextField { character-count-label: "caractères"; checking-label: "Vérification…"; clear-label: "Effacer la recherche"; hide-label: "Masquer le mot de passe"; reveal-label: "Afficher le mot de passe"; theme: root.theme; label: "Courriel"; text: "alex@"; validation: ValidationPresentation.invalid; } KitFieldError { theme: root.theme; text: "Saisissez une adresse courriel complète."; }
        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 KitFieldDescription.

Voir aussi

• Champ composé
• Résumé des erreurs