Как убрать поле между кнопками nativescript?

Question

Эй, я пытаюсь создать свою собственную нижнюю навигацию в nativescript с помощью vue, но я не могу заставить кнопки заполнить все пространство. Есть идеи, почему это не работает? У меня есть кнопки в компоненте gridlayout, и я установил оба свойства высоты / ширины на 100%, но между кнопками все еще есть пространство.

<template>
  <GridLayout rows="*" columns="*,*,*" horizontalAlignment="stretch">
    <Button
      row="0"
      col="0"
      text="Potty Logger"
      :class="{ active: active == 0, '-primary': active != 0 }"
      @tap="goTo(0)"/>
    <Button
      row="0"
      col="1"
      :class="{ active: active == 1, '-primary': active != 1 }"
      :isEnabled="active != 1"
      text="Walk Tracker"
      @tap="goTo(1)"/>
    <Button
      row="0"
      col="2"
      :class="{ active: active == 2, '-primary': active != 2 }"
      text="History"
      @tap="goTo(2)"
  /></GridLayout>
</template>

<style lang="scss" scoped>
label {
  vertical-align: center;
  text-align: center;
}

button {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
}
</style>

Answer 1

Попробуйте установить

button {
  border-width: 1;
  border-color: your-background-color;
}