README

一个简单的 Symfony 包，用于在配置中定义应用程序的菜单并在 Bootstrap 的 Navbar 组件中渲染它们。此包支持 Bootstrap 版本 4 和 5。

安装

$ composer require camurphy/bootstrap-menu-bundle

用法

您的菜单定义在 config/packages/bootstrap_menu.yaml 中。

以下是一个名为 main 的非常简单的菜单，只有一个 '注销' 链接。

bootstrap_menu:
  version: 5 # Optional, defaults to Bootstrap 5
  dropdown_active_style: false # Optional, defaults to false
  dropdown_item_active_style: false # Optional, defaults to false
  menus:
    main:
      items:
        logout:
          label: 'Logout'
          route: 'app_logout'

然后在您的模板中，您可以通过传递菜单名称到 render_bootstrap_menu 来在 Navbar 中渲染您的菜单。此标记来自 Bootstrap Navbar Fixed 示例。Bootstrap 4 版本在此处

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
            aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        {{ render_bootstrap_menu('main') }}
      </ul>
    </div>
  </div>
</nav>

结果

路由参数

也许您的路由需要参数。您也可以指定这些。

bootstrap_menu:
  menus:
    main:
      items:
        backorder_report:
          label: 'Backorder Report'
          route: 'app_reports'
          route_parameters:
            id: 'backorder'

外部 URL

如果您想链接到绝对 URL，请使用 url。

bootstrap_menu:
  menus:
    main:
      items:
        disney:
          label: 'Disney'
          url: 'https://www.disney.com'

下拉菜单

只需指定 items 而不是 route 或 url 来链接，您的菜单项就变成了下拉菜单。以下是一个示例，其中 '更改密码' 和 '注销' 链接嵌套在 '账户' 下拉菜单中。

bootstrap_menu:
  menus:
    main:
      items:
        account:
          label: 'Account'
          items:
            change_password:
              label: 'Change password'
              route: 'app_change_password'
            logout:
              label: 'Logout'
              route: 'app_logout'

结果

分隔符

下拉菜单还可以包含分隔符来分隔相关菜单项的组。

bootstrap_menu:
  menus:
    main:
      items:
        account:
          label: 'Account'
          items:
            change_password:
              label: 'Change password'
              route: 'app_change_password'
            divider:
              is_divider: true
            logout:
              label: 'Logout'
              route: 'app_logout'

结果

标题

包含 label 的分隔符也变成标题。

bootstrap_menu:
  menus:
    main:
      items:
        account:
          label: 'Account'
          items:
            password_divider:
              is_divider: true
              label: 'Password Stuff'
            change_password:
              label: 'Change password'
              route: 'app_change_password'

            other_divider:
              is_divider: true
              label: 'Other Stuff'
            logout:
              label: 'Logout'
              route: 'app_logout'

结果

安全

菜单的某些部分可以通过角色锁定。以下示例仅允许管理员更改密码。

bootstrap_menu:
  menus:
    main:
      items:
        account:
          label: 'Account'
          items:
            password_divider:
              is_divider: true
              label: 'Password Stuff'
            change_password:
              label: 'Change password'
              route: 'app_change_password'
              roles: [ 'ROLE_ADMINISTRATOR' ]

            other_divider:
              is_divider: true
              label: 'Other Stuff'
            logout:
              label: 'Logout'
              route: 'app_logout'

对于没有 ROLE_ADMINISTRATOR 的用户，他们会看到

原因在于 Bootstrap Menu Bundle 智能地修剪下拉菜单以删除不必要的分隔符。因为用户不允许查看 '密码相关' 和 '其他相关' 之间的任何项目，所以 '密码相关' 分隔符也被修剪。

安全也可以在下拉菜单级别进行配置。也许只有管理员可以使用 '用户' 菜单。

bootstrap_menu:
  menus:
    main:
      items:
        users:
          label: 'Users'
          roles: [ 'ROLE_ADMINISTRATOR' ]
          items:
            user_list:
              label: 'Users'
              route: 'app_user_list'
            new_user:
              label: 'New User'
              route: 'app_new_user'

否定角色

您还可以通过在角色前加感叹号来隐藏具有特定角色的用户菜单项。这将优先于包含的角色。在下面的示例中，如果他们既有 ROLE_SUPPORT 也有 ROLE_USER，他们将看不到菜单项。

bootstrap_menu:
  menus:
    main:
      items:
        users:
          label: 'Users'
          roles: [ '!ROLE_SUPPORT', 'ROLE_USER' ]
          items:
            user_list:
              label: 'Users'
              route: 'app_user_list'

活动样式

默认情况下，顶级菜单项在当前路由与菜单项的路由匹配时被赋予 active 类。在此示例中，我们位于 '报告' 页面。

下拉菜单活动样式

这并未在文档中说明，但 active 类也适用于下拉菜单和下拉菜单项。要启用下拉菜单，请在配置中将 dropdown_active_style 设置为 true。

要为下拉菜单项启用，请将 dropdown_item_active_style 设置为 true。

camurphy / bootstrap-menu-bundle

维护者

详细信息