Ionic 离子框架:不带行分隔符的IonHeader / IonTitle子标题

afdcj2ne  于 2022-12-09  发布在  Ionic
关注(0)|答案(1)|浏览(118)

我是Ionic Framework的新手(在React中使用它),我正在尝试创建一个新的移动的应用作为练习。我正在尝试创建以下内容:

在滚动页面时,我希望大的“Discover”文本成为页面的标题。下面是我的代码:

<IonPage>
      <IonHeader mode="ios" translucent>
        <IonToolbar>
          <IonButton fill="clear">
            <IonIcon slot="start" icon={menu} />
          </IonButton>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen>
        <IonHeader mode="ios" collapse="condense">
          <IonToolbar>
            <IonTitle size="large" className="mainTitle">{t('Home.Title')}</IonTitle>
          </IonToolbar>
        </IonHeader>

        <IonList>
        </IonList>
      </IonContent>
</IonPage>

结果如下所示:

我不明白的是,如果,我怎么能把我的副标题放在标题下面(并间隔它-我假设我会用CSS做)?我怎么能删除标题和内容之间的分隔线(穿过页面的灰色线)?

6vl6ewon

6vl6ewon1#

尝试在<IonHeader>中添加类名"ion-no-border"
大概是这样:
<IonHeader className="ion-no-border">
希望对你有用。

相关问题