Ionic Framework：IonHeader/IonTitle添加副标题及移除分隔线咨询

1. 标题下方添加副标题并调整间距 #

首先修改折叠头部分的代码，在大号标题下方插入副标题容器：

<IonContent fullscreen>
  <IonHeader mode="ios" collapse="condense" className="custom-condense-header">
    <IonToolbar>
      <IonTitle size="large" className="mainTitle">{t('Home.Title')}</IonTitle>
      {/* 新增自定义副标题 */}
      <div className="subtitle">{t('Home.Subtitle')}</div>
    </IonToolbar>
  </IonHeader>

  <IonList>
  </IonList>
</IonContent>

添加对应CSS样式调整间距和显示逻辑：

/* 调整大标题和副标题的间距 */
.mainTitle {
  margin-bottom: 4px !important;
}
/* 自定义副标题样式 */
.subtitle {
  font-size: 14px;
  color: #666;
  padding-left: 16px;
  padding-bottom: 8px;
}
/* 页面滚动大标题收拢后隐藏副标题 */
ion-header.header-collapse-condense-inactive .subtitle {
  display: none;
}

你可以根据设计需求自行调整数值参数，修改间距、字号、颜色等属性。

2. 移除标题与内容之间的灰色分隔线 #

这个分隔线是Ionic为ios模式下Header默认添加的底部边框，直接重置对应CSS变量即可，给上面新增的custom-condense-header类添加如下样式：

.custom-condense-header {
  /* 清除默认底部边框 */
  --border-width: 0 !important;
  /* 清除默认阴影效果 */
  box-shadow: none !important;
}

如果还有残留分隔线，给页面顶部的主IonHeader也添加--border-width: 0属性即可。

内容的提问来源于stack exchange，提问作者developer82