可折叠的
可折叠组件用于将长段信息放在一个块下,商家可以展开或折叠该块。
<按钮type="button" aria-hidden="true" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0">当需要显示更多内容时,用于基本的“显示更多”交互。
<按钮 type="button" class="Code_CopyButton__W2O1C" aria-label="Copy to clipboard">
进口{卡,堆栈,按钮,可折叠的,TextContainer,链接,}从“@shopify /北极星”;进口{useState,useCallback}从“反应”;函数CollapsibleExample(){常量[开放,setOpen]=useState(真正的);常量handleToggle=useCallback(()=>setOpen((开放)=>!开放),[]);返回(<div风格={{高度:“200 px”}}><卡分段><堆栈垂直><按钮onClick={handleToggle}ariaExpanded={开放}ariaControls=“basic-collapsible”>切换</按钮><可折叠的开放={开放}id=“basic-collapsible”过渡={{持续时间:“500 ms”,timingFunction:“ease-in-out”}}expandOnPrint><TextContainer><p>你的邮件列表可以让你联系那些表现出兴趣的客户或访客在你的商店.向他们伸出援手与独家优惠或您的产品更新.</p><链接网址=“#”>测试链接</链接></TextContainer></可折叠的></堆栈></卡></div>);}