可滚动

可滚动组件是长格式内容(如服务条款)的容器,它允许滚动,以便商家在阅读时暴露更多文本。

当您需要使页面中的某个区域可独立滚动时使用。它经常用于情态动词和其他窗格中,这有助于提供额外的视觉提示,说明内容存在于折叠下方或上方。

进口可滚动“@shopify /北极星”进口反应“反应”函数ScrollableExample返回<卡标题“服务条款”分段><可滚动的影子风格高度“100 px”focusable><p>通过注册Shopify的服务“服务”或任何的服务Shopify公司“Shopify”您同意接受以下条款的约束条件“条款服务”Shopify根据本条款提供的服务服务包括各种产品和服务,以帮助您创建和管理零售商店是否在线商店“在线服务”一个物理零售商店POS服务”或两个任何特性或添加到当前服务中的工具也应受本条款的约束服务您可以查看当前版本条款随时为您服务https//wwwshopifycom/法律/条款Shopify保留更新和更改条款的权利通过在Shopify网站上发布更新和更改提供服务建议您阅读本条款不时提供服务任何可能影响您的更新或更改</p></可滚动></>

道具

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

接口 ScrollableProps
孩子们? 反应ReactNode

内容显示在可滚动区域。

垂直? 布尔

垂直滚动内容。

水平? 布尔

水平滚动内容。

影子? 布尔

当内容可滚动时添加阴影。

提示? 布尔

可滚动时,在安装时稍微提示内容。

focusable? 布尔

当子节点不可聚焦时,添加tabIndex到可滚动。

onScrolledToBottom? () = >无效

当滚动到滚动区域底部时调用。

最佳实践

可滚动容器应该:

  • 当提供额外的视觉提示,让商家知道内容存在于下方或上方时,就使用它
  • 只用于长度的文本,如服务条款或其他法律免责声明,而绝不用于指导性或行动导向的文本

内容的指导方针

可滚动容器是具有滚动功能的卡片,应该遵循内容的指导方针卡片。