Overview

Components Expandable Content

The Expandable Content component provides a collapsible container that can show/hide content based on height or line count, with smooth transitions and gradient fading.

Basic usage

The Expandable Content component allows content to be initially collapsed and expandable through user interaction.

Component anatomy

Content Limiting

Control content visibility using either:

maxLines Input: Limits visible text lines (defaults to 3 if not specified)
maxHeight Input: Sets maximum height in any valid CSS unit

The component automatically determines if content exceeds these limits and shows expansion controls accordingly.

Gradient Fade

When content is collapsed, a gradient fade effect is applied to indicate additional content:

Smooth transition from content to background
30px gradient height
Adapts to theme colors
Automatically removes when expanded

Expansion Controls

The component provides intuitive expansion controls:

"Show more" button with down arrow when collapsed
"Show less" button with up arrow when expanded
Button positioning below content
Customizable button spacing

State Changes

Monitor content state changes through the statusChange Output:

Emits 'expanded' when content is shown fully
Emits 'shrunk' when content is collapsed
Supports reactive state handling

Negative Theme

For use on dark backgrounds, enable the negative theme variant using the negative Input. This adjusts:

Gradient colors
Button styling
Text contrast

Accessibility

The component implements proper keyboard interaction:

Focus management for expanded/collapsed states
Keyboard activation of show more/less buttons
Tab order maintenance
Focus disabled on collapsed content

ARIA Implementation

Proper ARIA attributes ensure screen reader compatibility:

Button labels include context
Content section properly marked
State changes announced
Visual customization tools identified

Focus Management

The component manages focus appropriately:

Focus disabled on collapsed content
Proper focus indicators
Logical tab order
State-aware focus handling

Best Practices for Developers

Content Structure DEMO HERE
State Management DEMO HERE
Responsive Behavior DEMO HERE