选项卡按钮存在但不可见

Question

我有一个带有两个标签的标签组件.按钮是可单击的,单击按钮所在的位置正确显示选项卡内容,但按钮不可见.

<ion-header>
  <ion-navbar>
    <ion-title>{{coupon.title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="coupon-image-container">
    <img src={{coupon.mainImage}}/>
    <button ion-button class="left">Redeem</button>
  </div>
  <ion-tabs class="coupon-tabs">
    <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
    <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
  </ion-tabs>
</ion-content>

我不认为任何其他代码是必要的,但如果需要我会提供更多.就像我说的那样mapTab,infoTab组件的内容显示得很好,点击标签按钮应该在哪里切换它们,但按钮只是空白.

编辑:以防万一有人要问,如果我删除除组件组件之外的组件中的所有其他内容,它仍然会做同样的事情:

<ion-tabs class="coupon-tabs">
  <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
  <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
</ion-tabs>

所以它绝对与其他内容无关.

编辑:我做了一个显示问题的GIF:http://g.recordit.co/WDkjkSz6re.gif

编辑:这是ion-tab上的样式

element.style {
}
main.css:25224
.coupon-tabs ion-tab {
    color: black;
    top: 56px;
}
main.css:5136
ion-tab.show-tab {
    display: block;
}
main.css:5145
ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page {
    contain: strict;
}
main.css:5132
ion-tab {
    display: none;
}
main.css:5128
ion-nav, ion-tab, ion-tabs {
    overflow: hidden;
}
main.css:5116
ion-app, ion-nav, ion-tab, ion-tabs, .app-root {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

main.css:4986
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
Inherited from ion-tabs.coupon-tabs.tabs.tabs-md.tabs-md-primary
main.css:25219
.coupon-tabs {
    position: relative;
    color: black;
}
main.css:4986
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

Answer 1

这样做：

<ion-tab icon="ion-map" title="Map"></ion-tab>
<ion-tab icon="ion-ios-information" title="Info"></ion-tab>

执行此操作后，您可能会注意到文本没有出现，尽管文本确实出现了，但它位于图标下方并被 隐藏overflow。position: relative; top: -XXpx您可能需要使用或 make Parent将文本移高一点overflow: visible。

如果您没有构建项目，typescript我猜问题是tabTitle并且tabIcon没有正确转换为上面的示例，或者如果您我们正在构建这个项目typescript它无法将属性转换为正确的方式。

希望有帮助

我在谷歌上看到了一些与此相关的其他问题