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

HTML and Styles

We do not recommend using Stack View as a static component since the DOM structure is architected to enable the Stack View's Javascript behavior and animation handling. If you cannot use the Angular component, these are the elements and classes you will need to use to benefit from Clarity's styles, without the animations.

Basic Stack View Component

Stack View With Editing in a Modal

Lazy Loading of Children

This example shows how to leverage the various inputs and outputs provided by <clr-stack-block> to make blocks expandable even though their children are loaded on demand from the server.

Options for <clr-stack-block>
Input/Output Values Default Effect
[clrSbExpandable]
Type: Boolean
Default:
true if <clr-stack-block> children are detected
true, false true if and only if <clr-stack-block> children are detected Makes the stack block expandable, even if it doesn’t contain any nested <clr-stack-block>
[clrSbExpanded]
Type: Boolean
Default: false
true, false false Two-way binding on the state of the block: expanded or collapsed. Has no effect if the block is not expandable.
[clrSbNotifyChange]
Type: Boolean
Default: false
true, false false Shows an updated indicator on the stack block, when set to true.
[clrStackViewLevel]
Type: Number
Default: None
None aria-level Defines the hierarchical level of an element within a structure.
[clrStackViewSetsize]
Type: Number
Default: None
None aria-setsize Defines the number of items in the current set of listitems.
[clrStackViewPosinset]
Type: Number
Default: None
None aria-posinset Defines an element's number or position in the current set of listitems.

Usage

Stack views are designed for use in the main content area and modals. 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.

Enabling Value Editing

In this pattern, the component includes 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.

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.

Accessibility

To provide better accessibility to the StackView some attributes have to be set manualy to .stack-block-label element in the static form or use one of the provided inputs to ClrStackBlock.