LgToggle

LgToggle est un interrupteur lié à une valeur booléenne. Il affiche un texte différent pour chaque état (TextOn / TextOff) et un libellé optionnel à gauche ou à droite du bouton.

<LgToggle Text="#Notifications" @bind-Value="_model.NotificationsEnabled" />

Espace de noms : Lagoon.UI.Components
Hérite de : LgInputBase<bool> → LgAriaComponentBase → LgComponentBase
Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Interrupteur simple

Text est le libellé affiché à côté de l'interrupteur ; TextPosition le place à gauche (par défaut) ou à droite.

SettingsPage.razor
<LgToggle Text="#Notifications"
          TextPosition="ToggleTextPosition.Right"
          @bind-Value="_model.NotificationsEnabled" />

SettingsPage.razor.cs
public partial class SettingsPage : LgPage
{
    private readonly SettingsVm _model = new();

    private sealed class SettingsVm
    {
        public bool NotificationsEnabled { get; set; }
    }
}

Textes des états

TextOn et TextOff sont affichés dans l'interrupteur selon l'état. En mode lecture seule (ReadOnly), c'est le texte de l'état courant qui est rendu.

PublicationPage.razor
<LgToggle Text="#Visibility"
          TextOn="#Published"
          TextOff="#DraftState"
          @bind-Value="_model.IsPublished" />

PublicationPage.razor.cs
public partial class PublicationPage : LgPage
{
    private readonly PublicationVm _model = new();

    private sealed class PublicationVm
    {
        public bool IsPublished { get; set; }
    }
}

Annuler ou confirmer le basculement

OnChangingAsync est appelé avant le changement et permet de l'annuler (args.Cancel) ; args.Item restitue l'objet passé au paramètre Item, pratique quand l'interrupteur est répété dans une liste. ConfirmationMessage (hérité) affiche une demande de confirmation avant le basculement.

UserListPage.razor
@foreach (UserVm user in _users)
{
    <LgToggle Text="@user.Name"
              Item="user"
              ConfirmationMessage="#ConfirmToggleUser"
              OnChangingAsync="OnActiveChangingAsync"
              @bind-Value="user.IsActive" />
}

UserListPage.razor.cs
public partial class UserListPage : LgPage
{
    // Utilisateurs affichés : chaque interrupteur porte son utilisateur via Item.
    private readonly List<UserVm> _users = new();

    // Appelé avant le basculement : interdit de désactiver le dernier administrateur.
    private Task OnActiveChangingAsync(ChangingItemEventArgs<bool> args)
    {
        if (args.Item is UserVm user && user.IsLastAdmin && !args.NewValue)
        {
            args.Cancel = true;
            ShowWarning("#CannotDisableLastAdmin");
        }
        return Task.CompletedTask;
    }

    private sealed class UserVm
    {
        public string Name { get; set; }
        public bool IsActive { get; set; }
        public bool IsLastAdmin { get; set; }
    }
}

Propriétés

Toutes les propriétés [Parameter] du composant, y compris celles héritées.

Nom	Type	Défaut	Déclaré dans	Description
`Item`	`object`	`null`	`LgToggle`	Donnée associée au contrôle, restituée dans `ChangingItemEventArgs.Item`.
`OnChangingAsync`	`Func<ChangingItemEventArgs<bool>, Task>`	`null`	`LgToggle`	Callback appelé avant le changement de valeur ; le changement peut y être annulé.
`Text`	`string`	`null`	`LgToggle`	Libellé affiché à côté de l'interrupteur.
`TextOff`	`string`	`null`	`LgToggle`	Texte affiché dans l'interrupteur à l'état « off ».
`TextOn`	`string`	`null`	`LgToggle`	Texte affiché dans l'interrupteur à l'état « on ».
`TextPosition`	`ToggleTextPosition`	`Left`	`LgToggle`	Position du libellé `Text` par rapport à l'interrupteur.
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase`	Attributs HTML additionnels appliqués à l'élément rendu.
`AutoFocus`	`bool`	`false`	`LgInputBase`	Donne le focus au contrôle lors du premier rendu.
`ConfirmationMessage`	`string`	`null`	`LgInputBase`	Message de confirmation affiché avant d'appliquer le basculement.
`Container`	`IInputContainer<bool>`	`null`	`LgInputBase`	Usage interne : rattache une cellule de GridView au contrôle.
`CssClass`	`string`	`null`	`LgInputBase`	Classes CSS additionnelles.
`Disabled`	`bool`	`false`	`LgInputBase`	Désactive le contrôle.
`DisplayName`	`string`	`null`	`LgInputBase`	Nom du champ utilisé dans les messages d'erreur.
`HideValidationMessage`	`bool`	`false`	`LgInputBase`	Masque le message de validation sous le contrôle.
`Label`	`string`	`null`	`LgInputBase`	Libellé du champ (zone de libellé standard des champs de formulaire).
`LabelContent`	`RenderFragment`	`null`	`LgInputBase`	Contenu personnalisé de la zone de libellé.
`OnChange`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback appelé après le changement de valeur.
`OnReset`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback appelé quand le contrôle est réinitialisé.
`PolicyEdit`	`string`	`null`	`LgInputBase`	Policy requise pour modifier le contrôle.
`PolicyVisible`	`string`	`null`	`LgInputBase`	Policy requise pour afficher le contrôle.
`ReadOnly`	`bool`	`false`	`LgInputBase`	Affiche le texte de l'état courant en lecture seule.
`Required`	`bool?`	`null`	`LgInputBase`	Champ obligatoire. Si `null`, déduit de l'attribut `[Required]` de la propriété liée.
`ResetButton`	`bool?`	`null`	`LgInputBase`	Affiche le bouton d'effacement. Si `null`, la configuration de comportement de l'application s'applique.
`ResetText`	`string`	`null`	`LgInputBase`	Texte du bouton d'effacement.
`ResetTextAriaLabel`	`string`	`null`	`LgInputBase`	Libellé accessible (`aria-label`) du bouton d'effacement.
`Tooltip`	`string`	`null`	`LgInputBase`	Bulle d'aide (appliquée au libellé `Text`).
`TooltipIsHtml`	`bool`	`false`	`LgInputBase`	Indique si le contenu du `Tooltip` est au format HTML (sinon texte brut).
`Value`	`bool`	`false`	`LgInputBase`	Valeur liée (`@bind-Value`).
`ValueChanged`	`EventCallback<bool>`	—	`LgInputBase`	Callback de mise à jour de la valeur liée.
`ValueExpression`	`Expression<Func<bool>>`	—	`LgInputBase`	Expression identifiant la propriété liée.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-label`.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-labelledby`.

Paramètres en cascade

LgToggle consomme aussi des paramètres fournis automatiquement par des composants ancêtres (vous n'avez pas à les définir) : ParentAuthorizeView (LgAuthorizeView) et le contexte d'édition d'un LgEditForm parent.

Événements

Événement	Type	Description
`OnChangingAsync`	`Func<ChangingItemEventArgs<bool>, Task>`	Avant le basculement ; `args.Cancel = true` l'annule, `args.Item` restitue la donnée associée.
`OnChange`	`EventCallback<ChangeEventArgs>`	Après le basculement.
`OnReset`	`EventCallback<ChangeEventArgs>`	À la réinitialisation du contrôle.

Énumérations associées

`ToggleTextPosition`

Position du libellé Text par rapport à l'interrupteur.

Valeur	Description
`Left`	Libellé à gauche (valeur par défaut).
`Right`	Libellé à droite.

Bonnes pratiques / accessibilité

Utilisez LgToggle pour une action à effet immédiat (activer/désactiver) ; pour une case à cocher dans un formulaire soumis, préférez LgCheckBox.
Renseignez AriaLabel si aucun Text n'est fourni, afin de donner un libellé accessible à l'interrupteur.

Référence complète

Tous les paramètres (hérités compris) : Référence API — LgToggle.

Composants liés

LgCheckBox — case à cocher.
LgCheckBoxList — liste de cases à cocher.

Utilisation​

Démonstration​

Interrupteur simple​

Textes des états​

Annuler ou confirmer le basculement​

Propriétés​

Événements​

Énumérations associées​

ToggleTextPosition​

Bonnes pratiques / accessibilité​

Composants liés​