Question

在离子方面，我需要使用＆＃39; Heading＆＃39;（Large one）和＆＃39; Sub-heading＆＃39;（small one）。我正在使用如下，

<ion-view view-title="Primary Heading">
    <ion-content>.....</ion-content>
</ion-view>

这很有效。但是，我需要使用两个标题。一个作为＆＃39;主要标题＆＃39;另一个作为＆＃39;子标题＆＃39;。我尝试使用＆＃39; header-bar＆＃39;，＆＃39; sub-header-bar＆＃39;。但是，它没有像我预期的那样工作。标题应位于第一行，副标题应位于下一行。我也试过

 <ion-nav-title>...</ion-nav-title>

那么，如何实现这一目标。而且我必须将自己的造型应用于标题。请帮助我。

Answer 1

尝试后，我对我的问题的回答是，

 <ion-view> 
    <ion-nav-title>
        <div class="page-title">HEADING</div>
        <div class="page-sub-title">Sub Heading</div>
    </ion-nav-title>
    <ion-content>.....</ion-content>
</ion-view>

要应用样式，我的CSS就是这样，

.page-title{
         margin-top : -10px;
         color: #ffffff;
         font-size: 1.5em;
}
.page-sub-title{
         margin-top: - 25px;
         color: green;
         font-size : .9em;
}

Answer 2

我认为您正在寻找带有子标题的标签解决方案。如前所述，第一个标头由<ion-view>设置。可以使用<ion-header>设置子标题。

<ion-view title="Primary Heading">
    <ion-header-bar class="bar bar-subheader">
        <h1 class="title">Subheader</h1>
    </ion-header-bar>
    <ion-content>
        CONTENT
    </ion-content>
</ion-view>

请参阅下一个CodePen：http://codepen.io/calendee/pen/keHnw

Answer 3

这是非常基本的CSS和Html代码使用此

HTML CODE：

 <ion-header>

  <ion-navbar>     
    <ion-title>Title
        <p class="subtitle">Subtitle </p>
    </ion-title>
  </ion-navbar>

</ion-header>

CSS：

.toolbar-title {
        overflow: visible;
        position: relative;
        .subtitle {
          position: absolute;
          top: 6px;
          font-size: 66%;

        }

    }

如何在Ionic标题中使用两个标题？

3 个答案: