import React, { useState } from 'react'; import { Collapsible, Button } from '@douyinfe/semi-ui'; () => { const [isOpen, setOpen] = useState(); const toggle = () => { setOpen(!isOpen); }; const collapsed = ( <ul> <li>Nothing can ever happen twice.</li> <li>In consequence, the sorry fact is</li> <li>that we arrive here improvised</li> <li>and leave without the chance to practice. </li> </ul> ); return ( <div> <Button onClick={toggle}>Toggle</Button> <Collapsible isOpen={isOpen}>{collapsed}</Collapsible> </div> ); };

import React, { useState } from 'react'; import { Collapsible, InputNumber, Button } from '@douyinfe/semi-ui'; () => { const [isOpen, setOpen] = useState(false); const [duration, setDuration] = useState(250); const toggle = () => { setOpen(!isOpen); }; const collapsed = ( <ul> <li>Nothing can ever happen twice.</li> <li>In consequence, the sorry fact is</li> <li>that we arrive here improvised</li> <li>and leave without the chance to practice. </li> </ul> ); return ( <div> <label>Set animation duration：</label> <InputNumber min={0} defaultValue={250} style={{ width: 120 }} onChange={(val) => setDuration(val)} step={10} /> <br /> <Button onClick={toggle}>Toggle</Button> <Collapsible isOpen={isOpen} duration={duration}> {collapsed} </Collapsible> </div> ); };

import React from 'react'; import { Collapsible, Button } from '@douyinfe/semi-ui'; () => { const [isOpen, setOpen] = useState(false); const [isChildOpen, setChildOpen] = useState(false); const collapsed = ( <ul> <li>Nothing can ever happen twice.</li> <li>In consequence, the sorry fact is</li> <li>that we arrive here improvised</li> <li>and leave without the chance to practice. </li> </ul> ); return ( <div> <Button onClick={() => setOpen(!isOpen)}>Toggle</Button> <br /> <Collapsible isOpen={isOpen}> <div> <span>Conntent of first level</span> <Button onClick={() => setChildOpen(!isChildOpen)}>Toggle List</Button> </div> <Collapsible isOpen={isChildOpen}>{collapsed}</Collapsible> </Collapsible> </div> ); };

import React, { useState } from 'react'; import { Collapsible, Button } from '@douyinfe/semi-ui'; () => { const [isOpen, setOpen] = useState(false); const maskStyle = isOpen ? {} : { WebkitMaskImage: 'linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.2) 80%, transparent 100%)', }; const collapsed = ( <ul> <li>Nothing can ever happen twice.</li> <li>In consequence, the sorry fact is</li> <li>that we arrive here improvised</li> <li>and leave without the chance to practice. </li> </ul> ); const toggle = () => { setOpen(!isOpen); }; const linkStyle = { position: 'absolute', left: 0, right: 0, textAlign: 'center', bottom: -10, fontWeight: 700, cursor: 'pointer', }; return ( <> <Button onClick={toggle}>Toggle</Button> <div style={{ position: 'relative' }}> <Collapsible isOpen={isOpen} collapseHeight={60} style={{ ...maskStyle }}> {collapsed} </Collapsible> {isOpen ? null : ( <a onClick={toggle} style={{ ...linkStyle }}> + Show More </a> )} </div> </> ); };