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