AppBarCommand.type property

Gets or sets the type of the command.

Syntax

<element 
  data-win-control="WinJS.UI.AppBarCommand"
  data-win-options="{type: value}">
</element>

var type = appBarCommand.type;
appBarCommand.type = type;

Property value

Type: String**

The command can be one of the following types:

• "button"

  This is the default value for the type. It defines a standard button and can only be applied to a <button> element.

• "toggle"

  This creates a button that can be selected or de-selected. When the button is selected, the colors of the icon of the AppBarCommand are reversed (black to white and white to black, for example). Only a <button> element can host a toggle AppBarCommand.

• "flyout"

  This creates a button that reveals an HTML fragment adjacent to it (a flyout). To create a flyout AppBarCommand, you need to specify both the type as "flyout" and set its flyout property. The flyout property must reference a defined Flyout control. Only a <button> element can host a flyout AppBarCommand.

• "separator"

  This creates a horizontal line in the AppBar, to create a visual separation between other AppBarCommand controls. Only a <hr/> element can host a separator AppBarCommand.

• "content"

  This creates an AppBarCommand that can host other HTML markup inside of it, including text, <input> tags, and even a subset of WinJS controls. Only a <div> element can host a content AppBarCommand.

Remarks

For an app bar toggle command to work with accessibility tools like Narrator, you must attach an onPropertyChange event handler by using the attachEvent method. You must use the detachEvent method to remove the event handler.

Requirements

See also

AppBarCommand

AppBar

AppBarIcon

BackButton

NavBar

Your first app - Part 3: PageControl objects and navigation

Navigating between pages (HTML)

Adding app bars

Adding nav bars

HTML AppBar control sample

HTML NavBar control sample

Navigation and navigation history sample

Designers

Command patterns

Navigation patterns

Guidelines for app bars

Bottom app bar

Top app bar