Collapsible
Demo
Props
| Prop | Type | Description |
|---|---|---|
trigger | React.ReactNode | The element used to toggle the visibility of the content. |
content | React.ReactNode | The content that is shown or hidden based on the trigger's state. |
classNames | { root?: string; trigger?: string; content?: string } (optional) | Custom class names for different parts of the Collapsible. |
Styles
This component allows for custom styles via the classNames prop:
root: CSS class for styling the overall Collapsible component.trigger: CSS class for styling the trigger element.content: CSS class for styling the collapsible content.
Functionality
- The Collapsible component is useful for creating sections of content that can be shown or hidden, helping to manage screen real estate effectively.
- It provides a simple interaction model, making it user-friendly and efficient for disclosing additional information as needed.
- Suitable for FAQs, dropdown details, and more.