如何在 ElectronJS 中添加底部栏，如 VSCode 一样？

Question

我正在尝试在我的 ElectronJS 应用程序底部添加一个栏，我希望它的位置与 VSCode 中的蓝色底部栏相同，其中滚动条 ends/stops在上面。

不幸的是，当内容溢出时，右侧似乎总是出现一个小的space滚动条（~~我不想禁用滚动条/ overflow: hidden;~~ 见编辑 2).

我做了一些测试，通过下面的代码你可以看到我想要的行为似乎发生在 nav-drawer 上，即它的滚动条停在 v-bottom-navigation 的正上方，这将是我的底部条（你看到的灰色粗线就是滚动条）。

我对此不太熟悉，但我无法弄清楚为什么会发生这种情况以及如何修改它以使整个应用程序获得相同的行为。

VueComponent.vue

<template>
  <div id="nav-drawer">
    <v-navigation-drawer
      v-model="drawer"
      app
      color="white darken-3"
      mini-variant
      permanent
    >
      <v-avatar
        v-for="n in 30"
        :key="n"
        :color="`grey ${n === 1 ? 'darken' : 'lighten'}-1`"
        size="36"
        class="d-block text-center mx-auto my-3"
      >
        <span>TT</span>
      </v-avatar>
      <v-avatar class="d-block mx-auto">
        <v-btn icon small color="primary">
          <v-icon>fas fa-window-maximize</v-icon>
        </v-btn>
      </v-avatar>
    </v-navigation-drawer>
    <v-bottom-navigation v-model="value" height="20px" background-color="primary" app>
      <v-spacer></v-spacer>
      <v-btn icon small>
        Button
      </v-btn>
    </v-bottom-navigation>
  </div>
</template>

<script>
export default {
  name: "NavDrawer",
  components: {
    //
  },
  data: () => ({
    drawer: true,
  })
}
</script>

P.S。我将 ElectronJS 与 VueJS+VuetifyJS 一起使用 - 我按照 here 所述进行了设置。感谢任何帮助。

编辑 1： 我查看了 VSCode 源代码并找到了 UI 元素 (vscode/src/vs/base/browser/ui/)。不幸的是，根据我在这里和那里发现的一些线程，我无法弄清楚其中哪一个是底部的栏（显然称为 System Bar）。

我认为可能是 toolbar，但这似乎是 actionbar 的一部分，也就是左边的菜单（由默认）并且似乎没有太多 CSS 表明它是底部的栏。

编辑 2： 我尝试在 index.html 主文件的 style 部分添加 html {overflow: hidden;}。它删除了主页部分的栏（您在第二张图片中看到的带有两个箭头和绿色按钮的滚动条）和滚动的可能性，但是 [=13 的滚动条=] 仍然存在，滚动仍然有效。所以，我想这将是一个选项，如果我仍然可以在主页部分使用滚动条，上面的代码 with hidden 功能也启用。不确定这是否可能。

编辑 3： 在 index.html 文件中使用 html {overflow-y: auto;}，当没有内容溢出时删除滚动条，看起来就像我想要它，但是有的时候，它仍然占用 space 并且看起来像我 post.

中的第二张图片

Answer 1

找到这个例子：CodePen

对于我的情况，解决方案是使 :root {...} 部分适应我的应用程序，这意味着将底部栏标记为页脚并根据其大小计算内容区域。

html {overflow: hidden;} 必须也位于 index.html 文件的 style 部分。

如何在 ElectronJS 中添加底部栏，如 VSCode 一样？

How do I add a bottom bar in ElectronJS like the VSCode one?

vue.js

electron

vuetify.js