Hello all,
I’m an experienced developer but just getting my hands dirty with Ionic.
I set
<IonToolbar color="light">
But the toolbar only shows in that color after scrolling.
My question is: In the first pic why is the top white?
const Network: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar color="light">
<IonTitle>Network</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar color="light">
<IonTitle size="large">Network</IonTitle>
</IonToolbar>
</IonHeader>
<IonSearchbar></IonSearchbar>
<IonList>
<IonItem>
<IonIcon slot="start" icon={ timeOutline } />
<IonLabel>
View Open Office Hours
</IonLabel>
</IonItem>
</IonList>
<IonList>
<IonItem>
<IonIcon slot="start" icon={ peopleCircleOutline } />
<IonLabel>
View Teams
</IonLabel>
</IonItem>
</IonList>
<IonList className="network-members-list">
<NetworkMember avatarUrl="https://i.pravatar.cc/300?u=TO" name="Trevor Owens" shortDescription="CEO of Rocketship, Author" />
<NetworkMember avatarUrl="https://i.pravatar.cc/300?u=SK" name="Sihoon Kim" shortDescription="CTO of Rocketship, KAIST" />
<NetworkMember avatarUrl="https://i.pravatar.cc/300?u=GN" name="Grace Ng" shortDescription="Artist and Rocketship Co-Founder" />
<NetworkMember avatarUrl="https://i.pravatar.cc/300?u=JH" name="Jee-hyun Chang" shortDescription="Find me at StationNeo" />
<NetworkMember avatarUrl="https://i.pravatar.cc/300?u=BO" name="Brittany Owens" shortDescription="Engineer" />
<NetworkMember avatarUrl="https://i.pravatar.cc/300?u=YW" name="Youngwoo Kim" shortDescription="Co-CEO of StationNeo" />
<NetworkMember avatarUrl="https://i.pravatar.cc/300?u=CK" name="Chelsea Han" shortDescription="NIPA" />
</IonList>
</IonContent>
</IonPage>
);
};