Collapse
Displays content that can be revealed or hidden with an animation.
Source
LLM docs
Package
Examples
1
Properties
40
Playground
Basics
Basic usage of the Collapse component to show and hide content with animation.
Loading demo…
import { Block, Button, Collapse, Text } from '@plocks/ui';
import { useState } from 'react';
export function Demo() {
const [isCollapsed, setIsCollapsed] = useState(false);
return (
<Block>
<Button onPress={() => setIsCollapsed(!isCollapsed)}>
{isCollapsed ? 'Show' : 'Hide'}
</Button>
<Collapse isCollapsed={isCollapsed}>
<Text>
This is some content inside the Collapse component. It will be shown or hidden based on the isCollapsed prop.
</Text>
</Collapse>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources