Working with Header and Footer Components

1. Using IonHeader Component

Property	Values	Description
translucent	`false`	Applies a translucent background to the header
collapse	`false`	Collapses the header when scrolling content
mode	`ios`, `md`	Sets the mode of the header (iOS or Material Design)

Example: Basic IonHeader Usage

<ion-header>
  <ion-toolbar>
    <ion-title>My App</ion-title>
  </ion-toolbar>
</ion-header>

Example: Header with Translucent Effect

<ion-header translucent>
  <ion-toolbar>
    <ion-title>Translucent Header</ion-title>
  </ion-toolbar>
</ion-header>

2. Using IonToolbar Component

Property	Values	Description
color	`primary`, `secondary`, `tertiary`, `success`, `warning`, `danger`, `light`, `medium`, `dark`	Sets the color of the toolbar
mode	`ios`, `md`	Mode of the toolbar (iOS or Material Design)
translucent	`true`, `false`	Makes the toolbar translucent

<ion-toolbar>
  <ion-title>My App</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-button>Menu</ion-button>
  </ion-buttons>
  <ion-title>Settings</ion-title>
  <ion-buttons slot="end">
    <ion-button>Save</ion-button>
  </ion-buttons>
</ion-toolbar>

Property	Values	Description
title	`string`	Sets the title text of the toolbar
color	`primary \| secondary \| success \| warning \| danger \| light \| dark`	Applies a color theme to the toolbar

<ion-toolbar color="primary">
  <ion-title>My App</ion-title>
</ion-toolbar>

Note: The ion-title component must be placed inside an ion-toolbar to render correctly.

Property	Description	Default	Notes
icon	Icon to display in the button	None	Uses Ionicons library
iconOnly	Displays only the icon, no text	false	Useful for compact toolbars
size	Size of the button	medium	Can be small, medium, or large
fill	Button fill style	solid	Can be solid, outline, or clear
color	Color of the button	primary	Uses Ionic's color system

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-button icon-only="">
      <ion-icon name="menu"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>My App</ion-title>
  <ion-buttons slot="end">
    <ion-button>
      <ion-icon name="search"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="end">
    <ion-button>
      <ion-icon name="cart"></ion-icon>
      <ion-badge color="danger">3</ion-badge>
    </ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="end">
    <ion-button>
      <ion-icon name="more"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>

<!-- In component -->
<ion-popover trigger="more">
  <ion-content>
    <ion-list>
      <ion-item><ion-label>Settings</ion-label></ion-item>
      <ion-item><ion-label>Profile</ion-label></ion-item>
    </ion-list>
  </ion-content>
</ion-popover>

Note: Toolbar buttons must be placed inside <ion-buttons> elements with appropriate slot attributes (start, end, or secondary).

5. Using IonFooter Component

Property	Values	Description
collapse	`false`, `true`	Collapses the footer when the content is scrolled
sticky	`false`, `true`	Makes the footer stick to the bottom of the content area

Example: Basic IonFooter Usage

<ion-footer>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button>Home</ion-button>
    </ion-buttons>
    <ion-title>Footer Title</ion-title>
  </ion-toolbar>
</ion-footer>

Example: IonFooter with Collapsible Behavior

<ion-content>
  <!-- Content here -->
</ion-content>

<ion-footer collapse="true">
  <ion-toolbar>
    <ion-title>Collapsible Footer</ion-title>
  </ion-toolbar>
</ion-footer>

6. Creating Collapsible Headers

Property	Description	Default	Notes
collapsible	Enables or disables collapsible behavior	`false`	Set to `true` to enable collapsing
collapsed	Initial state of the header	`false`	When `true`, header starts collapsed
toggleIcon	Custom icon for toggle button	`null`	Accepts any valid icon name or component

Example: Basic Collapsible Header

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>App Title</ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-title>Collapsible Section</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="toggleHeader()">
        <ion-icon name="chevron-down"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Example: Collapsible Header with State

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  template: `
    <ion-header [collapsible]="true">
      <ion-toolbar>
        <ion-title>Collapsible Header</ion-title>
      </ion-toolbar>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Content Area</ion-title>
      </ion-toolbar>
    </ion-header>
  `
})
export class HeaderComponent {
  collapsed = false;

  toggleHeader() {
    this.collapsed = !this.collapsed;
  }
}

Note: The collapsible property requires Ionic 7.0+ to function properly.

Warning: Ensure that the collapsible header does not interfere with navigation or accessibility features.

7. Implementing Fade Effect

Fade effects in Ionic header and footer components can be implemented using CSS transitions and JavaScript to control the visibility or opacity of elements.

Property	Description	Values	Notes
ion-header	Container for header elements	`<ion-header>`	Used to define the header area in Ionic
ion-footer	Container for footer elements	`<ion-footer>`	Used to define the footer area in Ionic
fade	Applies fade effect to header/footer	`true`, `false`	Can be set via property or CSS class

Example: Fade Effect on Header

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Fade Example</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="fade-content">
    <p>Content with fade effect</p>
  </div>
</ion-content>

Example: CSS Fade Transition

.fade-header {
  transition: opacity 0.3s ease-in-out;
}

.fade-header.fade-out {
  opacity: 0;
}

Note: The translucent property in ion-toolbar can be used to create a semi-transparent background that enhances the fade effect.

Workflow: Implementing Fade Effect

Add ion-header or ion-footer to your component
Apply translucent or custom CSS classes for styling
Use JavaScript to toggle a fade class on scroll or interaction
Define CSS transitions for smooth fade effect

8. Using Large Title

Property	Values	Description
largeTitle	`true` \| `false`	Enables or disables the large title style in the header.
largeTitleShadow	`true` \| `false`	Adds a shadow effect to the large title.

Example: Using Large Title in Ionic Header

<ion-header>
  <ion-toolbar>
    <ion-title largeTitle="true">My App</ion-title>
  </ion-toolbar>
</ion-header>

Note: The largeTitle property is supported in Ionic 6+ and requires the ion-title component to be inside an ion-toolbar.

9. Adding Subheader

Subheaders in Ionic are used to group content within a page, often appearing below the main header. They can be added using the <ion-subheader> component.

Property	Description	Default Value
color	Sets the color of the subheader (e.g., primary, secondary)	primary
translucent	Applies a translucent effect to the subheader	false

Example: Basic Subheader

<ion-header>
  <ion-toolbar>
    <ion-title>My App</ion-title>
  </ion-toolbar>
</ion-header>

<ion-subheader>
  <ion-toolbar>
    <ion-title>Section Header</ion-title>
  </ion-toolbar>
</ion-subheader>

<ion-content>
  <p>Content goes here</p>
</ion-content>

Example: Subheader with Color

<ion-subheader color="secondary">
  <ion-toolbar>
    <ion-title>Secondary Subheader</ion-title>
  </ion-toolbar>
</ion-subheader>

10. Styling Header Appearance

Property	Values	Description
--background	`color`	Background color of the header
--color	`color`	Text color of the header content
--border-color	`color`	Border color of the header
--border-width	`length`	Width of the header border
--border-radius	`length`	Border radius of the header
--min-height	`length`	Minimum height of the header

Example: Custom Header with Styling

<ion-header style="--background: #3880ff; --color: white;">
  <ion-toolbar>
    <ion-title>Styled Header</ion-title>
  </ion-toolbar>
</ion-header>

Note: The --background and --color CSS variables can be used to customize the appearance of the header and its content.

Working with Header and Footer Components

1. Using IonHeader Component

Example: Basic IonHeader Usage

Example: Header with Translucent Effect

2. Using IonToolbar Component

Example: Basic Toolbar Usage

Example: Toolbar with Icons

3. Adding Toolbar Title

Example: Setting Toolbar Title

4. Using Toolbar Buttons

Example: Basic Toolbar Button

Example: Toolbar Button with Badge

Example: Toolbar Button with Dropdown