跳转到内容 Shopify标志北极星
  • α堆栈 α
  • 应用提供商
  • 自动完成
  • 《阿凡达》
  • 徽章
  • 横幅
  • 流血 α
  • 盒子 α
  • 按钮
  • 按钮组
  • Callout卡
  • 标题 弃用
  • 复选框
  • 选择列表
  • 可折叠的
  • 颜色选择器
  • α
  • 组合框
  • 内容块 α
  • 上下文保存栏
  • 数据表
  • 日期选择器
  • 描述表
  • 显示文本 弃用
  • 降落区
  • 空的状态
  • 例外列表
  • 过滤器
  • 页脚的帮助
  • 形式
  • 表格布局
  • 框架
  • 全屏酒吧
  • 网格 α
  • 标题 弃用
  • 图标
  • 索引表
  • 内联 α
  • 内联错误
  • 键盘键
  • 布局
  • 链接
  • 列表
  • 列表框
  • 加载
  • 媒体卡
  • 模态
  • 导航
  • 选项列表
  • 页面
  • 页面动作
  • 分页
  • 弹出窗口
  • 进度条
  • 单选按钮
  • 滑块范围
  • 资源项目
  • 资源列表
  • 可滚动
  • 选择
  • 设置切换
  • 弃用
  • 正文正文
  • 骨架显示文本
  • 框架页面
  • 骨架的标签
  • 骨架缩略图
  • 微调控制项
  • 堆栈
  • 副标题 弃用
  • 选项卡
  • 标签
  • 文本 β
  • 文本容器
  • 文本字段
  • 文本样式 弃用
  • 缩略图
  • 瓷砖 α
  • 烤面包
  • 工具提示
  • 窗口的顶部
  • 视频缩略图
  • 视觉上隐藏 弃用
  • 令牌
  • 图标
  • 贡献
  • 沙盒 α
  • 可折叠的

    可折叠组件用于将长段信息放在一个块下,商家可以展开或折叠该块。

    <按钮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 /北极星”进口useStateuseCallback“反应”函数CollapsibleExample常量开放setOpenuseState真正的常量handleToggleuseCallback=>setOpen开放=>开放返回<div风格高度“200 px”><卡分段><堆栈垂直><按钮onClickhandleToggleariaExpanded开放ariaControls“basic-collapsible”>切换</按钮><可折叠的开放开放id“basic-collapsible”过渡持续时间“500 ms”timingFunction“ease-in-out”expandOnPrint><TextContainer><p>你的邮件列表可以让你联系那些表现出兴趣的客户或访客你的商店向他们伸出援手独家优惠或您的产品更新</p><链接网址“#”>测试链接</链接></TextContainer></可折叠的></堆栈></></div>

    道具

    想让这个功能变得更好吗?请<!-- -->分享你的反馈

    接口<!-- --> CollapsibleProps<!-- -->
    id 字符串

    为可折叠文件分配唯一的ID。为了便于访问,将这个ID作为触发组件的aria-controls道具的值传递。

    expandOnPrint? 布尔

    选项在打印时显示可折叠内容。

    开放 布尔

    切换是否展开可折叠项。

    过渡? 布尔|

    覆盖转换属性。当设置为false时,完全禁用转换。

    默认为过渡= {{持续时间:<!-- -->“var<!-- -->(<!-- -->——p -时间- 150<!-- -->)<!-- -->'<!-- -->,timingFunction:<!-- -->“var<!-- -->(<!-- -->——p-ease-in-out<!-- -->)<!-- -->'<!-- -->}}

    preventMeasuringOnChildrenUpdate? 布尔

    警告
    <!-- -->重新测量不再需要在子更新*。

    孩子们? 反应ReactNode

    要在可折叠中显示的内容。

    最佳实践

    可折叠组件应该:

    • 用于优先级较低的信息或商家不需要一直看到的信息
    • 不用于隐藏错误消息或其他需要立即采取行动的关键信息

    内容的指导方针

    可折叠容器是具有可扩展和可折叠功能的卡片,应该遵循的内容指南卡片



    可访问性

    与可折叠组件一起使用按钮.将可折叠的内容放在控制它的按钮之后,这样有视觉或注意力问题的商家就可以很容易地发现哪些内容受到了影响。

    • 使用所需的id可折叠组件的支柱,使内容具有惟一的id价值
    • 使用ariaExpanded支撑在按钮组件上以添加aria-expanded属性,该属性将展开或折叠状态传递给屏幕阅读器用户
    • 使用ariaControls道具上的按钮组件,并将其值设置为id可折叠组件的