LgCard

LgCard affiche un bloc de contenu libre pouvant devenir cliquable, navigable ou commandable. La page couvre aussi LgCardSeparator, qui sépare visuellement deux zones, et LgCardStripe, qui ajoute une bande de couleur avec ou sans icône.

<LgCard>
    <div class="card-body">Contenu</div>
</LgCard>

Espace de noms : Lagoon.UI.Components
Hérite de : LgComponentBase
Package NuGet : Lagoon.UI

Structure visuelle

Le composant ne génère pas lui-même de bloc .card-body. Ajoutez vos propres conteneurs internes si vous voulez reprendre le rendu Bootstrap classique d'une carte.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Carte simple et structure du contenu

LgCard ne possède pas de paramètres Title, IconName ou HeaderContent. Placez toute la structure visuelle dans ChildContent, par exemple avec des zones .card-body si vous voulez reprendre le rendu Bootstrap d'une carte.

SimpleCustomerCardPage.razor
@inherits LgPage

<LgCard CssClass="customer-card"
        Tooltip="#CustomerCardTooltip">
    <div class="card-body">
        <LgTitle Text="#CustomerCardTitle" Level="2" />
        <p>@_customerName</p>
    </div>
</LgCard>

SimpleCustomerCardPage.razor.cs
public partial class SimpleCustomerCardPage : LgPage
{
    // Donnée métier affichée dans le corps libre de la carte.
    private string _customerName = "Contoso";
}

Bande de couleur, icône et séparateur

LgCardStripe se place directement dans la carte, en dehors des zones .card-body. LgCardSeparator sépare deux blocs de contenu.

CustomerStatusCardPage.razor
@inherits LgPage

<LgCard CssClass="customer-card"
        Active="@_isSelected"
        OnClick="OnSelectCardAsync"
        Tooltip="#OpenCustomerTooltip">
    <LgCardStripe Color="var(--bs-info)"
                IconName="@IconNames.All.InfoCircle"
                Tooltip="#PriorityCustomerTooltip" />
    <div class="card-body">
        <LgTitle Text="#CustomerCardTitle" Level="2" />
        <p>@_customerName</p>
    </div>
    <LgCardSeparator />
    <div class="card-body">
        <LgTitle Text="#LastOrderTitle" Level="2" />
        <p>@_lastOrderLabel</p>
    </div>
</LgCard>

CustomerStatusCardPage.razor.cs
public partial class CustomerStatusCardPage : LgPage
{
    // Pilote la classe active pour matérialiser la carte sélectionnée.
    private bool _isSelected = true;

    // Nom métier affiché dans le premier bloc de la carte.
    private string _customerName = "Contoso";

    // Dernière commande affichée dans le second bloc de la carte.
    private string _lastOrderLabel = "CMD-2024-0042";

    // Bascule l'état sélectionné à chaque clic sur la carte.
    private Task OnSelectCardAsync(ActionEventArgs args)
    {
        _isSelected = !_isSelected;
        return Task.CompletedTask;
    }
}

Pour naviguer, utilisez Link avec un LgPageLink typé ou Uri / Target pour une adresse directe. Pour déclencher une action parent, utilisez CommandName dans un conteneur qui écoute OnCommand.

CustomerNavigationCardsPage.razor
@inherits LgPage

<LgCard Link="@_customerLink"
        Tooltip="#OpenCustomerTooltip">
    <div class="card-body">
        <LgTitle Text="#OpenCustomerTitle" Level="2" />
        <p>@_customerName</p>
    </div>
</LgCard>

<LgCard Uri="/exports/customers"
        Target="_blank"
        StopPropagation="true"
        CssClass="mt-3"
        Tooltip="#OpenExportTooltip">
    <div class="card-body">
        <LgTitle Text="#OpenExportTitle" Level="2" />
    </div>
</LgCard>

<LgFrame Title="#CustomerActionsTitle"
         OnCommand="OnCardCommandAsync"
         CssClass="mt-3">
    <LgCard CommandName="archive-customer"
            CommandArgument="@_customerId">
        <div class="card-body">
            <LgTitle Text="#ArchiveCustomerTitle" Level="2" />
        </div>
    </LgCard>
</LgFrame>

CustomerNavigationCardsPage.razor.cs
public partial class CustomerNavigationCardsPage : LgPage
{
    // Identifiant passé en argument de commande pour agir sur la bonne fiche.
    private int _customerId = 42;

    // Nom affiché dans la carte de navigation.
    private string _customerName = "Contoso";

    // Lien typé Lagoon : préférez-le aux routes écrites en dur quand la page expose une factory.
    private LgPageLink _customerLink = LgPageLink.Create("customers/42", "#CustomerDetailsTitle", IconNames.All.People);

    // Reçoit la commande de la carte et évite sa propagation après traitement.
    private Task OnCardCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "archive-customer")
        {
            _customerId = (int)args.CommandArgument;
            args.Handled = true;
        }

        return Task.CompletedTask;
    }
}

Points d'attention

OnClick reçoit un ActionEventArgs, pas un MouseEventArgs.
Un clic dans un champ (input, textarea, select, option) placé dans la carte ne déclenche pas l'action de la carte et ne remonte pas aux gestionnaires @onclick Blazor : on peut saisir dans une carte cliquable. Un bouton placé dans la carte déclenche en revanche l'action de la carte, sauf s'il arrête la propagation du clic (c'est le cas par défaut de LgButton, StopPropagation="true").
ConfirmationMessage ne doit pas être combiné avec CommandName pour une même carte ; utilisez l'un ou l'autre selon le scénario.
LgCardStripe.Color accepte une couleur CSS (#B60022, var(--bs-info), etc.) ; si elle est omise, le style du thème s'applique.
LgCardStripe accepte un contenu enfant (ChildContent), rendu dans la bande : c'est ce qu'utilise le StripeContent de la carte par défaut de LgListView.
Le paramètre historique Exit n'existe plus sur LgCard.

Propriétés

Propriétés de `LgCard`

Nom	Type	Défaut	Déclaré dans	Description
`Active`	`bool`	`false`	`LgCard`	Ajoute la classe CSS `active` à la carte, qui la met en évidence qu'elle soit survolée ou non : fond teinté de la couleur d'accent du thème, contour fin de la même couleur (sans changer la taille de la carte) et textes en gras. Variables SCSS : `$card-active-color`, `$card-active-tint`.
`ChildContent`	`RenderFragment`	`null`	`LgCard`	Contenu libre rendu dans la carte.
`CommandArgument`	`object`	`null`	`LgCard`	Argument de la commande bubbled lorsque `CommandName` est utilisé.
`CommandName`	`string`	`null`	`LgCard`	Nom de la commande bubbled au parent `ICommandListener`.
`ConfirmationMessage`	`string`	`null`	`LgCard`	Message de confirmation affiché avant l'action. Incompatible avec `CommandName`.
`CssClass`	`string`	`null`	`LgCard`	Classes CSS additionnelles appliquées à la carte.
`Link`	`LgPageLink`	`null`	`LgCard`	Lien typé Lagoon vers une page.
`OnClick`	`EventCallback<ActionEventArgs>`	—	`LgCard`	Callback déclenché au clic sur la carte.
`StopPropagation`	`bool`	`false`	`LgCard`	Stoppe la propagation du clic (`@onclick:stopPropagation`).
`Target`	`string`	`null`	`LgCard`	Fenêtre cible utilisée avec `Uri`.
`Tooltip`	`string`	`null`	`LgCard`	Infobulle de la carte.
`TooltipIsHtml`	`bool`	`false`	`LgCard`	Indique si le contenu du tooltip est interprété comme HTML.
`Uri`	`string`	`null`	`LgCard`	URI ou route ouverte au clic.

Propriétés de `LgCardSeparator`

Nom	Type	Défaut	Déclaré dans	Description
`CssClass`	`string`	`null`	`LgCardSeparator`	Classes CSS additionnelles pour le séparateur vertical.

Propriétés de `LgCardStripe`

Nom	Type	Défaut	Déclaré dans	Description
`ChildContent`	`RenderFragment`	`null`	`LgCardStripe`	Contenu rendu dans la bande (après l'icône éventuelle) ; la bande bascule sur la variante `card-stripe-icon` et prend la largeur de son contenu (au minimum celle de la variante avec icône).
`CssClass`	`string`	`null`	`LgCardStripe`	Classes CSS additionnelles pour la bande de couleur.
`Color`	`string`	`null`	`LgCardStripe`	Couleur CSS appliquée à la bande (par exemple `#ff0000` ou `var(--bs-danger)`).
`IconName`	`string`	`null`	`LgCardStripe`	Icône superposée à la bande ; fait basculer le rendu sur la variante `card-stripe-icon`.
`Tooltip`	`string`	`null`	`LgCardStripe`	Infobulle affichée au survol de la bande.
`TooltipIsHtml`	`bool`	`false`	`LgCardStripe`	Indique si le tooltip de la bande est interprété comme HTML.

Événements

LgCardSeparator et LgCardStripe n'exposent pas d'événement public.

Événement	Type	Description
`OnClick`	`EventCallback<ActionEventArgs>`	Déclenché lorsque l'utilisateur clique sur la carte. L'argument est un `ActionEventArgs`, pas un `MouseEventArgs`.

Composants liés

LgFrame — conteneur fréquent pour regrouper des cartes dans une section.
LgButton — alternative lorsqu'une action doit être matérialisée par un vrai bouton plutôt qu'une carte cliquable.
LgNavLink — composant de navigation lorsqu'un simple lien suffit.

Utilisation​

Démonstration​

Carte simple et structure du contenu​

Bande de couleur, icône et séparateur​

Carte de navigation ou carte commandable​

Points d'attention​

Propriétés​

Propriétés de LgCard​

Propriétés de LgCardSeparator​

Propriétés de LgCardStripe​

Événements​

Composants liés​