WinJS.UI.SplitViewPaneToggle object

  • Article

Displays a button which is used for opening and closing a SplitView's pane.

Syntax

<div data-win-control="WinJS.UI.SplitViewPaneToggle" />

var object = new WinJS.UI.SplitViewPaneToggle();

Members

The SplitViewPaneToggle object has these types of members:

  • Constructors
  • Events
  • Methods
  • Properties

Constructors

The SplitViewPaneToggle object has these constructors.

Constructor Description
SplitViewPaneToggle

Creates a new SplitViewPaneToggle.

 

Events

The SplitViewPaneToggle object has these events.

Event Description
oninvoked

Raised when the SplitViewPaneToggle is invoked.

 

Methods

The SplitViewPaneToggle object has these methods.

Method Description
addEventListener

Registers an event handler for the specified event.
dispatchEvent

Raises an event of the specified type and with additional properties.
dispose

Disposes this control.
removeEventListener

Removes an event handler that the addEventListener method registered.

 

Properties

The SplitViewPaneToggle object has these properties.

Property Access type Description

element

Read-only

Gets the DOM element that hosts the SplitViewPaneToggle control.

splitView

Read/write

Gets or sets the DOM element of the SplitView that is associated with the SplitViewPaneToggle control. When the SplitViewPaneToggle is invoked, it'll toggle this SplitView's pane.

 

Remarks

The SplitView control is not required to be used with a "Hamburger" button, but that’s the most common and intended use case. The SplitViewPaneToggle provides that "Hamburger" control.

The SplitViewPaneToggle control has two use modes depending on whether or not the app has provided a SplitView control.

SplitViewPaneToggle keeps the SplitView, the aria-controls attribute, and the aria-expands attribute in sync. In this use case, apps typically won't listen to the invoked event, although it's still fired. This is the recommended usage.

2. SplitView not provided

SplitViewPaneToggle provides button visuals and fires the invoked event. The app intends to do everything else:

  • Set the SplitViewPaneToggle's aria-controls attribute
  • Keep the SplitViewPaneToggle, the SplitViewPaneToggle's aria-expanded attribute, and the SplitView in sync by:
    • Handling the SplitViewPaneToggle’s invoked event
    • Handling the SplitViewPaneToggle’s aria-expanded attribute being mutated (e.g. by screen readers)
    • Handling the SplitView opening and closing

Known limitations

SplitViewPaneToggle is required to be instantiated on a button element. Instantiating on any other element will throw an exception.

Styling the SplitViewPaneToggle

CSS classes

To customize the SplitViewPaneToggle, you can define your own styles for these CSS classes (defined by the Windows Library for JavaScript style sheets):

CSS class Description

win-splitviewpanetoggle

Styles the SplitViewPaneToggle button layout.

 

Note  There are several CSS classes that are shared between multiple WinJS 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.

 

Requirements

Minimum WinJS version

WinJS 4.0

Namespace

WinJS.UI

See also

SplitView