Как убрать отступ между кнопками нативного скрипта?

Эй, я пытаюсь создать свою собственную нижнюю навигацию в нативном скрипте с помощью 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>

введите здесь описание изображения


nativescript nativescript-vue
person Peter Nguyen    schedule 21.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

button {
  border-width: 1;
  border-color: your-background-color;
}
person Manoj    schedule 21.04.2020
comment
Ах, это работает! Спасибо. Я попытался установить ширину границы на 0, но я не думал пытаться изменить цвет границы. - person Peter Nguyen; 26.04.2020
comment
На самом деле это вроде как работает, но тогда я теряю анимацию нажатия кнопки, если устанавливаю ширину границы равной 1. Есть идеи? - person Peter Nguyen; 26.04.2020
comment
Без образца для воспроизведения проблемы я не уверен, что происходит с вашей стороны. - person Manoj; 26.04.2020