Compartir a través de


AppBarCommand.extraClass property

Gets or sets additional Cascading Style Sheets (CSS) classes to apply to the element that hosts the AppBarCommand.

Syntax

<div 
  data-win-control="WinJS.UI.AppBarCommand" 
  data-win-options="{ extraClass : 'value'}">
</div>
var extraClass = appBarCommand.extraClass;
appBarCommand.extraClass = extraClass;

Property value

Type: String**

A String that contains one or more CSS classes to append to the element that hosts the AppBarCommand. When there are multiple class names, they are separated by one or more spaces.

Examples

Here, we first add the extraClass property (with class name) to an AppBarCommand button in our HTML and then create a rule specifying the selector and AppBarCommand class in the corresponding CSS file.

<button data-win-control="WinJS.UI.AppBarCommand"
                data-win-options="{id:'cmdToggle',
                type:'toggle',
                label:'Toggle',
                icon:'audio',
                extraClass: 'customButtonFont'}"></button>
button.customButtonFont .win-commandimage {
    font-family: "Wingdings";
}

Requirements

Minimum WinJS version

WinJS 1.0

Namespace

WinJS.UI

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