北极星弹出窗口
弹窗是按需打开的小覆盖。它们让商家可以访问额外的内容和操作，而不会使页面变得混乱。
在可公开菜单中显示一组操作时使用。
进口｛按钮，弹出窗口，ActionList｝从“@shopify /北极星”；进口｛useState，useCallback｝从“反应”；函数PopoverWithActionListExample（）｛常量［popoverActive，setPopoverActive］＝useState（真正的）；常量togglePopoverActive＝useCallback（（）= >setPopoverActive（（popoverActive）= >！popoverActive），［］，）；常量激活剂＝（<按钮onClick＝｛togglePopoverActive｝信息披露>更多的行动</按钮>）；返回（<div风格＝｛｛高度：“250 px”｝｝><弹窗活跃＝｛popoverActive｝激活剂＝｛激活剂｝autofocusTarget＝“第一个节点”onClose＝｛togglePopoverActive｝><ActionList actionRole＝“子菜单”项目＝｛［｛内容：“导入”｝，｛内容：“出口”｝］｝/></弹出窗口></div>）；｝道具
想要帮助完善这个功能吗?请<！-- -->分享你的反馈．
接口<！-- -->
PopoverProps<！-- -->
- 孩子们? 反应．ReactNode
-
在弹出窗口中显示的内容。
- preferredPosition? “以上”|“下面”|“mostSpace”
-
打开弹出窗口的首选方向。
- preferredAlignment? “左”|“中心”|“对”
-
弹窗相对于其激活器的首选对齐方式。
- 活跃的 布尔
-
显示或隐藏弹窗。
- 激活剂 反应．ReactElement
-
激活弹窗的元素。
- preferInputActivator? 布尔
-
使用激活器的输入元素来计算弹出窗口的位置。
默认为真正的．
- activatorWrapper? 字符串
-
用于包装激活器的元素类型。
默认为“div”．
- zIndexOverride? 数量
-
覆盖默认的z-index为400。
- preventFocusOnClose? 布尔
-
当弹出窗口被禁用时，防止聚焦激活器或下一个可聚焦元素。
- 分段? 布尔
-
自动在节中添加换行内容。
- fullWidth? 布尔
-
允许弹窗拉伸到其激活器的全宽度。
- fullHeight? 布尔
-
允许弹窗拉伸以适应垂直内容。
- fluidContent? 布尔
-
允许弹窗内容决定覆盖的宽度和高度。
- 固定? 布尔
-
保持在固定位置。
- ariaHaspopup? 布尔|“假”|“真正的”|“对话框”|“网格”|“列表框”|“菜单”|“树”
-
用于说明弹窗元素的类型。
- hideOnPrint? 布尔
-
打印时，允许弹出窗口覆盖隐藏。
- onClose （源：) = >无效
-
当弹出窗口关闭时回调。
- autofocusTarget? “没有”|的第一个节点|“容器”
-
默认为弹窗容器的首选自动聚焦目标。
默认为“容器”．
- preventCloseOnChildOverlayClick? 布尔
-
防止在单击其他覆盖时关闭弹出窗口。
最佳实践
弹窗:
- 总是放置在按钮或其他触发它们的界面元素旁边
- 用于次要或不太重要的信息和操作，因为它们是隐藏的，直到商家点击触发器
- 包含彼此共享关系的导航或操作
- 由一个明确标记的按钮触发
内容的指导方针
弹出窗口内容
如果弹出窗口包含动作，它们应该:
- 保持清晰和可预测:当商家点击一个动作项时，他们应该能够预测会发生什么。永远不要用错误的标签来欺骗商家。
做
- 创建订单
- 购买运输标签
不
- 新订单
- 买
- 行动导向:按钮应该总是以一个强烈的动词开头，鼓励行动。为了给商家提供足够的上下文，在按钮上使用{动词}+{名词}格式，除了保存、关闭、取消或确定等常见操作。
做
- 重命名
- 编辑HTML
- 重复的
不
- HTML编辑选项
- 文件名更改
- 复制此订单，以便您可以进行编辑、更新或更改
- 可扫描，特别是当弹出窗口包含操作或选项列表时。避免使用不必要的单词和冠词，如“the”、“an”或“a”。
做
- 添加菜单项
不
- 添加菜单项
如果弹出窗口包含一系列导航链接，每个项目应该:
- 要简洁，但仍然要给商家足够的信息，这样他们就可以很容易地找到并准确地导航到他们想要的路径。
做
- 欧宝体育官网入口首页
- 信使
- 脸谱网
- 购买按钮
不
- 销售渠道
相关的组件
- 要在弹出窗口中放置操作列表，使用动作列表组件
- 为了让商家从列表中选择简单的选项，使用select组件
可访问性
弹窗通常包含选项列表或者一个动作列表，但也可以包含其他控件或内容。
以协助屏幕阅读器将焦点发送到动作列表,通过autofocusTarget = '第一个节点'来弹出窗口．这将避免已知的问题，屏幕阅读器可能有键盘支持一旦焦点移开激活器。
属性的默认值为menuaria-haspopup的角色。你可以用道具ariaHaspopup指定一个值。屏幕阅读器可能无法将焦点发送到弹出窗口当它们期望内容与with元素相邻时aria-haspopup在DOM树中。在此场景下，建议不提供ariaHaspopup道具。
键盘支持
- 当弹出窗口打开时，焦点移动到第一个可聚焦的元素或弹出窗口容器
- 一旦焦点在弹出窗口中，商家就可以使用控件访问弹出窗口中的控件选项卡键(和转变+选项卡向后)和用于交互的标准击键
- 商家可以取消弹出窗口的标签，按esc键，或者点击它外面
- 当弹出窗口关闭时，焦点将返回到启动它的元素上