Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Nav 导航组件

为网站提供导航功能的菜单。

基本导航样式

本例中通过设置 Items 属性,通过程序 api 对导航组件进行赋值,并且在导航组件的 ChildContext 中直接写入 NavLink 组件

Demo

对齐

通过设置 Alignment 属性来控制组件对齐方式

Demo

垂直

本例中通过设置 IsVertical 属性控制导航是否为垂直分布

Demo

胶囊式

通过设置 IsPills 属性控制导航菜单背景色

Demo

填充和对齐

通过设置 IsFill 属性控制导航菜单均匀分布填满整个导航栏

Demo

等宽

通过设置 IsJustified 属性使每个导航项目将具有相同的宽度。

Demo

Attributes

Loading...
@page "/navs"
@inject IOptions<WebsiteOptions> WebsiteOption

<h3>Nav 导航组件</h3>

<h4>为网站提供导航功能的菜单。</h4>

<Block Title="基本导航样式" Introduction="本例中通过设置 <code>Items</code> 属性,通过程序 api 对导航组件进行赋值,并且在导航组件的 <code>ChildContext</code> 中直接写入 <code>NavLink</code> 组件">
    <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>
</Block>

<Block Title="对齐" Introduction="通过设置 <code>Alignment</code> 属性来控制组件对齐方式">
    <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="分割线" />
    <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>
</Block>

<Block Title="垂直" Introduction="本例中通过设置 <code>IsVertical</code> 属性控制导航是否为垂直分布">
    <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="分割线" />
    <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>
</Block>

<Block Title="胶囊式" Introduction="通过设置 <code>IsPills</code> 属性控制导航菜单背景色">
    <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>
</Block>

<Block Title="填充和对齐" Introduction="通过设置 <code>IsFill</code> 属性控制导航菜单均匀分布填满整个导航栏">
    <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>
</Block>

<Block Title="等宽" Introduction="通过设置 <code>IsJustified</code> 属性使每个导航项目将具有相同的宽度。">
    <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>
</Block>

<AttributeTable Items="@GetAttributes()" />
根据相关法律政策,该内容无法显示

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload