WinJS.UI.NavBarContainer object

Article
01/26/2017

[NavBarContainer is no longer available for use as of Windows Library for JavaScript (WinJS) 4.2. Instead, use SplitViewCommand. ]

Container for a group of NavBarCommand objects in a NavBar.

Explore this functionality in more depth as part of our App features, start to finish series: Flat navigation, start to finish (HTML) and Hierarchical navigation, start to finish (HTML)

Syntax

<div 
    data-win-control="WinJS.UI.NavBarContainer">
</div>

var object = new WinJS.UI.NavBarContainer();

Members

The NavBarContainer object has these types of members:

Constructors
Events
Methods
Properties

Constructors

The NavBarContainer object has these constructors.

Constructor	Description
NavBarContainer	Creates a new NavBarContainer.

Events

The NavBarContainer object has these events.

Event	Description
oninvoked	Occurs when a child NavBarCommand object's click event fires.
onsplittoggle	Occurs when the splitButton of a child NavBarCommand is opened or closed. A split button is toggled when the user navigates to another page or opens another split button.

Methods

The NavBarContainer object has these methods.

Method	Description
addEventListener	Registers an event handler for the specified event.
dispatchEvent	Raises an event of the specified type and with additional properties.
dispose	Releases resources held by this NavBarContainer. Call this method when the NavBarContainer is no longer needed. After calling this method, the NavBarCommand becomes unusable.
forceLayout	Forces the NavBarContainer to update its layout. Use this function when making the NavBarContainer visible again after you set its style.display property to "none".
removeEventListener	Removes an event handler registered through the addEventListener method.

Properties

The NavBarContainer object has these properties.

Property	Access type	Description
currentIndex	Read/write	Gets or sets the index of the current (focused) item.
data	Read/write	Gets or sets a WinJS.Binding.List that generates NavBarCommand objects.
element	Read/write	Gets the DOM element that hosts the NavBarContainer.
fixedSize	Read/write	Gets or sets a value that specifies whether NavBarCommand objects in this container use a fixed or dynamic width.
layout	Read/write	Gets or sets a value that specifies whether the NavBarContainer has a horizontal or vertical layout.
maxRows	Read/write	Gets or sets a value that specifies how many rows of navigation commands to display on a page.
template	Read/write	Gets or sets the WinJS.Binding.Template or templating function that creates the DOM elements for each item in the data source. Each item can contain multiple elements, but it must have a single root element.

Remarks

CSS classes

To customize the NavBarContainer, you can define your own styles for these Cascading Style Sheets (CSS) classes (defined by the Windows Library for JavaScript style sheets):

CSS class	Description
win-navbarcontainer	Styles the entire NavBarContainer.
win-navbarcontainer-horizontal	Styles the NavBarContainer when it has a horizontal layout.
win-navbarcontainer-navarrow	Styles both page arrows in the page indicator box.
win-navbarcontainer-navleft	Styles the left page arrow.
win-navbarcontainer-navright	Styles the right page arrow.
win-navbarcontainer-pageindicator-box	Styles the page indicator box.
win-navbarcontainer-pageindicator-current	Styles the page indicator box's current page indicator.
win-navbarcontainer-surface	Styles the area that contains NavBarCommand objects.
win-navbarcontainer-vertical	Styles a NavBarContainer when has a vertical layout.
win-navbarcontainer-viewport	Styles the viewport, which includes the NavBarContainer and the scrollbar.

Requirements

Minimum supported client	Windows 8.1 [Windows Store apps only]
Minimum supported server	Windows Server 2012 R2 [Windows Store apps only]
Minimum supported phone	None supported
Namespace	WinJS.UI
Library	Ui.js

Share via