WinJS CSS classes for HTML controls

  • Article

The Windows Library for JavaScript provides CSS classes that you can use to style certain HTML controls.

Using WinJS classes for HTML controls

To use an HTML control class, set the control's class attribute to the name of the class. This example applies the win-backbutton class to a button.

Note  The win-backbutton class is not available on Windows Phone

 

<button class="win-backbutton"></button>

Using the class makes a button look like this:

You can assign multiple classes to an element; just separate class names with a space. The next example applies the win-ring and the win-large classes to the same element.

<progress class="win-ring win-large" />

Using the class makes a progress control look like this:

You can customize these classes by creating your own CSS that overrides them. Just be sure to include your CSS after you include the WinJS style sheets, or the WinJS style sheets will overwrite your customizations. This example adds a border to the win-large class.

/* Add a border to the win-large style. */
.win-large {
    border: 1px solid gray; 
}

Classes for the button control

Class Description

win-backbutton

Gives the button the appearance of a navigation button that lets you to navigate to the previous location.

Note  The win-backbutton class is not available on Windows Phone
 

 

Classes for the progress control

Class Description

win-error

Pauses a determinate progress bar and makes it display in the error style.

win-large

Makes the progress control large. Use this style for full-screen modal operations.

win-medium

Makes the progress control medium-sized. If you're displaying a progress ring next to 20pt text, use this class.

win-paused

Pauses the progress of a determinate progress bar.

win-ring

Makes the progress control display as an indeterminate progress ring. You must specify the width and height of the progress by setting the width and height properties or by using the win-medium or win-large class.

 

Classes for the range/slider control

Class Description

win-vertical

Makes the slider slide vertically instead of horizontally.

 

Quickstart: styling controls