Method render

core/src/components/header/header.tsx:208–236

()

  }

  render() {
    const { translucent, inheritedAttributes } = this;
    const mode = getIonMode(this);
    const collapse = this.collapse || 'none';
    const isCondensed = collapse === 'condense';

    // banner role must be at top level, so remove role if inside a menu
    const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);

    return (
      <Host
        role={roleType}
        class={{
          [mode]: true,

          // Used internally for styling
          [`header-${mode}`]: true,

          [`header-translucent`]: this.translucent,
          [`header-collapse-${collapse}`]: true,
          [`header-translucent-${mode}`]: this.translucent,
        }}
        {...inheritedAttributes}
      >
        {mode === 'ios' && translucent && <div class="header-background"></div>}
        <slot></slot>
      </Host>
    );
  }
}