split-view

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

About Split View

Accessibility

The list component of the Split View consists of an ARIA Listbox, and as such must abide 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"

Base

<div class="demo-only" style="display:flex;width:20rem;height:37.5rem">
  <div class="slds-split-view_container slds-is-open">
    <button class="slds-button slds-button_icon slds-button_icon slds-split-view__toggle-button slds-is-open" aria-controls="split-view-id" aria-expanded="true" title="Close Split View">

States

Selected Item

<div class="demo-only" style="display:flex;width:20rem;height:37.5rem">
  <div class="slds-split-view_container slds-is-open">
    <button class="slds-button slds-button_icon slds-button_icon slds-split-view__toggle-button slds-is-open" aria-controls="split-view-id" aria-expanded="true" title="Close Split View">

Overflow

<div class="demo-only" style="display:flex;width:20rem;height:37.5rem">
  <div class="slds-split-view_container slds-is-open">
    <button class="slds-button slds-button_icon slds-button_icon slds-split-view__toggle-button slds-is-open" aria-controls="split-view-id" aria-expanded="true" title="Close Split View">

Unread Items

<div class="demo-only" style="display:flex;width:20rem;height:37.5rem">
  <div class="slds-split-view_container slds-is-open">
    <button class="slds-button slds-button_icon slds-button_icon slds-split-view__toggle-button slds-is-open" aria-controls="split-view-id" aria-expanded="true" title="Close Split View">

Collapsed Panel

<div class="demo-only" style="display:flex;width:20rem;height:37.5rem">
  <div class="slds-split-view_container slds-is-closed">
    <button class="slds-button slds-button_icon slds-button_icon slds-split-view__toggle-button slds-is-closed" aria-controls="split-view-id" aria-expanded="false" title="Open Split View">