MudBlazor选择元素的隐藏功能无效。

huangapple go评论85阅读模式
英文:

Mudblazor Select Element hidden is not working

问题

我一直在尝试在某些情况下隐藏一个 MudSelect 元素。
然而,看起来即使参数是有效的,MudSelect 也无法被隐藏。

英文:

I've been trying to hide a MudSelect element under some circonstances.
However it looks like a MudSelect can't be hidden even if the parameter is valide.

@page "/"
    
   <MudSelect T="string" hidden="@IsShow">
      <MudSelectItem T="string">A<MudSelectItem>
      <MudSelectItem T="string">B<MudSelectItem>
   </MudSelect>
    
   <button @onclick="@Show">Show/Hide</button>
  
 @code {
       private bool IsShow   {get;set;} = false;
       private void Show()
       {
           IsShow =   !IsShow;
       }      
 } 

答案1

得分: 1

你可以选择以下方式之一:

  1. 使用 visibility CSS 实用类。
  2. 使用 Disabled 属性 来禁用/启用组件。
<MudSelect Disabled="_disabled" Class="@(_visible ? "visible" : "invisible")" T="string">
    <MudSelectItem T="string" Value="@("Cappuccino")" />
    <MudSelectItem T="string" Value="@("Cafe Latte")" />
    <MudSelectItem T="string" Value="@("Espresso")" />
</MudSelect>

<MudButton OnClick="HandleVisibilityClick">Visible/Invisible</MudButton>
<MudButton OnClick="HandleDisableClick">Disable/Enable</MudButton>
@code {
    bool _disabled = false;
    bool _visible = true;
    void HandleVisibilityClick()
    {
        _visible = !_visible;
    }
    void HandleDisableClick()
    {
        _disabled = !_disabled;
    }
}

MudBlazor Snippet

英文:

You can either:-

  1. Use the visibility CSS utility class.
  2. Disable/Enable the component using the Disabled property.
&lt;MudSelect Disabled=&quot;_disabled&quot; Class=&quot;@(_visible?&quot;visible&quot;:&quot;invisible&quot;)&quot; T=&quot;string&quot;&gt;
    &lt;MudSelectItem T=&quot;string&quot; Value=&quot;@(&quot;Cappuccino&quot;)&quot; /&gt;
    &lt;MudSelectItem T=&quot;string&quot; Value=&quot;@(&quot;Cafe Latte&quot;)&quot; /&gt;
    &lt;MudSelectItem T=&quot;string&quot; Value=&quot;@(&quot;Espresso&quot;)&quot; /&gt;
&lt;/MudSelect&gt;

&lt;MudButton OnClick=&quot;HandleVisibilityClick&quot;&gt;Visible/Invisible&lt;/MudButton&gt;
&lt;MudButton OnClick=&quot;HandleDisableClick&quot;&gt;Disable/Enable&lt;/MudButton&gt;
@code {
    bool _disabled = false;
    bool _visible = true;
    void HandleVisibilityClick()
    {
        _visible = !_visible;
    }
    void HandleDisableClick()
    {
        _disabled=!_disabled;
    }
}

MudBlazor Snippet

答案2

得分: 0

看起来 mudblazor 元素存在 bug。或者这可能是一个特性。

无论哪种情况,您可以通过将它放入一个 div 中并隐藏 div 本身来隐藏该元素。

英文:

Looks like the mudblazor element is bugged. Or this might be a feature.

In eather case, you can hide the element by putting it in a div and hidding the div itself.

@page &quot;/&quot;
&lt;div hidden=&quot;@IsShow&quot;&gt;
   &lt;MudSelect T=&quot;string&quot;&gt;
      &lt;MudSelectItem T=&quot;string&quot;&gt;A&lt;MudSelectItem&gt;
      &lt;MudSelectItem T=&quot;string&quot;&gt;B&lt;MudSelectItem&gt;
   &lt;/MudSelect&gt;
&lt;/div&gt;
   &lt;button @onclick=&quot;@Show&quot;&gt;Show/Hide&lt;/button&gt;
  
 @code {
       private bool IsShow   {get;set;} = false;
       private void Show()
       {
           IsShow =   !IsShow;
       }      
 } 

huangapple
  • 本文由 发表于 2023年7月3日 15:31:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76602685.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定