Header

Overview

The header component displays at the top of your application.

It includes:

• A left section that displays the hamburger button and your app title
• A search box in the middle
• A right section for displaying admin options and any environmental context.

Development

Web component development

Component reference

rui-header

rui-header-left

rui-header-right

Implementation

Begin by importing the rui-header module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-header/rui-header-imports';

Then define the header within your main-header component.

• Use a rui-header tag as the outermost element in that view.
• Within the rui-header tag:
  • Nest a rui-header-left tag to contain elements on the left side of the header.
    • The left side of the header automatically displays the hamburger button; you don’t have to do anything to get that.
    • The left side also typically displays your application name.
  • Nest a rui-header-right tag to contain elements on the right side of the header.
    • The right side of the header is typically used to display header buttons, header dropdowns, and header mega menus.

<!-- Header: Defines application name and admin options that display in header -->
<rui-header [displaySearch]="true" searchWidth="50%" searchWatermarkText="SEARCH" (rui-header-search)="search($event)">

    <!-- Left side -->
    <rui-header-left [displayBackButton]="displayBackButton" (rui-back-button-click)="backButtonClicked()">

        <!-- Left side content -->

    </rui-header-left>

    <!-- Right side -->
    <rui-header-right>

        <!-- Right side content -->

    </rui-header-right>

</rui-header>

Angular wrapper development

Wrapper reference

jha-header

jha-header-left

jha-header-right

Implementation

Begin by importing the JhaHeaderModule into your application.

// import into app.module
import { JhaHeaderModule } from '@jkhy/responsive-ui-angular/jha-header';

@NgModule({
    imports: [JhaHeaderModule,...]
})

export class AppModule(){}

Then define the header within your main-header component.

• Use a jha-header tag as the outermost element in that view.
• Within the jha-header tag:
  • Nest a jha-header-left tag to contain elements on the left side of the header.
    • The left side of the header automatically displays the hamburger button; you don’t have to do anything to get that.
    • The left side also typically displays your application name.
  • Nest a jha-header-right tag to contain elements on the right side of the header.
    • The right side of the header is typically used to display header buttons, header dropdowns, and header mega menus.

<!-- Header: Defines application name and admin options that display in header -->
<jha-header [jhaIsHidden]="hideHeader" jhaDisplaySearch="true" jhaSearchWidth="50%"
 jhaSearchWatermarkText="SEARCH" (jhaSearch)="search($event)">

    <!-- Left side -->
    <jha-header-left [jhaDisplayBackButton]="displayBackButton" (jhaBackButtonClicked)="backButtonClicked()">

        <!-- Left side content -->

    </jha-header-left>

    <!-- Right side -->
    <jha-header-right>

        <!-- Right side content -->

    </jha-header-right>

</jha-header>

Dynamically hiding and showing header elements

You can dynamically hide and show elements in the header, based on two different kinds of criteria:

• Screen Width: Part of responsive layout is adjusting screen elements accordingly to fit the screen width.
  • Use CSS media query classes to cover application-specific breakpoints.
  • For example, say the elements in the left side of your header start to collide with elements in the right side of your header at 876 pixels. You can add your own application-specific classes that define one layout at 877 pixels and define a different layout at 876 pixels and less.
• Contextual Data: Sometimes you need to hide or display elements based on contextual criteria, such as whether the user is logged in yet or whether the user has access to certain features in the app.
  • In Angular, use the *ngIf directive to conditionally display elements based on data in your controller.

Component playground

Design

Figma design

Adobe XD design