导航(Navs)

引导程序中提供的导航共享常规标记和样式，从基类<b-nav>到active和 disabled状态。交换修改器道具以在每个样式之间切换。 

<div>
  <b-nav>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

概述

<b-nav>组件是用FrasBox构建的，为构建所有类型的导航组件提供了坚实的基础。它包括一些样式替代（用于处理列表），一些较大的命中区域的链接填充，以及基本的禁用样式。基本导航中不包括任何活动状态。

<b-nav> 支持以下子组件：

  • <b-nav-item> 用于可操作的链接（或路由器链接）
  • <b-nav-item-dropdown> 下拉菜单
  • <b-nav-text> 用于纯文本内容
  • <b-nav-form>用于内联表单

支持两种样式变体：tabs和

Tab 样式

通过设置tabs属性使导航看起来像栏标。 

<div>
  <b-nav tabs>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

Pill 样式

通过设置pills属性使用pill样式。 

<div>
  <b-nav pills>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

Small

通过设置small属性使导航更小。 

<div>
  <b-nav small>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

填充并对齐

强制您的<b-nav>内容扩展整个可用宽度。

填充

要使用<b-nav-item>组件按比例填充所有可用空间， 请设置fill属性。请注意，所有水平空间都已占用，但并非每个导航项都具有相同的宽度。 

<div>
  <b-nav tabs fill>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Link with a long name </b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

两端对齐

对于等宽元素，请改为设置justified。所有水平空间将被导航链接占用， 但与上面的fill不同，每个<b-nav-item>的宽度将相同。 

<div>
  <b-nav tabs justified>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Link with a long name </b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

对齐

要对齐<b-nav-item>组件， 请使用align属性。 可用值包括 left, center和 right.。 

<div>
  <b-nav tabs align="center">
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Link with a long name </b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

垂直变化

默认情况下<b-nav>显示在水平线上。通过设置vertical属性堆叠导航。 

<div>
  <b-nav vertical class="w-25">
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

使用<b-nav-item-dropdown>将下拉项放置在导航中。 

<div>
  <b-nav pills>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item-dropdown
      id="my-nav-dropdown"
      text="Dropdown"
      toggle-class="nav-link-custom"
      right
    >
      <b-dropdown-item>One</b-dropdown-item>
      <b-dropdown-item>Two</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Three</b-dropdown-item>
    </b-nav-item-dropdown>
  </b-nav>
</div>

有时，您希望将自己的类名添加到生成的下拉切换按钮中，该按钮在默认情况下具有类nav-link和 dropdown-toggle。使用toggle类属性添加它们（如上所述），将生成如下内容： 

<li id="my-nav-dropdown" class="nav-item b-nav-dropdown dropdown">
  <a
    href="#"
    id="my-nav-dropdown__BV_button_"
    aria-haspopup="true"
    aria-expanded="false"
    class="nav-link dropdown-toggle nav-link-custom"
  ></a>
  ...
</li>

有关支持的子组件的列表，请参阅<b-dropdown>。

可选范围的默认插槽

下拉式默认插槽的作用域可以选择为以下可用的作用域：

属性或方法 描述
hide() 可用于关闭下拉菜单。接受可选的布尔参数，如果为true，则返回切换按钮的焦点

Lazy 下拉菜单

默认情况下，<b-nav-item-dropdown>在DOM中呈现菜单内容，即使没有显示菜单。 当在同一页上呈现大量下拉列表时，由于整体内存利用率较高，性能可能会受到影响。您可以指示<b-nav-item-dropdown> 仅当通过将lazy属性设置为true显示菜单内容时才呈现菜单内容。

导航文本内容

使用<b-nav-text>子组件将纯文本内容放入导航： 

<div>
  <b-nav >
    <b-nav-item href="#1">Link 1</b-nav-item>
    <b-nav-item href="#2">Link 2</b-nav-item>
    <b-nav-text>Plain text</b-nav-text>
  </b-nav>
</div>

使用<b-nav-form>子组件将内联表单放入导航： 

<div>
  <b-nav pills>
    <b-nav-item href="#1" active>Link 1</b-nav-item>
    <b-nav-item href="#2">Link 2</b-nav-item>
    <b-nav-form @submit.stop.prevent="alert('Form Submitted')">
      <b-form-input aria-label="Input" class="mr-1"></b-form-input>
      <b-button type="submit">Ok</b-button>
    </b-nav-form>
  </b-nav>
</div>

有关放置表单控件的其他详细信息，请参阅<b-form> inline内联文档。

选项卡式本地内容支持

请参阅<b-tabs>组件以创建本地内容的选项卡式窗格（不适合导航）。

Card 整合

使用<b-card>标题中的 <b-nav>， 启用<b-nav>标题属性并设置pills或 tabs：

Tabs 样式:

With supporting text below as a natural lead-in to additional content. 

<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header tabs>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

Pill 样式:

With supporting text below as a natural lead-in to additional content. 

<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header pills>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

Plain 样式:

只有当你使用tabs或 pills 样式时，才需要card-header属性。 请注意，Bootstrap v4 SCSS没有针对active状态纯样式导航项的特殊样式。

With supporting text below as a natural lead-in to additional content. 

<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

如果 <b-nav>处于vertical模式，则card-header属性没有样式效果。

与Vue路由器一起使用

让您的card通过<router-view>或 <nuxt-child>组件控制vue路由器嵌套路由，以创建随路由URL更改的选项卡式内容： 

// On page with route `/some/route`
<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header tabs>
        <!-- <b-nav-item>'s with child routes. Note the trailing slash on the first <b-nav-item> -->
        <b-nav-item to="/some/route/" exact exact-active-class="active">Active</b-nav-item>
        <b-nav-item to="/some/route/foo" exact exact-active-class="active">Foo</b-nav-item>
        <b-nav-item to="/some/route/bar" exact exact-active-class="active">Bar</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body>
      <!-- Child route gets rendered in <router-view> or <nuxt-child> -->
      <router-view></router-view>
      <!-- Or if using Nuxt.js
      <nuxt-child></nuxt-child>
      -->
    </b-card-body>
  </b-card>
</div>

注意: Vue路由器不支持使用哈希（#）定义活动路由，因此必须将“tab”内容定义为子路由。

上面的路由器配置示例：

const routes = [
  {
    path: '/some/route',
    // We don't provide a name on this parent route, but rather
    // set the name on the default child route instead
    // name: 'some-route',
    component: SomeRouteComponent,
    // Child route "tabs"
    children: [
      // Note we provide the above parent route name on the default child tab
      // route to ensure this tab is rendered by default when using named routes
      { path: '', component: DefaultTabComponent, name: 'some-route' },
      { path: 'foo', component: FooTabComponent },
      { path: 'bar', component: BarTabComponent }
    ]
  }
]

也可以使用named routes和/或route params的Vue路由器，而不是基于路径的路由。

有关详细信息，请参见：

可访问性

如果使用<b-nav>提供导航栏， 请确保将role="navigation" 添加到<b-nav>的最合乎逻辑的父容器中， 或在<b-nav>周围包装一个<nav>元素。 不要将角色添加到<b-nav>本身，因为这会阻止辅助技术将其作为实际列表公布。

在<b-nav>中使用<b-nav-item-dropdown> 时， 请确保为<b-nav-dropdown>指定唯一的id属性值， 以便自动生成相应的aria-*属性。

选项卡式界面可访问性

请注意，导航栏，即使视觉样式为制表符，也不应赋予role="tablist", role="tab"或 role="tabpanel"属性。 这些仅适用于不更改URL或$route的 选项卡式接口， 如WAI ARIA创作实践中所述。有关与WAI ARIA兼容的动态选项卡式接口， 请参见<b-tabs> 。

选项卡式界面应避免使用下拉菜单，因为这会导致可用性和可访问性问题：

  • 从可用性的角度来看，当前显示的选项卡的触发器元素不立即可见（因为它在关闭的下拉菜单中）这一事实可能会导致混淆。
  • 从可访问性的角度来看，目前还没有合理的方法将这种构造映射到标准的WAI ARIA模式，这意味着辅助技术的用户无法轻松地理解它。

另请参阅

  • <b-tabs> 创建本地内容的选项卡式窗格，甚至通过下拉菜单。
  • <b-navbar> 在简洁的标题中定位品牌、导航和其他元素的包装。
  • <b-dropdown> 对于可以放置在内部的子组件<b-nav-item-dropdown>
  • Router Link Support reference 有关<b-nav-item>上可用的特定于路由器链接的属性的信息

组件引用

<b-nav>

功能部件
View source

属性

属性 类型 默认值 描述
tag String 'ul' 指定要呈现的HTML标记，而不是默认标记
fill Boolean false 按比例用导航项填充所有水平空间。所有水平空间都被占用，但不是每个导航项都有相同的宽度
justified Boolean false 用导航项填充所有水平空间，但与“填充”不同，每个导航项的宽度都相同
align String 对齐导航中的导航项：“开始”（或“左”）、“中心”、“结束”（或“右”）
tabs Boolean false 以选项卡的外观呈现导航项
pills Boolean false 以pill按钮的外观呈现导航项
vertical Boolean false 垂直渲染导航
small Boolean false 使导航更小
card-header v2.0.0+ Boolean false 当导航放置在卡头内时设置此属性

<b-nav-item>

功能部件
View source

属性

属性 (Click to sort Ascending) 类型 默认值 描述
href String 表示标准a链接的链接的目标URL
rel String 设置呈现链接的“rel”属性
target String '_self' 设置呈现链接的“target”属性
active Boolean false 当设置为“true”时，使用活动样式将组件置于活动状态
disabled Boolean false 设置为“true”时，禁用组件的功能并将其置于禁用状态
to String or Object 路由器链接属性：表示链接的目标路由。单击时，to prop的值将在内部传递给router.push（），因此该值可以是字符串或位置描述符对象
append Boolean false 路由器链接属性：设置附加属性总是将相对路径附加到当前路径
replace Boolean false 路由器链接属性：设置替换属性将在单击时调用“router.replace（）”，而不是“router.push（）”，因此导航不会留下历史记录
event String or Array 'click' 路由器链接属性：指定触发链接的事件。在大多数情况下，您应该将其保留为默认值
active-class String 路由器链接属性：配置当链接处于活动状态时应用的活动CSS类。通常您需要将其设置为类名“active”
exact Boolean false 路由器链接属性：默认的活动类匹配行为是包含匹配。设置此道具将强制模式与路线完全匹配
exact-active-class String 路由器链接属性：配置当链接处于活动状态时应用的活动CSS类，精确匹配。通常您需要将其设置为类名“active”
router-tag String 'a' 路由器链接属性：指定要呈现的标记，它仍将侦听用于导航的单击事件“路由器标记”转换为最终呈现路由器链接上的标记属性。通常应该使用默认值
no-prefetch Boolean false nuxt link prop：为了提高nuxt.js应用程序的响应性，当链接显示在视区内时，nuxt.js将自动预取代码分割的页面。设置“无预取”将禁用特定链接的此功能
link-attrs Object 要放置在嵌套链接元素上的其他属性
link-classes String or Object or Array 放置在嵌套链接元素上的CSS类

<b-nav-item>支持生成 <router-link>或 <nuxt-link>组件（如果使用nuxt.js）。 有关路由器链接（或nuxt链接）特定属性的更多详细信息，请参阅路由器支持 参考部分。

<b-nav-text>

功能部件
View source

<b-nav-form>

功能部件
查看源代码

属性

属性 类型 默认值 描述
id String 用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
novalidate Boolean false 设置后，禁用窗体中控件的浏览器本机HTML5验证
validated Boolean false 设置后，在窗体上添加引导类“was validated”，触发本机浏览器验证状态
form-class String or Array or Object

事件

事件 参数 描述
submit
  1. event - Native submit event.
 提交表单时发出

<b-nav-item-dropdown>

查看源代码

组件别名

<b-nav-item-dropdown> 也可以通过以下别名使用：

  • <b-nav-item-dd>
  • <b-nav-dropdown>
  • <b-nav-dd>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性

属性 (Click to sort Ascending) 类型 默认值 描述
id String 用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
disabled Boolean false 设置为“true”时，禁用组件的功能并将其置于禁用状态
dropup Boolean false 设置后，将菜单放置在按钮顶部
dropright Boolean false 设置后，将菜单放置在按钮右侧
dropleft Boolean false 设置后，将菜单放置在按钮左侧
right Boolean false 将菜单的右边缘与按钮的右对齐
offset Number or String 0
no-flip Boolean false 防止菜单自动翻转位置
popper-opts Any 要传递给Popper.js的附加配置
boundary v2.4.0+ String or HTMLElement 'scrollParent' 菜单的边界约束：“scrollParent”、“window”、“viewport”或对HTMLElement的引用。当下拉菜单位于b-navbar中时不起作用
text String 在切换按钮或拆分按钮中放置的文本为拆分模式
html String HTML字符串放置在切换按钮中，或在拆分按钮中是拆分模式。慎用
menu-class String or Array or Object 要添加到菜单容器的CSS类
toggle-class String or Array or Object 要添加到切换按钮的CSS类
no-caret Boolean false 隐藏切换按钮上的插入符号指示器
role String 'menu' 将ARIA属性“role”设置为特定值
lazy Boolean false 设置后，将只在菜单打开时将菜单内容装载到DOM中

插槽

插槽名称 描述 范围
button-content 可用于实现具有图标和更多样式的自定义文本。
default 下拉菜单内容的可选范围的默认槽。

事件

事件 参数 描述
show
  1. bvEvt - BvEvent对象。调用bvEvt.preventDefault（）取消显示。
 在显示下拉列表之前发出。可取消。
shown 显示下拉列表时发出。
hide
  1. bvEvt - BvEvent对象。调用bvEvt.preventDefault（）取消隐藏。
 在隐藏下拉列表之前发出。可取消。
hidden 隐藏下拉列表时发出。
toggle 单击切换按钮时发出。

导入单个组件

您可以通过以下命名的导出将单个组件导入到项目中：

组件 命名输出 导入路径
<b-nav> BNav bootstrap-vue
<b-nav-item> BNavItem bootstrap-vue
<b-nav-text> BNavText bootstrap-vue
<b-nav-form> BNavForm bootstrap-vue
<b-nav-item-dropdown> BNavItemDropdown bootstrap-vue

示例：

import { BNav } from 'bootstrap-vue'
Vue.component('b-nav', BNav)

导入为Vue.js插件

该插件包括上面列出的所有单个组件。插件还包括任何组件别名。

命名输出 导入路径
NavPlugin bootstrap-vue

此插件还自动包含以下插件：

  • DropdownPlugin

示例：

import { NavPlugin } from 'bootstrap-vue'
Vue.use(NavPlugin)