Enterprise-level component library based on Bootstrap and BlazorNav
A menu that provides navigation for your site.
Basic navigation style.
In this example, by setting the Items property, the navigation component is assigned through the program api and the NavLink component is written directly to the ChildContext of the navigation component
Demo
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
<Nav Items="@Items">
<a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
<NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
<a class="nav-link" href="#" @onclick:preventDefault>Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
</Nav>
@code {
private IEnumerable<NavLink> Items => GetItems();
private IEnumerable<NavLink> GetItems()
{
var ret = new List<NavLink>();
var link = new NavLink();
var parameters = new Dictionary<string, object?>()
{
["href"] = WebsiteOption.CurrentValue.AdminUrl,
["class"] = "nav-link nav-item",
["target"] = "_blank",
["ChildContent"] = new RenderFragment(builder =>
{
builder.AddContent(0, "BootstrapAdmin");
})
};
link.SetParametersAsync(ParameterView.FromDictionary(parameters));
ret.Add(link);
return ret;
}
}
Align
Control component alignment by setting the property of Signment
Demo
Split the line
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Navs> Localizer
<Nav Items="@Items" Alignment="Alignment.Center">
<a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
<NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
<a class="nav-link" href="#" @onclick:preventDefault>Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
</Nav>
<Divider Text="@Localizer["NavsDivider"]" />
<Nav Items="@Items" Alignment="Alignment.Right">
<a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
<NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
<a class="nav-link" href="#" @onclick:preventDefault>Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
</Nav>
@code {
private IEnumerable<NavLink> Items => GetItems();
private IEnumerable<NavLink> GetItems()
{
var ret = new List<NavLink>();
var link = new NavLink();
var parameters = new Dictionary<string, object?>()
{
["href"] = WebsiteOption.CurrentValue.AdminUrl,
["class"] = "nav-link nav-item",
["target"] = "_blank",
["ChildContent"] = new RenderFragment(builder =>
{
builder.AddContent(0, "BootstrapAdmin");
})
};
link.SetParametersAsync(ParameterView.FromDictionary(parameters));
ret.Add(link);
return ret;
}
}
Vertical
In this example, you control whether the navigation is vertically distributed by setting the IsVertical property
Demo
Split the line
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Navs> Localizer
<Nav Items="@Items" IsVertical="true">
<a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
<NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
<a class="nav-link" href="#" @onclick:preventDefault>Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
</Nav>
<Divider Text="@Localizer["NavsDivider"]" />
<Nav Items="@Items" IsVertical="true" Alignment="Alignment.Right">
<a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
<NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
<a class="nav-link" href="#" @onclick:preventDefault>Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
</Nav>
@code {
private IEnumerable<NavLink> Items => GetItems();
private IEnumerable<NavLink> GetItems()
{
var ret = new List<NavLink>();
var link = new NavLink();
var parameters = new Dictionary<string, object?>()
{
["href"] = WebsiteOption.CurrentValue.AdminUrl,
["class"] = "nav-link nav-item",
["target"] = "_blank",
["ChildContent"] = new RenderFragment(builder =>
{
builder.AddContent(0, "BootstrapAdmin");
})
};
link.SetParametersAsync(ParameterView.FromDictionary(parameters));
ret.Add(link);
return ret;
}
}
Capsule
Control the background color of the navigation menu by setting the IsPills property
Demo
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
<Nav Items="@Items" IsPills="true">
<a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
<NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
<a class="nav-link" href="#" @onclick:preventDefault>Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
</Nav>
@code {
private IEnumerable<NavLink> Items => GetItems();
private IEnumerable<NavLink> GetItems()
{
var ret = new List<NavLink>();
var link = new NavLink();
var parameters = new Dictionary<string, object?>()
{
["href"] = WebsiteOption.CurrentValue.AdminUrl,
["class"] = "nav-link nav-item",
["target"] = "_blank",
["ChildContent"] = new RenderFragment(builder =>
{
builder.AddContent(0, "BootstrapAdmin");
})
};
link.SetParametersAsync(ParameterView.FromDictionary(parameters));
ret.Add(link);
return ret;
}
}
Fill and align
By setting the IsFill properties controls that the navigation menu is evenly distributed to fill the entire navigation bar
Demo
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
<Nav Items="@Items" IsPills="true" IsFill="true">
<a class="nav-link nav-item active" href="#" @onclick:preventDefault>Active</a>
<NavLink class="nav-link nav-item" href="#" @onclick:preventDefault>Link</NavLink>
<a class="nav-link nav-item" href="#" @onclick:preventDefault>Link</a>
<a class="nav-link nav-item disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
</Nav>
@code {
private IEnumerable<NavLink> Items => GetItems();
private IEnumerable<NavLink> GetItems()
{
var ret = new List<NavLink>();
var link = new NavLink();
var parameters = new Dictionary<string, object?>()
{
["href"] = WebsiteOption.CurrentValue.AdminUrl,
["class"] = "nav-link nav-item",
["target"] = "_blank",
["ChildContent"] = new RenderFragment(builder =>
{
builder.AddContent(0, "BootstrapAdmin");
})
};
link.SetParametersAsync(ParameterView.FromDictionary(parameters));
ret.Add(link);
return ret;
}
}
Equal width
By setting the IsIze property so that each navigation item will have the same width.
Demo
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
<Nav Items="@Items" IsPills="true" IsFill="true" IsJustified="true">
<a class="nav-link nav-item active" href="#" @onclick:preventDefault>Active</a>
<NavLink class="nav-link nav-item" href="#" @onclick:preventDefault>Link</NavLink>
<a class="nav-link nav-item" href="#" @onclick:preventDefault>Link</a>
<a class="nav-link nav-item disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
</Nav>
@code {
private IEnumerable<NavLink> Items => GetItems();
private IEnumerable<NavLink> GetItems()
{
var ret = new List<NavLink>();
var link = new NavLink();
var parameters = new Dictionary<string, object?>()
{
["href"] = WebsiteOption.CurrentValue.AdminUrl,
["class"] = "nav-link nav-item",
["target"] = "_blank",
["ChildContent"] = new RenderFragment(builder =>
{
builder.AddContent(0, "BootstrapAdmin");
})
};
link.SetParametersAsync(ParameterView.FromDictionary(parameters));
ret.Add(link);
return ret;
}
}
Attributes
Loading...
B station related video link
No
交流群
