Split View

Split View

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

Base

Preview

No content has been added for this component.

No content has been added for this component.

This is a protototype - the code has been omitted

About Split View

Accessibility

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"

Overview of CSS Classes

Selector.slds-split-view_container
Summary

Wrapper of split view

Restrictdiv
VariantTrue
Selector.slds-is-closed
Summary

Modifier to rotate the left arrow icon on close

Restrict.slds-split-view_container, .slds-split-view__toggle-button
ModifierTrue
Selector.slds-is-open
Summary

Toggles open/close state of split view container

Restrict.slds-split-view_container, .slds-split-view__toggle-button
ModifierTrue
Selector.slds-split-view
Summary
Restrict.slds-split-view_container article
Selector.slds-split-view__header
Summary

Header of split view

Contains elements such as the list filter, view switcher and refresh button

Restrict.slds-split-view header
Selector.slds-split-view__list-header
Summary

Column headers

Restrict.slds-split-view div
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

Positions the dot indicator to the left of the content

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