WinJS.UI.SplitViewPaneToggle object
.png)
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 |
|---|---|---|
Read-only |
Gets the DOM element that hosts the SplitViewPaneToggle control. |
|
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.
.png)
The SplitViewPaneToggle control has two use modes depending on whether or not the app has provided a SplitView control.
1. SplitView is provided via the splitView property (recommended)
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 |