模态为用户提供与他们试图完成的任务相关的信息和选择。它们可以包含关键信息、需要决策或涉及多个任务。
模态是一种出现在内容前面的浮动窗口，用于提供关键信息或请求决策。模态出现时会禁用所有其他功能。模式会一直显示在屏幕上，直到用户确认、取消或采取所需的操作。
虽然情态动词可以是一种有效的方式来披露额外的控制或信息，但它们也可能是用户中断的来源。因此，始终要质疑模态是否必要，并努力避免出现需要模态的情况。
原则
- 聚焦。模态将用户的注意力从屏幕的其余部分吸引开，以集中他们的注意力，确保模态的内容得到处理。
- 直接。模式文本应传达重要信息，并致力于帮助用户正确完成任务。
- 有益的。模态应出现在对用户任务或操作的响应中，以提供相关和上下文信息。
何时使用
模态用于：
- 阻止正常操作的错误。
- 需要特定用户任务、决策或确认的关键信息。
- 响应用户任务或操作时显示的上下文信息。
- 集装箱
- 标题
- 支持文本
- 按钮
- 斯克里姆
- 关闭按钮（可选）
模态是一种窗口。在模式寻址之前，将禁用对UI其余部分的访问。所有模态都会被设计打断——它们的目的是让用户关注内容，因此模态表面会出现在所有其他表面的前面。
为了明确屏幕的其余部分是不可访问的，并将注意力集中在模态上，模态后面的表面被划掉了——它们得到了一个临时覆盖层，以掩盖其内容并使其不那么突出。
模态的目的通过其标题和按钮文本传达。
出于可访问性的原因，所有情态动词都应该有一个标题（内容标签道具可用于设置不可见的标题）。
标题应：
- 包含简短、明确的陈述或问题
- 避免道歉（“对不起打扰了”）、警告（“警告！”）或含糊不清（“你确定吗？”）。
做
此模态标题提出了一个特定的问题，简明扼要地解释了请求的目的，并提供了明确的操作。
不要
这种模式会产生歧义，因此会让用户感到不安——它会让用户不确定如何回应，或者让他们对自己的答案进行二次猜测。
侧面按钮（推荐）
两侧按钮相邻显示两个文本按钮。
堆叠或全角按钮
当需要容纳较长的按钮文本时，请使用堆叠按钮。始终将确认行动置于轻视行动之上。
模式显示时没有警告，要求用户停止当前任务。它们应该谨慎使用——并不是每个选项或设置都保证这种突然中断。
职位
模态保持焦点，直到被解除或用户完成一个操作，如选择设置。它们不应被其他元素遮挡或部分出现在屏幕上。
滚动
大多数模态内容应避免滚动。如果模态内容超过模态高度，则允许滚动（例如，具有多行的列表组件）。当模式滚动时，模式标题固定在顶部，按钮固定在底部。这样可以确保内容在标题和按钮旁边保持可见，即使在滚动时也是如此。
模态不会与模态之外的元素滚动，比如背景。
查看可滚动的选项列表时，模式标题和按钮保持固定。
撤销情态动词
情态语有三种被忽视的方式：
- 轻敲模态外部
- 点击“取消”按钮
- 轻触“Close”（关闭）图标按钮，或按
紧急停车场钥匙
如果用户禁用了解除模态的功能，则必须选择一个模态操作才能继续。
该模式用于通过应用程序创建可访问的模式。
注：此模式的API被模拟为类似反应模态.
下面的示例向您展示了如何正确实现模态。为了使模型正常工作，正确实现模型的闭合逻辑非常重要。
从'react'导入{useState}；从“@wordpress/components”导入{Button，Modal}；常量MyModal=（）=>{const[isOpen，setOpen]=使用状态（false）；const openModal=（）=>设置打开（true）；const closeModal=（）=>设置打开（false）；返回(<><Button variant=“secondary”onClick={openModal}>开放式模态</按钮>{isOpen（打开）&&(<Modal title=“这是我的模态”onRequestClose={closeModal}><Button variant=“secondary”onClick={closeModal}>我的自定义关闭按钮</按钮></模式>) }</>);};
组件可接受的支柱设置如下所示。
此集合中未包含的属性将应用于输入元素。
咏叹调描述人:一串
如果添加此属性，它将被添加到模式内容中分区作为咏叹调描述人.
阿里亚·巴列德比:一串
如果添加此属性，它将被添加到模式内容中分区作为阿里亚·拉贝尔.
当您在模态的内容区域中自己呈现标题时，而不是使用标题道具。这确保了标题可以通过辅助技术使用。
出于可访问性原因，需要标题，请参阅内容标签和标题以其他方式提供标题。
- 必需：否
- 默认值：如果
标题属性，这将默认为呈现的元素的id标题
正文打开类名:一串
打开模式时添加到body元素的类名。
类名:一串
如果添加此属性，它将为模态内容添加一个额外的类名分区.
内容标签:一串
如果添加此属性，它将被添加到模式内容中分区作为阿里亚·拉贝尔.
出于可访问性原因，需要标题，请参阅阿里亚·巴列德比和标题以其他方式提供标题。
焦点安装:boolean |'第一元素'|'第一个内容元素'
如果此属性为true，则它将关注模式中呈现的第一个tabable元素。
如果此属性为false，则不会转移焦点，消费者有责任确保可访问的焦点管理。
如果设置为第一个元素焦点将放在Modal中任何位置的第一个tabable元素上。
如果设置为第一个内容元素焦点将放在Modal中的第一个tabable元素上内容（即儿童）。请注意，使用者有责任确保子元素中至少有一个tabable元素否则焦点将丢失.
标题操作
可选的React节点，用于包含其他动作或与模式相关的其他元素，例如按钮。内容显示在模式的右上角和关闭按钮的左侧（如果可见）。
是不允许的:布尔值
如果此属性设置为false，则该模式将不会显示关闭图标，并且无法解除。
全屏显示:布尔值
此属性设置为时真的将呈现全屏模式。
大小:“小”|“中”|“大”|“填充”
如果添加此属性，将导致模式以预设宽度呈现，或展开以填充屏幕。如果出现以下情况，此道具将被忽略全屏显示设置为真的.
注：情态动词的宽度也可以通过CSS调整模态内容的宽度来控制。
请求关闭时: “
调用此函数以指示应关闭模态。
覆盖类名:一串
如果添加此属性，它将为模式覆盖添加一个附加类名分区.
角色:AriaRole公司
如果添加此属性，它将覆盖模态的默认角色。
应在单击外部时关闭:布尔值
如果添加此属性，它将确定当鼠标单击发生在模式内容之外时是否关闭模式请求。
应关闭Esc:布尔值
如果添加了此属性，它将确定按下转义键时模式是否请求关闭。
风格:CSS属性
如果添加此属性，它将被添加到模态框架中分区.
标题:一串
此属性用作模式标头的标题。
出于可访问性原因，需要标题，请参阅阿里亚·巴列德比和内容标签以其他方式提供标题。
__experimentalHideHeader实验隐藏标题:布尔值
设置为时真的，将不会呈现Modal的标题（包括图标、标题和关闭按钮）。
警告：此特性仍处于实验阶段。“实验性”意味着这是一个早期实施，会发生剧烈而突破性的变化。