导航组件

简介

abp-nav 是基于 Bootstrap 导航元素扩展的基础标签助手组件。

基础用法：

<abp-nav nav-style="Pill" align="Center">
    <abp-nav-item>
[激活状态](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
    </abp-nav-item>
    <abp-nav-item>
[较长的导航链接](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
    </abp-nav-item>
    <abp-nav-item>
[链接](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
    </abp-nav-item>
    <abp-nav-item>
[禁用状态](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
    </abp-nav-item>
</abp-nav>

演示

查看导航组件演示页面以查看实际效果。

abp-nav 属性

• nav-style: 用于设置包含项的定位和样式。应为以下值之一：
  • Default（默认值）
  • Vertical（垂直）
  • Pill（胶囊式）
  • PillVertical（垂直胶囊式）
• align: 用于设置包含项的对齐方式：
  • Default（默认值）
  • Start（起始对齐）
  • Center（居中对齐）
  • End（末端对齐）

abp-nav-bar 属性

• nav-style: 用于设置基础导航栏的颜色方案。应为以下值之一：
  • Default（默认值）
  • Dark（深色）
  • Light（浅色）
  • Dark_Primary（深色-主色调）
  • Dark_Secondary（深色-次要色）
  • Dark_Success（深色-成功色）
  • Dark_Danger（深色-危险色）
  • Dark_Warning（深色-警告色）
  • Dark_Info（深色-信息色）
  • Dark_Dark（深色-深色调）
  • Dark_Link（深色-链接色）
  • Light_Primary（浅色-主色调）
  • Light_Secondary（浅色-次要色）
  • Light_Success（浅色-成功色）
  • Light_Danger（浅色-危险色）
  • Light_Warning（浅色-警告色）
  • Light_Info（浅色-信息色）
  • Light_Dark（浅色-深色调）
  • Light_Link（浅色-链接色）
• size: 用于设置基础导航栏的尺寸。应为以下值之一：
  • Default（默认值）
  • Sm（小号）
  • Md（中号）
  • Lg（大号）
  • Xl（超大号）

abp-nav-item 属性

dropdown: 设置导航项是否为下拉菜单。可为以下值之一：

• false（默认值）
• true

示例：

<abp-nav-bar size="Lg" navbar-style="Dark_Warning">
    [导航栏](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
    <abp-navbar-toggle>
        <abp-navbar-nav>
            <abp-nav-item active="true">
                [首页 <span class="sr-only">（当前）</span>](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
            </abp-nav-item>
            <abp-nav-item>
                [链接](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
            </abp-nav-item>
            <abp-nav-item dropdown="true">
                <abp-dropdown>
                    <abp-dropdown-button nav-link="true" text="下拉菜单" />
                    <abp-dropdown-menu>
                        <abp-dropdown-header>下拉菜单标题</abp-dropdown-header>
                        <abp-dropdown-item href="#" active="true">操作</abp-dropdown-item>
                        <abp-dropdown-item href="#" disabled="true">另一个禁用操作</abp-dropdown-item>
                        <abp-dropdown-item href="#">其他内容</abp-dropdown-item>
                        <abp-dropdown-divider />
                        <abp-dropdown-item href="#">分隔链接</abp-dropdown-item>
                    </abp-dropdown-menu>
                </abp-dropdown>
            </abp-nav-item>
            <abp-nav-item>
                [禁用](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
            </abp-nav-item>
        </abp-navbar-nav>            
        <span abp-navbar-text>
          示例文本
        </span>
    </abp-navbar-toggle>
</abp-nav-bar>