英文:
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.
<MudNavMenu>
<MudNavLink Href="#" Icon="@Icons.Material.Filled.OpenInNew">Correct placement on left</MudNavLink>
<MudNavLink Href="#"><MudIcon Icon="@Icons.Material.Filled.OpenInNew" /> Incorrect placement on left</MudNavLink>
<MudNavLink Href="#">Correct placement on right <MudIcon Icon="@Icons.Material.Filled.OpenInNew" /></MudNavLink>
</MudNavMenu>
答案1
得分: 2
您可以使用CSS实用工具。
<MudNavLink Href="#">absolute
<MudIcon Class="absolute" Icon="@Icons.Material.Filled.OpenInNew" />
</MudNavLink>
英文:
You can use the CSS utilities that are available.
<MudNavLink Href="#">absolute
<MudIcon Class="absolute" Icon="@Icons.Material.Filled.OpenInNew" />
</MudNavLink>
答案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
:
<MudButton Variant="Variant.Text" EndIcon="@Icons.Material.Filled.OpenInNew" Color="Color.Default" Style="text-transform: none;">Correct placement on right</MudButton>
答案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:
<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>Text here
</div>
</MudNavLink>
It works like a normal nav link plus you can do anything else if you want.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论