Split View - Lightning Design System

Split view is used to navigate between records in a list while staying on the same screen.

BaseDesktop OnlyRequires ui:scrollerWrapper

This is a protototype - the code has been omitted

The list component of the Split View consists of an ARIA Listbox, and as such must obied by the following rules:

Each option can only be a single actionable element. No child actions are allowed
Must implement the keyboard interaction as described by the ARIA Authoring Practices
For each open workspace tab, the corresponding option should be set to aria-selected="true"

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-is-closed`
Summary	Modifier to rotate the left arrow icon on close
Restrict	`.slds-split-view_container, .slds-split-view__toggle-button`
Modifier	True

Selector	`.slds-is-open`
Summary	Toggles open/close state of split view container
Restrict	`.slds-split-view_container, .slds-split-view__toggle-button`
Modifier	True

Selector	`.slds-split-view`
Summary
Restrict	`.slds-split-view_container article`

Selector	`.slds-split-view__list-item`
Summary	Each row of the list of split view
Restrict	`.slds-split-view li`

Selector	`.slds-indicator_unread`
Summary	Unread states
Restrict	`.slds-split-view__list-item abbr`

Selector	`.slds-split-view__list-item-action`
Summary	Actionable row of split view
Restrict	`.slds-split-view__list-item a`

Selector	`.slds-split-view__toggle-button`
Summary	Expand/Collapse button to toggle open/close state of split view
Restrict	`.slds-split-view_container button`

Selector	`.slds-is-closed`
Summary	Modifier to rotate the left arrow icon on close
Restrict	`.slds-split-view_container, .slds-split-view__toggle-button`
Modifier	True

Selector	`.slds-is-open`
Summary	Toggles open/close state of split view container
Restrict	`.slds-split-view_container, .slds-split-view__toggle-button`
Modifier	True