LgSummaryBox

LgSummaryBox affiche un texte long sur une seule ligne (tronqué) et ouvre une fenêtre modale pour l'éditer, dans une zone de texte multiligne ou un éditeur HTML. La saisie n'est appliquée à la valeur liée qu'à la validation par le bouton « Enregistrer » de la modale.

<LgSummaryBox Label="#Comment" @bind-Value="_model.Comment" />

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

Le bouton d'effacement standard des champs (ResetButton) n'est jamais affiché : l'effacement passe par le bouton « Effacer » de la modale.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Édition en modale

Un clic sur le champ (ou la touche entrée quand il a le focus) ouvre la modale. ModalTitle remplace le Label comme titre et ModalSize fixe la taille de la fenêtre. Si l'utilisateur ferme la modale avec des modifications non enregistrées, une confirmation lui est demandée.

ReportPage.razor
<LgSummaryBox Label="#Summary"
              ModalTitle="#EditSummary"
              ModalSize="ModalSize.ExtraLarge"
              TextareaHeight="300"
              MaxLength="2000"
              @bind-Value="_model.Summary" />

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

    private sealed class ReportVm
    {
        public string Summary { get; set; }
    }
}

Ouverture au focus et affichage multiligne

OpenOnFocus ouvre la modale dès que le champ reçoit le focus (utile dans un parcours clavier). WrapContent affiche la valeur sur plusieurs lignes au lieu de la tronquer.

NotePage.razor
<LgSummaryBox Label="#Note"
              OpenOnFocus="true"
              WrapContent="true"
              OnOpen="OnNoteOpen"
              OnClose="OnNoteClose"
              @bind-Value="_model.Note" />

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

    // Déclenché à l'ouverture de la modale : utile pour tracer ou charger un contexte.
    private void OnNoteOpen()
    {
        ShowInformation("#NoteOpened");
    }

    // Déclenché à la fermeture de la modale (après validation ou abandon).
    private void OnNoteClose()
    {
        ShowInformation("#NoteClosed");
    }

    private sealed class NoteVm
    {
        public string Note { get; set; }
    }
}

Éditeur HTML

UseHtmlEditor="true" remplace la zone de texte par un éditeur HTML (LgHtmlEditor) ; la valeur liée contient alors du HTML, rendu tel quel dans le champ. HtmlEditorButtons restreint les boutons de la barre d'outils.

DescriptionPage.razor
<LgSummaryBox Label="#Description"
              UseHtmlEditor="true"
              HtmlEditorButtons="_editorButtons"
              @bind-Value="_model.DescriptionHtml" />

DescriptionPage.razor.cs
public partial class DescriptionPage : LgPage
{
    // Barre d'outils réduite : seuls les enrichissements autorisés sont proposés.
    private readonly List<string> _editorButtons = new() { "bold", "italic", "underline", "ul", "ol" };

    private readonly DescriptionVm _model = new();

    private sealed class DescriptionVm
    {
        public string DescriptionHtml { get; set; }
    }
}

Annuler un changement de valeur

OnChangingAsync est appelé à la validation de la modale, avant l'affectation de la nouvelle valeur, et permet de l'annuler (args.Cancel).

JustificationPage.razor
<LgSummaryBox Label="#Justification"
              OnChangingAsync="OnJustificationChangingAsync"
              @bind-Value="_model.Justification" />

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

    // Appelé avant l'affectation : impose un contenu minimal à l'enregistrement.
    private Task OnJustificationChangingAsync(ChangingEventArgs<string> args)
    {
        if (string.IsNullOrWhiteSpace(args.NewValue) || args.NewValue.Length < 20)
        {
            args.Cancel = true;
            ShowWarning("#JustificationTooShort");
        }
        return Task.CompletedTask;
    }

    private sealed class JustificationVm
    {
        public string Justification { 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
`HtmlEditorButtons`	`List<string>`	`null`	`LgSummaryBox`	Boutons de la barre d'outils de l'éditeur HTML. Si `null`, la barre complète est affichée.
`MaxLength`	`int?`	`null`	`LgSummaryBox`	Nombre maximal de caractères saisis.
`ModalSize`	`ModalSize`	`Large`	`LgSummaryBox`	Taille de la fenêtre modale d'édition.
`ModalTitle`	`string`	`null`	`LgSummaryBox`	Titre de la modale. Si `null`, le `Label` du champ est utilisé.
`OnChangingAsync`	`Func<ChangingEventArgs<string>, Task>`	`null`	`LgSummaryBox`	Callback appelé avant le changement de valeur ; le changement peut y être annulé.
`OnClose`	`EventCallback`	—	`LgSummaryBox`	Callback appelé à la fermeture de la modale.
`OnFocus`	`EventCallback<FocusEventArgs>`	—	`LgSummaryBox`	Callback appelé à la prise de focus.
`OnKeyUp`	`EventCallback<KeyboardEventArgs>`	—	`LgSummaryBox`	Callback appelé au relâchement d'une touche.
`OnOpen`	`EventCallback`	—	`LgSummaryBox`	Callback appelé à l'ouverture de la modale.
`OpenOnFocus`	`bool`	`false`	`LgSummaryBox`	Ouvre la modale dès que le champ reçoit le focus.
`Placeholder`	`string`	`null`	`LgSummaryBox`	Texte indicatif affiché quand le champ est vide.
`TextareaHeight`	`int`	`0`	`LgSummaryBox`	Hauteur de la zone de texte de la modale, en pixels.
`UseHtmlEditor`	`bool`	`false`	`LgSummaryBox`	Remplace la zone de texte par un éditeur HTML.
`WrapContent`	`bool`	`false`	`LgSummaryBox`	Affiche la valeur sur plusieurs lignes au lieu de la tronquer.
`Prefix`	`string`	`null`	`LgInputRenderBase`	Préfixe affiché dans le champ.
`PrefixType`	`InputLabelType`	`Text`	`LgInputRenderBase`	Nature du préfixe.
`Suffix`	`string`	`null`	`LgInputRenderBase`	Suffixe affiché dans le champ.
`SuffixType`	`InputLabelType`	`Text`	`LgInputRenderBase`	Nature du suffixe.
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase`	Attributs HTML additionnels appliqués à l'élément rendu.
`AutoFocus`	`bool`	`false`	`LgInputBase`	Donne le focus au champ lors du premier rendu.
`ConfirmationMessage`	`string`	`null`	`LgInputBase`	Message de confirmation affiché avant d'appliquer un changement de valeur.
`Container`	`IInputContainer<string>`	`null`	`LgInputBase`	Usage interne : rattache une cellule de GridView au champ.
`CssClass`	`string`	`null`	`LgInputBase`	Classes CSS additionnelles.
`Disabled`	`bool`	`false`	`LgInputBase`	Désactive le champ.
`DisplayName`	`string`	`null`	`LgInputBase`	Nom du champ utilisé dans les messages d'erreur.
`HideValidationMessage`	`bool`	`false`	`LgInputBase`	Masque le message de validation sous le champ.
`Label`	`string`	`null`	`LgInputBase`	Libellé du champ.
`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é à la réinitialisation (sans effet ici, le bouton d'effacement standard n'est pas affiché).
`PolicyEdit`	`string`	`null`	`LgInputBase`	Policy requise pour modifier le champ.
`PolicyVisible`	`string`	`null`	`LgInputBase`	Policy requise pour afficher le champ.
`ReadOnly`	`bool`	`false`	`LgInputBase`	Affiche la valeur en lecture seule (la modale reste consultable).
`Required`	`bool?`	`null`	`LgInputBase`	Champ obligatoire. Si `null`, déduit de l'attribut `[Required]` de la propriété liée.
`ResetButton`	`bool?`	`null`	`LgInputBase`	Sans effet : le bouton d'effacement standard n'est jamais affiché par ce composant.
`ResetText`	`string`	`null`	`LgInputBase`	Texte du bouton d'effacement (sans effet ici).
`ResetTextAriaLabel`	`string`	`null`	`LgInputBase`	Libellé accessible du bouton d'effacement (sans effet ici).
`Tooltip`	`string`	`null`	`LgInputBase`	Bulle d'aide.
`TooltipIsHtml`	`bool`	`false`	`LgInputBase`	Indique si le contenu du `Tooltip` est au format HTML (sinon texte brut).
`Value`	`string`	`null`	`LgInputBase`	Valeur liée (`@bind-Value`).
`ValueChanged`	`EventCallback<string>`	—	`LgInputBase`	Callback de mise à jour de la valeur liée.
`ValueExpression`	`Expression<Func<string>>`	—	`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

LgSummaryBox 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
`OnOpen`	`EventCallback`	À l'ouverture de la modale d'édition.
`OnClose`	`EventCallback`	À la fermeture de la modale d'édition.
`OnChangingAsync`	`Func<ChangingEventArgs<string>, Task>`	Avant l'affectation de la nouvelle valeur ; `args.Cancel = true` l'annule.
`OnChange`	`EventCallback<ChangeEventArgs>`	Après l'affectation de la nouvelle valeur.
`OnKeyUp`	`EventCallback<KeyboardEventArgs>`	Au relâchement d'une touche sur le champ.
`OnFocus`	`EventCallback<FocusEventArgs>`	À la prise de focus du champ.

Bonnes pratiques / accessibilité

Réservez UseHtmlEditor aux contenus réellement enrichis : la valeur liée contient alors du HTML qu'il faut assainir avant tout autre usage.
Pour un texte multiligne court, éditable en place, préférez LgTextBox avec TextMode="TextBoxMode.Multiline".

Référence complète

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

Composants liés

LgTextBox — saisie de texte (mode multiligne en place).
LgHtmlEditor — éditeur HTML utilisé par le mode UseHtmlEditor.
LgModal — fenêtre modale utilisée pour l'édition.
LgGridSummaryColumn — colonne « résumé » d'un LgGridView.

Utilisation​

Démonstration​

Édition en modale​

Ouverture au focus et affichage multiligne​

Éditeur HTML​

Annuler un changement de valeur​

Propriétés​

Événements​

Bonnes pratiques / accessibilité​

Composants liés​