angularjs - 离子：查看字幕

Question

在我的角度离子应用程序中，我想在视图标题下方添加一个副标题（类似于“字母”）。这是可能的，还是在网络上有任何解决方法？

现在，我的模板看起来像这样：（我尝试在视图标题旁边添加 view-subtitle="test"，但到目前为止没有运气）

<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;
}

Plunker 示例：http: //embed.plnkr.co/LOxXsc/preview