@(Ionic/Angular) - 离子标签样式无法隐藏元素

Question

我们来介绍一下问题：

• 这里有一个 StackBlitz 示例的链接。 StackBlitz example Link
• 我想要实现的是擦除/隐藏作为 ion-tab-buttons 容器放置的类似 div 的元素，但据我所见，在检查器相关的元素中没有元素或阴影元素我告诉这个。 （在 StackBlitz 下面的示例中，该区域被着色为绿色，不透明度为 0.4）但即使不透明度，后面也没有显示任何内容。
• 在我写这篇文章时，我注意到它可能与路由器插座大小有关，请告诉我您的想法！！

没有必要放html代码，因为它是框架生成的基本离子标签，所以这里是.scss：

ion-tab-bar {
  bottom: 20px;
  position: relative;
  border-radius: 16px;
  width: 92%;
  margin: 0 auto;
  border: 1px solid red;
}
ion-tab-button {
  --color: var(--ion-color-medium);
  --color-selected: var(--ion-color-primary);
  --padding-end: 0;
  --padding-start: 0;
  &::before {
    background-color: transparent;
    display: block;
    content: '';
    margin: 0 auto;
    width: 70%;
    height: 2px;
  }

  &.tab-selected::before {
    background-color: var(--ion-color-primary);
  }
}

//here you can see what it is the component i want to remove
//Even if you place it as transparent or opacity 0 there's no change, we are unable to see item list going up||down the tab buttons
ion-tabs {
  background: rgba(172, 255, 47, 0.425);
}

问题：我怎样才能使离子标签按钮只是浮动而没有 StackBlitz 示例中显示的“greenArea”？

Answer 1

标签栏下看不到列表的原因是因为内容的高度。为了获取页面的内容全高，可以到styles.css添加

app-tabs > ion-tabs > .tabs-inner {
  height: 100vh;
  min-height: 100vh;
}

那么你可以不用ion-tab-barposition: relative，而是position: absolute

这里是我修复的slackblitz，只需要稍微定位一下。希望这就是您想要的。