如何将一个图标放在MudNavLink中，以便它能正确显示在链接的末尾？

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

How can I put an icon in a MudNavLink that will show up correctly at the end of the link?

问题

<MudNavMenu>
<MudNavLink Href="#" Icon="@Icons.Material.Filled.OpenInNew">正确放置在左侧</MudNavLink>
<MudNavLink Href="#"><MudIcon Icon="@Icons.Material.Filled.OpenInNew" /> 错误放置在左侧</MudNavLink>
<MudNavLink Href="#">正确放置在右侧 <MudIcon Icon="@Icons.Material.Filled.OpenInNew" /></MudNavLink>
</MudNavMenu>

英文:

How can I put an icon in a MudNavLink that will show up correctly at the end of the link? It looks like the API currently only supports icons at the front, and manually adding a MudIcon does not style correctly.

如何将一个图标放在MudNavLink中，以便它能正确显示在链接的末尾？

&lt;MudNavMenu&gt;
    &lt;MudNavLink Href=&quot;#&quot; Icon=&quot;@Icons.Material.Filled.OpenInNew&quot;&gt;Correct placement on left&lt;/MudNavLink&gt;
    &lt;MudNavLink Href=&quot;#&quot;&gt;&lt;MudIcon Icon=&quot;@Icons.Material.Filled.OpenInNew&quot; /&gt; Incorrect placement on left&lt;/MudNavLink&gt;
    &lt;MudNavLink Href=&quot;#&quot;&gt;Correct placement on right &lt;MudIcon Icon=&quot;@Icons.Material.Filled.OpenInNew&quot; /&gt;&lt;/MudNavLink&gt;
&lt;/MudNavMenu&gt;

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

答案1

得分: 2

您可以使用CSS实用工具。

&lt;MudNavLink Href=&quot;#&quot;&gt;absolute
  &lt;MudIcon Class=&quot;absolute&quot; Icon=&quot;@Icons.Material.Filled.OpenInNew&quot; /&gt;
&lt;/MudNavLink&gt;

片段

英文:

You can use the CSS utilities that are available.

&lt;MudNavLink Href=&quot;#&quot;&gt;absolute
  &lt;MudIcon Class=&quot;absolute&quot; Icon=&quot;@Icons.Material.Filled.OpenInNew&quot; /&gt;
&lt;/MudNavLink&gt;

Snippet

答案2

得分: 0

I could not get a NavLink to work either, might be possible with some css hacks but I didnt bother. Certainly not ideal but you could use a Button:

<MudButton Variant="Variant.Text" EndIcon="@Icons.Material.Filled.OpenInNew" Color="Color.Default" Style="text-transform: none;">正确放置在右侧</MudButton>

英文:

I could not get a NavLink to work either, might be possible with some css hacks but I didnt bother. Certainly not ideal but you could use a Button:

&lt;MudButton Variant=&quot;Variant.Text&quot; EndIcon=&quot;@Icons.Material.Filled.OpenInNew&quot; Color=&quot;Color.Default&quot; Style=&quot;text-transform: none;&quot;&gt;Correct placement on right&lt;/MudButton&gt;

答案3

得分: 0

<MudNavLink Href="@($"/AdaPPM/Reports/OrganizationReports")">
<div @onclick="@((e) => UiGlobal.CloseNavMenu())" class="ml-n3 pr-4">
<MudIcon Icon="@Icons.Material.Outlined.Article" Class="mr-3" Style="margin-bottom: -6px;"></MudIcon>这里的文本
</div>
</MudNavLink>

英文:

A desperate way is to take fully control of the content in NavLink. Like this:

    &lt;MudNavLink Href=&quot;@($&quot;/AdaPPM/Reports/OrganizationReports&quot;)&quot;&gt;
        &lt;div @onclick=&quot;@((e) =&gt; UiGlobal.CloseNavMenu())&quot; class=&quot;ml-n3 pr-4&quot;&gt;
            &lt;MudIcon Icon=&quot;@Icons.Material.Outlined.Article&quot; Class=&quot;mr-3&quot; Style=&quot;margin-bottom: -6px;&quot;&gt;&lt;/MudIcon&gt;Text here
        &lt;/div&gt;
    &lt;/MudNavLink&gt;

It works like a normal nav link plus you can do anything else if you want.

huangapple
  • 本文由 发表于 2023年5月23日 00:41:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/76308314.html
  • blazor
  • mudblazor
匿名

发表评论

匿名网友

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

确定