AppBarCommand.type property
.png)
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
Minimum WinJS version |
WinJS 1.0 |
Namespace |
WinJS.UI |
See also
Your first app - Part 3: PageControl objects and navigation
Navigating between pages (HTML)
Navigation and navigation history sample
Designers
Bottom app bar
Top app bar