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

Question

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

我在 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 的汉堡包菜单具有更高的对比度，同时不干扰其功能？

Answer 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

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

vuejs hamburger menu using nav-collapse needs to be high contrast

html

css

accessibility

vue.js