angularjs - イオン: 字幕表示

Question

私のangular-ionicアプリケーションでは、ビュータイトルの下にサブタイトル（「アルファベット」に似ています）を追加したいと思います。これは可能ですか、または Web 上に回避策はありますか?

現在、私のテンプレートは次のようになっています:

<ion-view view-title="Problems">
  <ion-content>
  </ion-content>
</ion-view>

前もって感謝します。

Answer 1

<ion-view title="<div class='main-title' style='line-height: 1.6;'>Main Title</div><div class='sub-title' style='line-height: .6;font-size: 12px;color: #333;'>Sub Title</div>">

<ion-content>
...
</ion-content>

</ion-view>

出力画像スナップ

Answer 2

ヘッダーをカスタマイズする方法はたくさんあります。Ionic の CSS サブヘッダー コンポーネントを使用して、元のヘッダー バーの下にセカンダリ ヘッダー バーを配置することもできます。これにより、非常によく似た外観になります。http://ionicframework.com/docs/components/#subheader

  <ion-header-bar class="bar-dark" align-title="center">
    <button class="button button-icon" ng-click="toggleCompanies()">
      <i class="icon ion-navicon"></i>
    </button>
    <h1 class="title large">Employees</h1>
  </ion-header-bar>
  <ion-header-bar class="bar-dark bar-subheader">
    <div class="small">Alphabetic</div>
  </ion-header-bar>

いくつかの CSS スタイルを適用する

.small {
  font-size: 14px;
  text-align: center;
}

プランカーの例: http://embed.plnkr.co/LOxXsc/preview