首页 文章

离子离子导航器透明

提问于
浏览 次
1

我必须成功地使离子导航条变得透明 . 我试图透明，但它不起作用 .

"devDependencies": {
        "@ionic/app-scripts": "2.1.3",
        "ionic": "3.20.0",
        "typescript": "2.3.4",
        "electron": "^1.6.5"
    },

page.html中

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

    <ion-buttons end>
      <button class="appbarButton" *ngIf="target == 'tv'" ion-button icon-only (click)="selectCurrentEpisode()">
        <ion-icon name="skip-backward"></ion-icon>
      </button>
      <button class="appbarButton" *ngIf="target == 'tv'"  ion-button icon-only (click)="selectNextEpisode()">
        <ion-icon name="skip-forward"></ion-icon>
      </button>
      <button class="appbarButton" *ngIf="detail" ion-button icon-only (click)="changeFavorite()">
        <ion-icon name="{{ (detail.favorite == true) ? 'star' : 'star-outline' }}"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

cordova ionic-framework ionic2 ionic3

3 回答

  • 1

    你尝试过它的不透明度吗？试试这个 ：

    HTML文件：

    <ion-navbar class="transparent-nav-bar">
   <ion-title>
      {{show.title}}
    </ion-title>
</ion-navbar>

    SCSS文件：

    .transparent-nav-bar {
    opacity: 0;
}
    回复于
  • 1

    尝试在$ colors Map 中添加属性，在 src/theme/variables.scss 文件中添加自定义颜色，然后像这样调用它 .

    <ion-navbar color="custom">
    回复于
  • 1

    如果您正在尝试找到合适的 class ，请尝试以下方法：

    .toolbar-background.toolbar-background-md{
     background-color: transparent;
}
    回复于

相关问题