Disclosure - Docs

A Disclosure is a vertically stacked set of interactive headings containing a title, content snippet, or thumbnail representing a section of content.

Viewmodels

controlArtboardartboard

Determines which artboard is used for the arrow.

labelArtboardartboard

Determines which artboard is used for the Disclosure's title content.

subtitleArtboardartboard

Determines which artboard is used for the Disclosure's subtitle content.

contentArtboardartboard

Determines which artboard is used for the Disclosure's body content.

expandedboolean

Determines whether the Disclosure item has been expanded.

collapsibleboolean

Determines whether the Disclosure item can be closed after it has been expanded.

labelstring

Specifies the localized strings that identifies the disclosure item.

subtitlestring

Specifies the localized strings that identifies the subtitle content.

bodystring

Specifies the localized strings that identifies the body content.

hoverboolean

Indicates when the pointer overlaps with the Disclosure.

directionenum

Determines the Disclosure's left-to-right alignment.

Root - The Root of the component. All pointer functionality targets this layout.
- TopRow - A Layout containing the Title and ArrowContainer. This layout aligns its children to either end of the row.
  - Label - A Layout containing a component instance of the Disclosure's Label.
    - A Component Instance of labelArtboard.
  - Control - A Layout containing a component instance of the Disclosure's arrow.
    - A Component Instance of controlArtboard.
- Subtitle - A Layout containing a component instance of the Disclosure's subtitle content.
  - A Component Instance of subtitleArtboard.
- Body - A Layout containing a component instance of the Disclosure's body content.
  - A Component Instance of contentArtboard.

This artboard contains a pair of animations used in a corresponding state machine layer.

Expanded
- ExpandedTrue - Sets the visibility of Body to "Show." Plays if (expanded = true).
- ExpandedFalse - Sets the visibility of Body to "Hide." Plays if (expanded = false) and (collapsible = true).

Root - The Root of the component.
- arrow_group - A group containing the shape used to indicate the arrow. This group prevents its parent layout from distorting the shape.
  - arrow_icon - A shape representing the Disclosure's arrow.

This artboard contains two pairs of animations, each on their own layer.

Expanded
- ExpandedTrue - Indicates the Disclosure has been expanded. Plays if (expanded = true).
- ExpandedFalse - Indicates the Disclosure has not been expanded. Plays if (expanded = false) and (collapsible = true).
Hover
- HoverTrue - Indicates the pointer overlaps with the Disclosure. Plays if (hover = true).
- HoverFalse - Indicates the pointer does not overlap with the Disclosure. Plays if (hover = false).

Root - The Root of the component.
- Text Layout - A Layout containing a Text Element.
  - Text - A text element. The value of its Text Run is bound to label.

Root - The Root of the component.
- Text Layout - A Layout containing a Text Element.
  - Text - A text element. The value of its Text Run is bound to body.

Root - The Root of the component.
- Text Layout - A Layout containing a Text Element.
  - Text - A text element. The value of its Text Run is bound to subtitle.

disclosure_component has a fixed width while its height is determined by its contents. The width can be adjusted as needed for your project but the height must remain dynamic to prevent breaking core functionality.
The content of the disclosure may vary depending on your project's needs, and could include images, animations, columns, etc. You may want to add properties to DisclosureVM to manage them as well.