如何在mudblazor c#中的mudsimpletable中使弹出窗口显示在屏幕中央

Question

我正在使用 mudsimpletable，每行都有一个单击按钮，我想打开一个弹出窗口，但不是在按钮附近打开，而是在最顶部打开。如何纠正这个问题。

这是我的示例代码。

 <MudSimpleTable Style="overflow-x: auto;">
 <thead>
 <tr>
 @foreach (var h in headings)
 {
 <th>@h</th>
 }
 </tr>
 </thead>
 <tbody>
 @foreach (var row in rows)
 {       
  <tr>
  @foreach (var x in row.Split())
  {
  <td>@x
  <MudIconButton  OnClick="()=>ToggleOpen(x)" Icon="@Icons.Material.Filled.Fullscreen" Color="@Color.Primary" ToggledIcon="@Icons.Material.Filled.FullscreenExit" ToggledColor="@Color.Secondary" />
  </td>
  }
  </tr>
  }
 </tbody>
 </MudSimpleTable>
 <MudPopover Open="@_isOpen" Fixed="true" Class="px-4 pt-4" >
 <div class="d-flex flex-column">
 <MudText>@canonicalvalue</MudText>
 <MudButton OnClick="ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Close</MudButton>
 </div>
 </MudPopover> 

这是代码片段：

https://try.mudblazor.com/snippet/GOmoaxYrGrhWiLKQ

我不知道如何使每个弹出窗口显示在被单击的按钮附近。是否有任何内置的方法或解决方法。 谢谢！！！

Answer 1

MudPopOver

具有对齐模式位置及其内部文本对齐方式的选项。您可以在

AnchorOrigin

选项中使用

TransformOrigin

和

MudPopOver

属性来实现您的要求：

<MudPopover Open="@_isOpen" Fixed="true" Class="px-4 pt-4" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.TopCenter" >

您可以在 docs

中参考有关这些选项的更多信息