上下文保存栏
一旦商家对页面上的表单进行了更改，上下文保存栏就会告诉商家他们的选择。在创建新对象(如产品或客户)时也会显示此组件。商家可以使用此组件保存或丢弃他们的工作。
使用保存操作提供保存更改的机会。使用discard操作允许商家选择放弃他们的更改。使用该消息提供有关这些更改的性质的有用上下文。
进口｛框架，ContextualSaveBar｝从“@shopify /北极星”；进口反应从“反应”；函数例子（）｛返回（<div风格=｛｛高度：“250 px”｝｝><帧标志=｛｛宽度：124，contextualSaveBarSource：“https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-gray.svg?6215648040070010999”，｝｝><ContextualSaveBar消息=“未保存的改变”saveAction=｛｛onAction：（）= >控制台．日志（添加表单提交逻辑），加载：假，禁用：假，｝｝discardAction=｛｛onAction：（）= >控制台．日志（“添加清晰的表单逻辑”），｝｝/></框架></div>）；｝道具
想让这个功能变得更好吗?请分享你的反馈．
接口
ContextualSaveBarProps
- alignContentFlush？ 布尔
-
扩展内容部分，使其与左边缘齐平。
- 消息？ 字符串
-
接受将呈现在动作左侧的内容字符串。
- saveAction？
-
保存或提交文本默认为“保存”的上下文保存栏操作。
- discardAction？ &
-
放弃或取消文本默认为“放弃”的上下文保存栏操作。
- fullWidth？ 布尔
-
删除上下文保存栏上的标准最大宽度。
- contextControl？ ReactNode
-
接受用于帮助用户在不同上下文之间切换的组件。
- secondaryMenu？ ReactNode
-
接受呈现在丢弃和保存操作左侧的节点。
所需的组件
上下文保存栏组件必须包装在框架组件。
最佳实践
上下文保存栏组件应该:
- 当页面上的表单有未保存的更改时显示
- 用于保存或丢弃正在进行的更改
- 提供关于正在进行的更改的性质的简要和有用的上下文
- 保存页面上的所有更改。避免在一个页面上同时编辑多个表单。如果需要对页面的特定部分进行独立编辑，请使用Edit按钮启动模态对话框对于每个可以进行更改和保存的部分。
内容的指导方针
上下文保存栏组件中的消息应该是信息丰富、清晰和简洁的。它们应该遵循{形容词}+{名词}的模式。不要使用完整的句子。
标准消息内容为
- 编辑现有内容时“未保存的更改”
- 创建新对象时“未保存{资源名}”
做
- 未保存的更改
- 未保存的产品
不
- 您有未保存的更改
- 红白条纹衬衫尚未保存
上下文保存栏组件中的操作应该包含一个鼓励操作的强动词。它们不应该包含名词。
做
- 保存
- 丢弃
不
- 保存更改
- 丢弃的变化