Blazor 的NavLink
組件檢測鏈接是否指向當前頁面,并設定active
類。
aria-current="page"
當它是選單的一部分時,通常也設定屬性。
組件能以某種方式做到這一點嗎?或者我可以將它包裝在執行此操作的自定義組件中嗎?
我找不到可以輕松實作此目的的擴展點:
uj5u.com熱心網友回復:
這是我的解決方案。
AriaNavLink.razor
:
<NavLink class=@CssClass @attributes=Attributes>
@ChildContent
</NavLink>
@inherits NavLink
@code {
private const string _defaultActiveClass = "active";
private Dictionary<string, object>? _attributes;
private IReadOnlyDictionary<string, object> Attributes
{
get
{
if (_attributes != null) return _attributes;
_attributes = AdditionalAttributes != null
? new Dictionary<string, object>(AdditionalAttributes)
: new Dictionary<string, object>();
// the trick to inferring "active" indirectly:
var isActive = CssClass?.Split(' ', StringSplitOptions.TrimEntries).Contains(ActiveClass ?? _defaultActiveClass) ?? false;
if (isActive)
_attributes.Add("aria-current", "page");
return _attributes;
}
}
}
一些使用引導程式的頁面:
<li class="nav-item">
<AriaNavLink href="/foo" class="nav-link" foo="bar">
<i class="some-icon"></i>
Foo
</AriaNavLink>
</li>
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/528145.html
標籤:asp.net 核心西装外套blazor-webassembly怀阿里亚