A stack view displays key/value pairs, which users can expand to show more detail.

Usage

Use a stack view when you want to:

• Display related key/value pairs, for example, an object’s settings.
• Progressively disclose data. This is useful when the set of key/value pairs is large or you want to enable users to reveal more complex or less frequently used data as necessary.

Anatomy

Labels

Consider following points for stack view labels:

• Provide terse labels that let users know what is under the label. Try to keep the label to one line.
• Use noun phrases, sentence-style capitalization, and no ending punctuation.
• Avoid using icons.

Highlights and Horizontal lines

The stack view highlight color (#DDDDDD) differs from the usual Clarity highlight color to make it more distinct. Expanded sections have a lighter background color to make it easier to understand the hierarchy.

Horizontal lines in the stack editor are for readability–they help users quickly discern the relationship between columns.

Behavior

Enabling Value Editing

StackView has an Edit button on the top right, which on click opens an editable stack view in a modal. This design prevents users from accidentally altering a value in the main content area. Common editing controls include input fields, select boxes, checkboxes, and radio buttons.

Placement

Stack views are designed for use in the main content area and modals.

Code & Examples

Basic Stack View

<clr-stack-view>
  <clr-stack-header>Angular stack view</clr-stack-header>

  <clr-stack-block [clrStackViewLevel]="1" [clrStackViewSetsize]="3" [clrStackViewPosinset]="1">
    <clr-stack-label>Label 1</clr-stack-label>
    <clr-stack-content>Content 1</clr-stack-content>
  </clr-stack-block>

  <clr-stack-block [clrStackViewLevel]="1" [clrStackViewSetsize]="3" [clrStackViewPosinset]="2">
    <clr-stack-label>Label 2</clr-stack-label>
    <clr-stack-content>Content 2</clr-stack-content>
    <clr-stack-block [clrStackViewLevel]="2" [clrStackViewSetsize]="3" [clrStackViewPosinset]="1">
      <clr-stack-label>Sub-label 1</clr-stack-label>
      <clr-stack-content>Sub-content 1</clr-stack-content>
    </clr-stack-block>
    <clr-stack-block [clrStackViewLevel]="2" [clrStackViewSetsize]="3" [clrStackViewPosinset]="2">
      <clr-stack-label>Sub-label 2</clr-stack-label>
      <clr-stack-content>Sub-content 2</clr-stack-content>
    </clr-stack-block>
    <clr-stack-block [clrStackViewLevel]="2" [clrStackViewSetsize]="3" [clrStackViewPosinset]="3">
      <clr-stack-label>Sub-label 3</clr-stack-label>
      <clr-stack-content>Sub-content 3</clr-stack-content>
    </clr-stack-block>
  </clr-stack-block>

  <clr-stack-block [clrStackViewLevel]="1" [clrStackViewSetsize]="3" [clrStackViewPosinset]="3">
    <clr-stack-label>Label 3</clr-stack-label>
    <clr-stack-content>Content 3</clr-stack-content>
    <clr-stack-block>
      <clr-stack-label>Sub-label 4</clr-stack-label>
      <clr-stack-content>Sub-content 4</clr-stack-content>
    </clr-stack-block>
    <clr-stack-block>
      <clr-stack-label>Sub-label 5</clr-stack-label>
      <clr-stack-content>Sub-content 5</clr-stack-content>
    </clr-stack-block>
  </clr-stack-block>
</clr-stack-view>

Stack View With Editing in a Modal

<clr-stack-view>
  <clr-stack-header>
    Modal editor
    <button class="stack-action btn btn-sm btn-link" (click)="editModal = true" type="button">Edit</button>
  </clr-stack-header>

  <clr-stack-block
    *ngFor="let block of blocks; let i = index"
    [clrStackViewLevel]="1"
    [clrStackViewSetsize]="blocks.length"
    [clrStackViewPosinset]="i"
  >
    <clr-stack-label>{{block.title}}</clr-stack-label>
    <clr-stack-content>{{block.content}}</clr-stack-content>

    <clr-stack-block
      *ngFor="let child of block.children; let j = index"
      [clrStackViewLevel]="2"
      [clrStackViewSetsize]="block.children.length"
      [clrStackViewPosinset]="j"
    >
      <clr-stack-label>{{child.title}}</clr-stack-label>
      <clr-stack-content>{{child.content}}</clr-stack-content>
    </clr-stack-block>
  </clr-stack-block>
</clr-stack-view>

<clr-modal [(clrModalOpen)]="editModal">
  <h3 class="modal-title">Edit mode</h3>
  <div class="modal-body">
    <clr-stack-view>
      <clr-stack-block
        *ngFor="let block of blocks; let blockIndex = index"
        [clrSbNotifyChange]="block.content!=='Content '+ (blockIndex)"
        [clrStackViewLevel]="1"
        [clrStackViewSetsize]="blocks.length"
        [clrStackViewPosinset]="blockIndex + 1"
      >
        <clr-stack-label>{{block.title}}</clr-stack-label>
        <clr-stack-content>
          <input type="text" [(ngModel)]="block.content" class="clr-input" />
        </clr-stack-content>

        <clr-stack-block
          *ngFor="let child of block.children; let blockChildIndex = index"
          [clrSbNotifyChange]="child.content!=='Sub-content '+ (blockChildIndex)"
          [clrStackViewLevel]="2"
          [clrStackViewSetsize]="block.children.length"
          [clrStackViewPosinset]="blockChildIndex + 1"
        >
          <clr-stack-label>{{child.title}}</clr-stack-label>
          <clr-stack-content>
            <input type="text" [(ngModel)]="child.content" class="clr-input" />
          </clr-stack-content>
        </clr-stack-block>
      </clr-stack-block>
    </clr-stack-view>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="editModal = false">Done</button>
  </div>
</clr-modal>

Lazy Loading of Children

<clr-stack-view>
  <clr-stack-header>
    Lazily loaded children
    <button class="stack-action btn btn-sm btn-link" (click)="resetChildren()" type="button">Reset</button>
  </clr-stack-header>

  <clr-stack-block
    #lazyBlock
    [clrSbExpandable]="true"
    (clrSbExpandedChange)="fetchChildren()"
    [clrStackViewLevel]="1"
    [clrStackViewSetsize]="2"
    [clrStackViewPosinset]="1"
  >
    <clr-stack-label>Label 1</clr-stack-label>
    <clr-stack-content>Content 1</clr-stack-content>

    <clr-stack-block
      *ngIf="children.length == 0"
      [clrStackViewLevel]="2"
      [clrStackViewSetsize]="0"
      [clrStackViewPosinset]="1"
    >
      <clr-spinner clrAssertive clrInline>
        Loading...
      </clr-spinner>
    </clr-stack-block>

    <clr-stack-block
      *ngFor="let child of children; let i = index"
      [clrStackViewLevel]="2"
      [clrStackViewSetsize]="children.length"
      [clrStackViewPosinset]="i + 1"
    >
      <clr-stack-label>{{child.title}}</clr-stack-label>
      <clr-stack-content>{{child.content}}</clr-stack-content>
    </clr-stack-block>
  </clr-stack-block>

  <clr-stack-block [clrStackViewLevel]="1" [clrStackViewSetsize]="2" [clrStackViewPosinset]="2">
    <clr-stack-label>Label 2</clr-stack-label>
    <clr-stack-content>Content 2</clr-stack-content>
  </clr-stack-block>
</clr-stack-view>