使用 nav-collapse 的 vuejs 汉堡菜单需要高对比度

Posted 2023-02-19

【中文标题】使用 nav-collapse 的 vuejs 汉堡菜单需要高对比度

【英文标题】：vuejs hamburger menu using nav-collapse needs to be high contrast

【发布时间】：2022-01-19 14:02:29

【问题描述】：

我正在尝试使汉堡菜单具有高对比度以方便访问。

我在 vue-js 中尝试过以下代码：

 <b-navbar-toggle target="nav-collapse" style="color:#000 !important; background-color: #fff !important; opacity: 1.0 !important; " ></b-navbar-toggle> <!-- hamburger menu -->

然而，虽然背景变成了白色；汉堡菜单的线条变为灰色而不是黑色。这意味着对比度较低。

我尝试了不同级别的不透明度，但这似乎只会让情况变得更糟。

有没有一种解决方案可以让使用 nav-collapse 的汉堡菜单在不干扰其功能的情况下具有更高的对比度？

【参考方案1】：

也许您应该仔细研究一下制作custom navbar toggle 并将您的（对比）SVG 推入其中。 根据文档创建自定义导航栏切换如下（文档中的示例！）：

<b-navbar-toggle target="navbar-toggle-collapse">
  <template #default=" expanded ">
    <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
    <b-icon v-else icon="chevron-bar-down"></b-icon>
  </template>
</b-navbar-toggle>

因此，您可以在模板内使用您的 SVG