Overflow beta

The Overflow component enables users to create overflow experiences with any component. Overflow will detect and hide overflowing elements in DOM and manage the overflow state.

Slots

• Start slot is used for static content before the collapsible content
• Default slot is used for collapsible content
• End slot is used for static content after the collapsible content

Examples

By default, items will be hidden from end to start when collapsing, and shown from start to end when expanding

<ch-overflow>
  <ch-button>settings</ch-button>
  ...other elements here
</ch-overflow>

You can reverse this using overflow-direction="start"

<ch-overflow overflow-direction="start">...elements here</ch-overflow>

You can ensure a minimum number of items are displayed using “min”

<ch-overflow min="3">...elements here</ch-overflow>

API