横幅
通知商家有关重要更改或持续条件的信息。如果您需要以一种突出的方式与商家沟通,请使用此组件。横幅被放置在它们所应用的页面或部分的顶部,以及页面或部分标题的下方。
用于传达一般信息或不重要的动作。例如,你可以展示一个横幅,要求商家反馈。默认横幅包含较低优先级的信息,应该始终被驳回。
进口{横幅}从“@shopify /北极星”;进口反应从“反应”;函数BannerExample(){返回(<横幅标题=“存档”onDismiss={()= >{}}><p>这个订单是在3月份存档的7,2017在3.:12点美国东部时间。</p></横幅>);}
道具
想要帮助完善这个功能吗?请分享你的反馈。
- 标题? 字符串
-
标题内容的横幅。
- 图标? 任何
-
要显示在横幅中的图标。只使用主色调图标。
- 状态? “成功”|“信息”|“警告”|“关键”
-
设置横幅的状态。
- 孩子们? 反应。ReactNode
-
要在横幅中呈现的子元素。
- 行动? &
-
横幅的动作。
- secondaryAction?
-
Action |显示辅助操作。
- onDismiss? () = >无效
-
当横幅被解散时回调。
- stopAnnouncements? 布尔
-
在更改横幅内容时禁用屏幕阅读器公告。
最佳实践
横幅:
- 只在最重要的信息上谨慎地使用。
- 不要用来提醒商家在UI中需要做什么,而不是在UI中清楚地说明操作。
- 不是商家定期需要的信息或行动的主要入口点。
- 除非它们包含关键信息或商家需要采取的重要步骤,否则不要理睬它们。
- 使用默认图标
成功
,信息
,警告
而且至关重要的
的状态。如果图标改变了,请只使用主、双音调图标。
放置
横幅应放置在适当的上下文中:
- 与整个页面相关的横幅应该放置在该页面的顶部,页面标题的下方。它们应该占据内容区域的全部宽度。
- 与页面某个部分相关的横幅(如卡片、弹出窗口或模式)应该放在该部分内,位于任何部分标题的下方。这些横幅具有更小的间距和精简的设计,以适应内容上下文。
- 与元素相关的横幅更具体,一个部分应该放在该元素的上方或下方。
内容的指导方针
横幅:
- 专注于一个主题,一条信息,或所需的行动,以避免压倒商家。
- 要简洁且易于浏览——商家不需要花很多时间弄清楚他们需要知道什么和做什么。
- 限制在几个重要的行动呼吁,而不超过一个主要行动。
- 不用于营销信息或追加销售ob欧宝娱乐app下载地址使用标注卡代替。
要了解如何编写有用且易于访问的错误消息文本,请参阅错误消息。
标题
横幅标题应遵循内容指南标题和副标题。
正文内容
正文内容应:
- 简洁:内容尽量控制在1 - 2句话之内
- 明确效益的主要任务
- 用句式书写,并使用适当的标点符号
- 避免重复标题
- 解释如何解决问题,特别是警告和关键横幅
做
你的在线商欧宝体育官网入口首页店最多有20个主题。删除未使用的主题以添加更多主题。
不
您已达到主题限制。您的在线商欧宝体育官网入口首页店已达到20个主题的最大值。若要添加更多主题,请删除不再使用的主题。
按钮和链接
按钮和链接应该是:
- 清晰且可预测:当商家点击一个按钮时,他们应该能够预测会发生什么。千万不要在纽扣上贴错标签来欺骗商家。
做
购买运输标签
不
买
- 行动导向:按钮应该总是以鼓励行动的强烈动词开头。为了给商家提供足够的上下文,在按钮上使用{动词}+{名词}格式,除了保存、关闭、取消或确定等常见操作。
做
激活Apple Pay
不
试试苹果支付
- 可扫描的:避免不必要的单词和冠词,如the, an, a。
做
添加菜单项
不
添加菜单项
链接文本应:
- 设定商人将被带到哪里的预期
做
订单# 001
不
订单
- 使用一致的内容来标记导航。例如,如果导航链接指向一个名为Orders的页面,则将该链接标记为Orders。
做
支付
不
财务部分
次要主体内容
正文内容应为:
- 可操作的:在告诉商家他们OB欧宝娱乐APP可以采取什么行动(尤其是一些新的行动)时,用祈使动词开始句子。不要使用“你可以”这样的宽容的语言。
做
获取所有销售渠道的业绩数据。
不
现在您可以获得所有销售渠道的业绩数据。
- 为商家成功而构建:始终将最关键的信息放在首位。
- 明确:使用动词“需要”来帮助商家理解什么时候他们被要求做某事。
做
要购买运输标签,您需要输入货物的总重量,包括包装。
不
要购买运输标签,您必须输入货物的总重量,包括包装。
相关的组件
可访问性
横幅为残障商户提供上下文环境并协助工作流程。
- 关键和警告横幅有一个
=“警戒”
并在出现时由辅助技术宣布。 - 所有其他横幅都有
角色= "状态"
并在任何重要公告后阅读。 - 所有的横幅都有一个
aria-live
属性,并在其内容更新时由辅助技术宣布。可以通过使用道具禁用这些通知stopAnnouncements
。 - 横幅使用
aria-describedby
当它们被宣布或接受关注时,向辅助技术描述它们的目的。如果一个横幅有标题
,则标题内容用于aria-describedby
。如果横幅没有标题
,则所有的横幅内容都用于aria-describedby
。 - 旗帜容器有一个
tabindex = " 0 "
并显示一个可见的键盘焦点指示器。正因为如此,商家可以在通过表单或其他交互方式点击标签时发现横幅广告,而开发人员可以通过编程将焦点转移到横幅广告上。 - 的组合图标而且颜色向商家展示它们的意义和重要程度。
表单中的错误通知
关键的横幅
当商家提交有错误的冗长或复杂的表单时,使用一个关键的横幅来总结哪里出了问题。将横幅放置在表单的顶部,并在提交表单时将焦点移到横幅上。这允许所有商家按照逻辑顺序在表单中移动,以纠正问题。
内联错误
总是包括内联错误特定表单字段的消息,以便商家在纠正错误时知道在上下文中该做什么。
要了解如何创建有用且可访问的错误消息文本,请参阅错误消息。
做
- 把横幅放在它们所提到的问题的上下文中
- 给带有大量信息的横幅一个清晰的标题,总结其内容
- 如果横幅广告与商家当前的工作流程相关,需要立即处理,就将焦点转移到横幅广告上
不
- 如果横幅出现在页面加载中,或者在商家当前的工作流程之外,将焦点转移到横幅上
- 使用警告或紧急(
=“警戒”
)横幅来传达商家不需要立即处理的信息