Comment implémenter le survol de ligne dans Blazor wasm
P粉425119739
P粉425119739 2023-08-13 16:53:14
0
1
510
<p>J'ai un composant de table Blazor qui change en fonction du nombre de lignes variables dans une collection : </p> <pre class="brush:php;toolbar:false;"><table id="MaTable" class="table table-hover"> <tête> <tr> <th>Nom du projet</th> <th>Description</th> <th>Uploader</th> <th>Date de téléchargement</th> ≪/tr> ≪/tête> @foreach (élément var dans les éléments) { <corps> <tr> <th>@item.Name</th> <th>@item.Description</th> <th>@item.UserName</th> <th>@item.UploadDate.ToString("jj-MM-aaaa")</th> <th><button type="button" class="btn btn-primary" @onclick="() => DoSomething()">Faire du travail</button></th> ≪/tr> </tcorps> } </table></pré> <p>Ce que je dois faire est que, lorsque la souris survole une ligne,<em>seulement</em> cet élément spécifique de cette ligne devient activé. </p> <p>Par exemple, si ce tableau comporte 10 lignes (1-10), lorsque je survole la ligne 1, seul le bouton de la ligne 1 doit être visible et cliquable. Les autres boutons dont la ligne parent n'a pas de survol ne doivent pas être activés. </p> <p>Dans Blazor, comment puis-je activer uniquement les boutons <em> sur cette ligne spécifique</em> lorsque je survole une ligne ? </p>
P粉425119739
P粉425119739

répondre à tous(1)
P粉252116587

Comme mentionné dans les commentaires, il existe certaines raisons pour lesquelles vous ne souhaitez peut-être pas afficher les éléments enfants au survol de la souris : cela dépend de l'utilisation de la souris par l'utilisateur. Alternativement, la ligne entière peut être rendue cliquable, ce qui peut offrir une meilleure expérience utilisateur.

Par souci d'exhaustivité, voici comment résoudre le problème que j'ai posé :

Dans les pages Razor, ajoutez des sélecteurs d'identifiant CSS pour les balises HTML de ligne (parent) et de bouton (enfant) :

@foreach (var item in Items)
    {
        <tbody>
            <tr id="FileTableRow">
                <th>@item.Name</th>
                <th>@item.Description</th>
                <th>@item.UserName</th>
                <th>@item.UploadDate.ToString("dd-MM-yyyy")</th>
                <th><button id="FileTableRowButton" type="button" class="btn btn-primary" @onclick="() => DoSomething()">Do Work</button></th>
            </tr>
        </tbody>
    }

Nous pouvons ensuite utiliser CSS pour appliquer des styles au bouton (enfant) au survol de la ligne (parent) :

#FileTableRowButton {
  visibility: hidden;
}

#FileTableRow {
  &:hover {
    #FileTableRowButton {
      visibility: visible;
    }
  }
}

En fonction de votre cas d'utilisation, vous souhaiterez peut-être appliquer différents styles. Par exemple, utilisez display: none; au lieu de visibility: Hidden;

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal