Represents a command to be displayed in an app bar.
Syntax
<button data-win-control="WinJS.UI.AppBarCommand"></button>
var object = new WinJS.UI.AppBarCommand(element, options);
Members
The AppBarCommand object has these types of members:
Methods
The AppBarCommand object has these methods.
| Method | Description |
|---|---|
| addEventListener |
Registers an event handler for the specified event. |
| AppBarCommand |
Creates a new AppBarCommand object. |
| removeEventListener |
Removes an event handler that the addEventListener method registered. |
Properties
The AppBarCommand object has these properties.
| Property | Description |
|---|---|
|
Gets or sets a value that indicates whether the AppBarCommand is disabled. | |
|
Gets the DOM element that hosts the AppBarCommand. | |
|
Adds an extra CSS class during construction. | |
|
Gets or sets the Flyout object displayed by this command. The specified flyout is shown when the AppBarCommand's button is invoked. | |
|
Gets a value that indicates whether the AppBarCommand is hiding or in the process of becoming hidden. | |
|
Gets or sets the icon of the AppBarCommand. | |
|
Gets the element identifier (ID) of the command. | |
|
Gets or sets the label of the command. | |
|
Gets or sets the function to be invoked when the command is clicked. | |
|
Gets the section of the app bar that the command is in. | |
|
Gets or sets the selected state of a toggle button. | |
|
Gets or sets the tooltip of the command. | |
|
Gets the type of the command. |
Remarks
Styling the AppBarCommand
CSS classes
To customize the AppBarCommand, you can define your own styles for these CSS classes (defined by the Windows Library for JavaScript style sheets):
| CSS class | Description |
|---|---|
|
win-command |
Styles the entire AppBarCommand. |
|
win-commandicon |
Styles the icon box for the AppBarCommand. |
|
win-commandimage |
Styles the image for the AppBarCommand. |
|
win-commandring |
Styles the icon ring for the AppBarCommand. |
|
win-label |
Styles the label for the AppBarCommand. |
Note There are several CSS classes that are shared between multiple Windows Library for JavaScript controls. To limit your custom styles to a specific control, assign the control an ID or custom class name and use that as part of your style selector.
Examples
The following example shows how to create an app bar and Add, Remove, Delete, and Camera commands. For the full example, see HTML AppBar control sample.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" href="/css/create-appbar.css" /> <script src="/js/create-appbar.js"></script> <script src="/js/appbarsampleutils.js"></script> </head> <body> <div data-win-control="SdkSample.ScenarioInput"> <p> The AppBar is hidden by default and appears when users swipe a finger from the bottom edge of the screen. It covers the content of the application and can be dismissed by the user with an edge swipe or by interacting with the application.</p> <br /> <br /> </div> <div data-win-control="SdkSample.ScenarioOutput"> </div> <!-- Create AppBar --> <!-- BEGINTEMPLATE: Template code for an AppBar --> <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options=""> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}"> </button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',section:'global',tooltip:'Remove item'}"> </button> <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'global'}" /> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'global',tooltip:'Delete item'}"> </button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}"> </button> </div> <!-- ENDTEMPLATE --> </body> </html>
(function () { "use strict"; var page = WinJS.UI.Pages.define("/html/create-appbar.html", { ready: function (element, options) { document.getElementById("cmdAdd").addEventListener( "click", doClickAdd, false); document.getElementById("cmdRemove").addEventListener( "click", doClickRemove, false); document.getElementById("cmdDelete").addEventListener( "click", doClickDelete, false); document.getElementById("cmdCamera").addEventListener( "click", doClickCamera, false); WinJS.log && WinJS.log( "To show the bar, swipe up from the bottom of the screen, right-click, or press Windows Logo + z. To dismiss the bar, tap in the application, swipe, right-click, or press Windows Logo + z again.", "sample", "status"); }, unload: function () { AppBarSampleUtils.removeAppBars(); } }); // Command button functions function doClickAdd() { WinJS.log && WinJS.log("Add button pressed", "sample", "status"); } function doClickRemove() { WinJS.log && WinJS.log("Remove button pressed", "sample", "status"); } function doClickDelete() { WinJS.log && WinJS.log("Delete button pressed", "sample", "status"); } function doClickCamera() { WinJS.log && WinJS.log("Camera button pressed", "sample", "status"); } })();
Requirements
|
Minimum supported client | Windows 8 [Windows Store apps only] |
|---|---|
|
Minimum supported server | Windows Server 2012 [Windows Store apps only] |
|
Namespace |
WinJS.UI |
|
Library |
|
See also
Build date: 12/5/2012
