The One UI header comprises a dark-grey banner which can contain identifying titles, settings and navigation options, together with a blue banner which is either a thin blue "lip" or may optionally be wider and incorporate further contextual titles and actions. The header is provided by a single widget, idx.oneui.Header, which can be configured with various properties in order to select the desired features.
Because of the many optional components, there is a great variety of header presentations that can be produced, and some of those are shown in the Detailed examples tab, grouped into five main "templates". This page divides the components into the main functional features and explains how each can be used.
These examples use declarative HTML because it is more compact and easier to read. However, they could equally well have been coded in JavaScript using the APIs for the various widgets.
The header should normally be the first item in the content area of a page. It will automatically fill the available area. A simple header can be created by supplying just a page, site or application title with the primaryTitle property.
<body class="oneui"> <div data-dojo-type="idx.oneui.Header" data-dojo-props="primaryTitle: 'A simple header example'"></div> ...
By default, the header uses a "fluid" layout that fills the entire available width, with the title at the left edge and the IBM logo at the right edge. By setting layoutType:'fixed' the header will work to a fixed width: the header bar will still extend across all the available area, but the header contents will fit to the fixed width.
By default, the header shows a narrow black bar as the primary banner. By setting primaryBannerType:'thick' the header will use a thicker black banner.
'Settings' actions and 'Help' actions can be included by using the settings and help properties. An idx.oneui.Menu may be supplied, in which case it will be shown as a drop-down menu from the appropriate affordance. Alternatively, a single dijit.MenuItem may be supplied, in which case it will be presented as a single clickable action.
User identification (name and/or picture) and associated actions (sign in, sign out, profile settings) can be included by using the user property. This contains several fields, all optional:
A secondary banner will be included in the header if a secondary title is supplied, or if any context-level features are requested (see next section). The secondary banner can be blue, grey or white, and sits just below the primary black banner.
A simple secondary title can be supplied with the secondaryTitle property. Further context may optionally be added with the secondarySubtitle property or with the additionalContext property, which add further details (in a smaller font size and less bold presentation) after the main secondary title.
<body class="oneui"> ...
By default, the header uses a "fluid" layout that fills the entire available width, with the title at the left edge and the IBM logo at the right edge. By setting layoutType:'fixed' the header will work to a fixed width: the header bar will still extend across all the available area, but the header contents will fit to the fixed width.
By default, the header shows a narrow black bar as the primary banner. By setting primaryBannerType:'thick' the header will use a thicker black banner.