ion-header
Header is a root component of a page that aligns itself to the top of the page. It is recommended to be used as a wrapper for one or more toolbars, but it can be used to wrap any element. When a toolbar is used inside of a header, the content will be adjusted so it is sized correctly, and the header will account for any device safe areas.
Basic Usage
Translucent Header
Headers can match the transparency found in native iOS applications by setting the translucent property. In order to see the content scrolling behind the header, the fullscreen property needs to be set on the content. This effect will only apply when the mode is "ios" and the device supports backdrop-filter.
Condensed Header
Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the collapse property to "condense" on the header inside of the content. This effect will only apply when the mode is "ios".
Fade Header
Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the collapse property on the header to "fade". When the page is first loaded, the background and border on the header will be hidden. As the content is scrolled, the header will fade back in. This effect will only apply when the mode is "ios".
This functionality can be combined with a Condensed Header as well. The collapse property with a value set to "fade" should be on the header outside of the content.
Usage with Virtual Scroll
A fade header requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the .ion-content-scroll-host class needs to be added to the element responsible for scrolling.
Borders
In "md" mode, the header will have a box-shadow on the bottom. In "ios" mode, it will receive a border on the bottom. These can be removed by adding the .ion-no-border class to the header.
Properties
collapse
| Description | Describes the scroll effect that will be applied to the header. Only applies in iOS mode. Typically used for Collapsible Large Titles |
| Attribute | collapse |
| Type | "condense" ｜ "fade" ｜ undefined |
| Default | undefined |
mode
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
translucent
| Description | If true, the header will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.Note: In order to scroll content behind the header, the fullscreen attribute needs to be set on the content. |
| Attribute | translucent |
| Type | boolean |
| Default | false |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.