跳到内容 Shopify标志北极星

α卡

卡片用于将类似的概念和任务组合在一起，供商家扫描、读取并完成任务。它以熟悉和可识别的样式显示内容。

α

该组件是一项正在进行的工作，并已准备好进行探索性使用，预计在小版本更新中会有破坏性更改。请谨慎使用。进一步了解我们的组件生命周期．

默认情况下，卡片的边框半径为8px——p-surface作为背景和——p-shadow-md作为影子。这里有填充space-5(20px)周围的儿童和space-4(16px)用于小屏幕。

进口｛AlphaCard，文本}从“@shopify /北极星”;进口反应从“反应”;函数AlphaCardExample（）｛返回（<AlphaCard><文本作为＝“氢气”变体＝“bodyMd”>内容卡片内部</文本></AlphaCard>）;}

道具

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

接口 AlphaCardProps
孩子们？ 反应．ReactNode
背景？ ColorBackgroundAlias

背景颜色。

默认为“bg”．
填充？ T| {[断点在BreakpointsAlias] ?：T;}<SpacingSpaceScale>

卡片周围的间距。

默认为｛xs：“4”，sm：“5”}．
roundedAbove？ BreakpointsAlias

边界半径值高于设置的断点。

最佳实践

卡片应该:

  • 分组相关信息
  • 以一种优先显示商家最需要知道的信息的方式显示信息
  • 使用标题，明确卡片的用途
  • 坚持单个用户流程，或者将更复杂的流程分成多个部分
  • 避免过多的号召按钮或链接，每张卡片只有一个主要的号召
  • 使用卡片底部的操作调用来执行下一步操作，并使用卡片右上角的空间来执行持久的、可选的操作(如Edit)。

相关的组件