Composants
Trouvez un composant par usage, consultez sa capture et ses branchements. Pour un premier essai fonctionnel : bouton ou liste avec recherche.
Les champs prêts à l’emploi intègrent leurs options de libellé et de message. Les briques de formulaire permettent une composition personnalisée ; leurs exemples indiquent quels contrôles offrent déjà l’option correspondante.
Boutons et actions
Bouton
KitButtonBouton Slint avec libellé, état occupé et callback d’activation.Groupe de boutonsKitButtonGroupLigne de boutons apparentés avec un espacement uniforme.Bouton de formulaireKitFormButtonBouton qui transmet une intention de formulaire typée.Bouton à icôneKitIconButtonBouton carré présentant une icône pour une action compacte.Surface activableKitPressablePrimitive d’action qui centralise le pointeur, le clavier et le focus pour vos boutons personnalisés.Bouton de réinitialisationKitResetButtonBouton discret préconfiguré pour demander la réinitialisation d’un formulaire.Bouton d’envoiKitSubmitButtonBouton principal préconfiguré pour demander l’envoi d’un formulaire.
Structure des formulaires
Champ composé
KitFieldColonne élémentaire associant le libellé, l’éditeur et ses messages.Aide de champKitFieldDescriptionTexte d’aide secondaire destiné à un champ.Message d’erreurKitFieldErrorMessage d’erreur visuel avec annonce accessible polie.Groupe de champsKitFieldGroupColonne qui espace plusieurs champs de formulaire.Libellé de champKitFieldLabelBrique de composition pour relier le libellé d’un champ personnalisé au focus de son éditeur.Séparateur de champsKitFieldSeparatorTrait discret séparant des groupes dans un formulaire.Groupe avec légendeKitFieldSetGroupe de formulaire nommé par une légende visible et accessible.Résumé des erreursKitFormErrorSummaryListe d’erreurs permettant d’atteindre les champs concernés.Champ avec préfixe ou suffixeKitInputGroupSurface de saisie commune aux éditeurs et à leurs éléments adjacents.Suffixe de champKitInputGroupEndEmplacement horizontal pour les éléments placés après un éditeur.Préfixe de champKitInputGroupStartEmplacement horizontal pour les éléments placés avant un éditeur.Texte d’accompagnementKitInputGroupTextTexte secondaire aligné avec le contenu d’une saisie.
Saisie de texte
Champ courriel
KitEmailFieldChamp texte natif pour une adresse courriel.Champ avec masqueKitMaskedFieldChamp texte validé selon un masque défini côté application.Champ code à usage uniqueKitOtpFieldSaisie native d’un code à usage unique de longueur fixe.Champ mot de passeKitPasswordFieldSaisie native masquée pour un mot de passe.Champ de rechercheKitSearchFieldChamp texte natif pour une requête de recherche.Champ téléphoneKitTelephoneFieldChamp texte natif pour un numéro de téléphone.Zone de texteKitTextAreaSaisie native multiligne pour les notes et textes longs.Champ texteKitTextFieldSaisie native sur une ligne avec libellé et message de validation.Champ URLKitUrlFieldChamp texte natif pour une adresse web.
Nombres et montants
Champ décimal
KitDecimalFieldSaisie numérique reliée à DecimalValue en Rust.Champ duréeKitDurationFieldSaisie numérique reliée à DurationValue en Rust.Champ entierKitIntegerFieldSaisie numérique reliée à i64 en Rust.Champ monétaireKitMoneyFieldSaisie numérique reliée à Money avec CurrencyCode CAD en Rust.Compteur numériqueKitNumberStepperSaisie décimale avec demandes d’incrémentation et de décrémentation.Champ pourcentageKitPercentFieldSaisie numérique reliée à Percent en Rust.Champ quantitéKitQuantityFieldSaisie numérique reliée à Quantity avec Unit::Kilograms en Rust.
Sélection
Option
KitOptionLigne d’option personnalisable avec capture de l’identité au début de l’appui.Liste déroulanteKitSelectSélecteur à popup avec recherche, navigation clavier et options virtualisées.Clavier de sélectionKitSelectKeyboardTraducteur clavier partagé pour les sélecteurs et menus composés.Surface de sélectionKitSelectSurfaceSurface de popup combinant recherche native, clavier et visibilité de l’option active.Déclencheur de sélectionKitSelectTriggerDéclencheur personnalisable partageant les interactions du sélecteur.
Choix et valeurs
Case à cocher
KitCheckboxCase à cocher contrôlée avec un véritable état mixte.Étiquette amovibleKitChipÉtiquette compacte demandant le retrait d’un élément identifié.Liste avec rechercheKitComboboxCombobox Slint pour rechercher une option et choisir une valeur.Sélection multipleKitMultiSelectSélecteur multiple avec des étiquettes amovibles pour les valeurs retenues.Groupe de boutons radioKitRadioGroupGroupe de choix exclusifs avec une cible clavier commune.Curseur de plageKitRangeSliderCurseur à deux poignées pour une plage contrôlée.ÉvaluationKitRatingChoix d’une note avec action explicite d’effacement.Sélecteur segmentéKitSegmentedControlChoix exclusif compact présenté sous forme de segments.CurseurKitSliderCurseur continu projetant une valeur métier sur une position normalisée.InterrupteurKitSwitchInterrupteur contrôlé pour une préférence booléenne.Saisie d’étiquettesKitTagInputSaisie de nouvelles étiquettes avec liste de puces contrôlée.Groupe de boutons à basculeKitToggleGroupGroupe d’actions à sélection multiple contrôlée.
Dates
Calendrier
KitCalendarGrille mensuelle pour choisir une date civile.Champ dateKitDateFieldSaisie texte d’une valeur CivilDate.Sélecteur de dateKitDatePickerSaisie de date avec calendrier contextuel.Sélecteur de plage de datesKitDateRangePickerCalendrier pour sélectionner une date de début et une date de fin.Champ semaine ISOKitIsoWeekFieldSaisie texte d’une valeur IsoWeek.Champ moisKitMonthFieldSaisie texte d’une valeur YearMonth.Champ annéeKitYearFieldSaisie texte d’une valeur Year.
Heures et fuseaux
Champ date et heure
KitDateTimeFieldDeux brouillons texte validés comme une seule date et heure locale.Champ heureKitTimeFieldSaisie native d’une heure locale.Sélecteur d’heureKitTimePickerSaisie d’heure locale avec réglage des heures et minutes.Champ date, heure et fuseauKitZonedDateTimeFieldDate et heure locales résolues dans un fuseau IANA.
Fichiers
Sélecteur de dossier
KitDirectoryPickerActions Parcourir et Effacer pour un dossier sélectionné.Zone de dépôt de fichiersKitFileDropZoneCible de dépôt dont la disponibilité suit les capacités de l’application hôte.Liste de fichiersKitFileListLignes de fichiers avec nom, détail et action de retrait.Sélecteur de fichiersKitFilePickerAction Parcourir et liste des fichiers reliées à une boîte de dialogue native.
Couleurs
Mise en page
Cadre d’application
KitAppShellFond de fenêtre organisant les grandes régions d’une application.ConteneurKitContainerColonne centrée qui borne la largeur de lecture dans l’espace disponible.GrilleKitGridGrille utilisant directement les règles publiques de placement de Slint.Ligne de contenuKitInlineLigne unique pour des contrôles et contenus adjacents.Zone de défilementKitScrollAreaZone de défilement vertical pour une colonne de contenu.SectionKitSectionSection de contenu avec titre et description facultative.Colonne de contenuKitStackPile verticale avec espacement et inset nommés.SurfaceKitSurfaceSurface visuelle unique pour un contenu composé.Ligne adaptativeKitWrapDisposition qui redistribue ses enfants sur plusieurs lignes.
Présentation
Avatar
KitAvatarReprésentation d’une personne ou entité par image ou initiales.BadgeKitBadgeÉtiquette non interactive pour une catégorie, un compte ou un état.CarteKitCardSurface de carte pour regrouper une unité de contenu.Corps de carteKitCardBodyColonne de contenu principal à l’intérieur d’une carte.Pied de carteKitCardFooterLigne d’actions de carte pouvant se replier sur plusieurs lignes.En-tête de carteKitCardHeaderTitre et description d’une carte avec hiérarchie typographique.Bulle de conversationKitChatBubbleMessage de conversation avec auteur et métadonnées.SéparateurKitDividerSéparation horizontale avec un libellé facultatif au centre.État videKitEmptyStatePrésentation d’une collection vide avec explication et contenu d’action libre.Pied de pageKitFooterRégion de pied de page pour les informations secondaires d’une application.Bloc d’introductionKitHeroBloc d’introduction visuelle avec titre, description et contenu libre.Squelette de chargementKitSkeletonForme d’attente pour réserver la place d’un contenu en chargement.IndicateurKitStatIndicateur synthétique composé d’un libellé, d’une valeur et d’un contexte.ÉtapesKitStepsIndicateur d’étapes avec états explicites de progression.ChronologieKitTimelineChronologie verticale de titres, descriptions et métadonnées.
Retour et progression
Alerte
KitAlertMessage contextualisé de résultat, d’information ou d’erreur.Barre de progressionKitProgressBarre de progression déterminée exprimée par une fraction.Progression circulaireKitRadialProgressIndicateur circulaire de progression avec pourcentage central.Indicateur de chargementKitSpinnerIndicateur d’activité indéterminée avec libellé accessible.Notification toastKitToastNotification transitoire identifiable avec action et fermeture facultatives.Pile de notifications toastKitToastHostPile de notifications transitoires alimentée par une file détenue en Rust.InfobulleKitTooltipAide courte associée au survol et au focus d’un contrôle.Couche d’infobullesKitTooltipLayerCouche de fenêtre affichant l’infobulle de la cible ayant le focus.
Dialogues
Corps de dialogue
KitDialogBodyEmplacement vertical pour le contenu principal d’un dialogue.Actions de dialogueKitDialogFooterEmplacement de fin pour les actions d’un dialogue.En-tête de dialogueKitDialogHeaderEmplacement horizontal pour l’en-tête d’un dialogue.Panneau de dialogueKitDialogPanelSurface de contenu d’un dialogue nommée pour l’accessibilité.Surface modaleKitDialogSurfaceHôte modal qui gère le voile, les demandes de fermeture et le parcours du focus.
Données virtualisées
Liste de contenus
KitContentListListe Slint virtualisée avec titres, extraits et sélection.Tableau de donnéesKitDataTableTableau de données Slint avec lignes virtualisées, en-têtes de tri et sélection de ligne.Vue de texte virtualiséeKitVirtualTextViewVue de document Slint avec sélection et édition native d’une ligne.