ionic-transparent-header

gistfile1.txt

<ion-content class="ion-no-padding ion-no-margin ion-bg-dark-top" >

  <ion-header class="ion-no-border">
    <ion-toolbar class="ion-bg-transparent">
      <ion-title>Seções</ion-title>
      <ion-buttons slot="start">
        <ion-back-button text="" defaultHref="/tabs/home"></ion-back-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button fill="clear" (click)="requestData()">
          <ion-icon slot="icon-only" name="refresh"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <ion-refresher
          slot="fixed"
          (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
            pullingIcon="arrow-down"
            pullingText="Arraste para carregar"
            refreshingSpinner="circles"
            refreshingText="Carregando...">
    </ion-refresher-content>
  </ion-refresher>
  
  <!-- card with title and content -->
  <ion-card>
    <ion-card-header>
      <ion-title>Meu perfil</ion-title>
    </ion-card-header>
    <ion-card-content>

      <!-- box card content here-->
    </ion-card-content>
  </ion-card>
  

  <ion-card>
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-button expand="block" color="tertiary" (click)="filterPostsBy('products')">
            <ion-icon name="cart"></ion-icon> &nbsp;Produtos
          </ion-button>
        </ion-col>
        <ion-col>
          <ion-button expand="block" color="primary" (click)="filterPostsBy('news')">
            <ion-icon name="list"></ion-icon> &nbsp;Notícias
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card>

  <ion-card>
    <ion-list class="ion-no-padding ion-no-margin">

      <ion-item *ngFor="let section of sectionsList" (click)="openPostList(section)">
        <ion-thumbnail slot="start" *ngIf="section.sections_image">
          <img [src]="getImgUrl(section.sections_image)" [alt]="section.sections_name" />
        </ion-thumbnail>
        <ion-label>{{section.sections_name}}</ion-label>
      </ion-item>

      <!--
      <ion-item *ngFor="let section of sectionsList" (click)="openPostList(section)">
        <ion-label>{{section.sections_name}}</ion-label>
      </ion-item>
      -->

    </ion-list>

  </ion-card>
</ion-content>