![]() When using collapsible large titles, it is required that fullscreen is set to true on IonContent and translucent="true" be set on the main IonHeader. When using the large title and ion-buttons elements inside of ion-content, the ion-buttons elements should always be placed in the end slot. IonButtons elements that do not have collapse set will always be visible, regardless of collapsed state. This is useful for ensuring that your header buttons always appear next to an IonTitle element. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. In this example, notice that we have added two sets of IonButtons both with collapse set to true. When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.Įxport const LargeTitleExample : React. This will give the effect of the header changing color as you collapse the large title. You can change the background color of the toolbar with the standard title by setting the -background CSS variable on ion-toolbar. As a result, the background color that you see behind the standard title is actually the background color of ion-content. This means that the background color of the ion-toolbar that contains the collapsible large title should always match the background color of ion-content.īy default, the ion-toolbar that contains the standard title is hidden using opacity: 0 and is progressively shown as you collapse the large title by scrolling. The collapsible large title should appear seamless in relation to the rest of your content. When using collapsible large titles, it is required that fullscreen is set to true on ion-content and translucent is set to true on the main ion-header. Ion-buttons elements that do not have collapse set will always be visible, regardless of collapsed state. This is useful for ensuring that your header buttons always appear next to an ion-title element. ![]() In this example, notice that we have added two sets of ion-buttons both with collapse set to true.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |