涵蓋離子含量的離子定制子標題

Question

我編輯了子標題樣式，以使其不再具有固定的高度，而是現在處於自動狀態。 我這樣做是為了使其可以容納其中的所有元素。

但是，這樣做之后，該內容位於我的較大子標題后面。

在本主題中 ，我認為所做的是重寫has-subheader和bar-subheader類。 這個可以嗎？ 如果該應用程序顯示在多個設備上會不會有問題？

這是一個示例代碼：

<ion-view>
   <ion-header-bar class="bar-subheader" style="height: auto">
   <div>
       123
   </div>
   <div>
       456
   </div>
   <div class="button-bar">
       <a class="button">A</a>
       <a class="button">B</a>
       <a class="button">C</a>
   </div>
   </ion-header-bar>

   <ion-content class="has-header has-subheader padding">
      <div style="font-size: 100px">HI !</div>
   </ion-content>
</ion-view>

看起來是這樣的：

Answer 1

您也可以在該頁面上為離子含量添加一個填充頂部。 它將下推您在該標簽內的所有內容。

<ion-view>
   <ion-header-bar class="bar-subheader" style="height: auto">
   <div>
       123
   </div>
   <div>
    456
   </div>
   <div class="button-bar">
    <a class="button">A</a>
    <a class="button">B</a>
    <a class="button">C</a>
   </div>
   </ion-header-bar>

   <ion-content class="has-header has-subheader padding morePadding">
    <div style="font-size: 100px">HI !</div>
   </ion-content>
</ion-view>

<style>
.morePadding {
  padding-top: *asmuchpaddingasyouneedhere*
 }
</style>