骨架显示文本

骨架显示文本用于在内容出现在页面之前提供低保真度的表示,并提高商家感知的加载时间。可用于卡片内或卡片外的内容。

使用此组件表示中型和大型显示文本,如报表列表页面上的大型指标或页面标题。

进口SkeletonDisplayText“@shopify /北极星”进口反应“反应”函数SkeletonExample返回<SkeletonDisplayText大小“媒介”/>

道具

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

接口 SkeletonDisplayTextProps
大小? “小”|“媒介”|“大”|有没有这种款式特大号的“

文本的大小。

默认为“媒介”

最佳实践

骨架显示文本组件应该:

  • 给商家一个页面内容加载后的提示
  • 使用真实的内容来显示永不更改的文本

内容的指导方针

骨架显示文本

显示页面上永不更改的静态显示文本。例如,将页面标题(如Products)保留在产品列表页面上,但对在产品详细信息页面上更改的页面标题使用框架加载。

静态内容显示实际显示文本,动态内容使用框架显示文本。动态内容的图像显示框架显示文本

静态内容使用框架显示文本,动态内容使用占位符内容。图像显示骨架显示文本用于静态内容,占位符文本用于动态内容

显示动态页面标题的框架显示文本。

动态页面标题的图像显示框架显示文本