Menu Icon
Guides How-to References Community
Guides How-to References Community

Collapse

A collapse provides an expandable area for multiple contents. They let users hide contents by collapsing and show them again by expanding.

Usage

Expand icon position comes with two different types of justifying to design.

Guidance

  • Collapse should include multiple panels.
  • Each panel should indicate a header.
  • Able to add multiple panels by using + icon near Collapse component on page tree.

When to use

  • Use Collapse to expandable panels.

Additional info

  • Consider using Collapse as accordion, bordered and/or ghost to design its visualization.
  • Consider using Panels as disabled or show arrow to set their behaviours.

Variations

  • The updatable properties of Collapse is expand icon position.
  • The updatable behaviours of Collapse are accordion, bordered and ghost.
  • The updatable style features of Collapse are margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of Collapse Header are margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of Collapse Content are display, margin, padding, size, overflow, typography, background, border, effects and css.
  • The usable dynamic properties of Collapse are accordion, bordered, expandIconPosition, ghost, hidden and style.
  • The updatable properties of Panels is header.
  • The updatable behaviours of Panels are disabled and showArrow.
  • The usable dynamic properties of Panels are header, disabled, showArrow, extra, hidden and style.

Next - Columns

Columns organizes contents in a horizontal way by allows grids. They let users seperate sections side by side.