Collapsible

Collapsible is used to show the animation effect of a collapsed drop-down.

Code demo

Basic Usage

import { Button, Collapsible, Utils } from 'tuya-panel-kit';

const { convertX: cx } = Utils.RatioUtils;

const [collapsed, setCollapsed] = React.useState(false);

<Button
  stretch={true}
  onPress={() => setCollapsed(!collapsed)}
  text="Click expand"
  textStyle={{
    fontSize: cx(14),
  }}
  style={{
    height: 40,
    backgroundColor: '#fff',
    width: '100%',
    borderColor: '#F5F5F6',
    borderTopWidth: 1,
  }}
/>
<Collapsible
  collapsed={collapsed}
  align="top"
  style={{
    height: 260,
    backgroundColor: '#fff',
  }}
/>

Tuya Design

Collapsible

Code demo

Basic Usage

API