# 弹出框

弹出框是一种模态窗口，在弹出框消失之前，用户无法操作其他界面内容，干扰性比较强。


## 如何使用

- 弹出框常用于展示用户当前需要的或用户必须关注的信息或操作，其他情况不建议使用弹出框，可考虑通知等其他非模态窗口。

- 弹出框的内容通常是不同控件进行组合布局。例如文本（可带格式，如缩进、链接、粗体等）、列表、输入框、网格、图标或图片。常用于选择或确认信息。

## 分类

- 无标题弹出框

- 有标题弹出框

- 纯文本

### 无标题弹出框

没有标题的弹出框。

内容区域上下留 24vp 的间隔，但内容如果为列表类的内容，则不需要上下留 24vp 的间隔。

  | ![1](figures/1.png) | ![2](figures/2.png) |
| -------- | -------- |
| 纯内容 | 内容+操作按钮 | 


### 有标题弹出框

标题分为：纯标题（单/双行标题）、标题+操作图标。

  |  ![3](figures/3.png) |
| -------- |
| 标题+内容 | 

当内容为列表类内容时，则不需要在底部留 24vp 的间隔。


### 纯文本

只有标题时，标题居中。

![1_zh-cn_image_0000001573271493.png](figures/1_zh-cn_image_0000001573271493.png)


## 高度规则与位置

竖屏与横屏定义不同。


### 竖屏

弹出框最大高度= 0.8x（屏幕高度-状态栏-导航栏）

位置始终保持在导航栏上方（含导航栏隐藏场景）。


### 横屏

弹出框最大高度= 0.9x（屏幕高度-状态栏） 位置在减去状态栏的区域居中显示。

## 界面写作原则

### 操作确认

**标题**

- 句子短，无断句，且为陈述句时，不加句号。

- 感叹句、问句，需加对应标点（感叹号、问号）。

- 标题简明扼要，清晰描述要进行的操作。可为短语（动词+名词）。

**内容文本**

- 描述需用户确认的内容（确认后产生的影响、效果、影响范围等），可为疑问句或陈述句。尽量不用辅助说明，若仍需要，避免与标题重复。

**按钮**

- 按钮让用户选择是否进行下一步动作。操作按钮应使用真实的操作内容。

- 通常与标题栏中的动词一致。不要使用“是”或“否”。


### 信息确认

**内容文本**

- 以陈述语气描述需告知用户的具体事项。例如目前没有可用的更新。

**按钮**

- 只有一个，例如“知道了”。避免使用“确认”、“好”。

## 界面用语超长处理
### 弹出框标题

- 先逐级缩小字号到 15fp。

  ![0000000000011111111.20220510095302.53512292337511436771446888852045](figures/0000000000011111111.20220510095302.53512292337511436771446888852045.png)

- 继续超长，换行处理，支持换一行。

- 最后，“...“截断处理。


### 弹出框按钮

- 按钮不支持换行。

![弹出框按钮1.png](figures/弹出框按钮1.png)

- 继续超长，先考虑改变布局，左右变上下（若是上下布局，则不考虑此方式）。

![弹出框按钮2.png](figures/弹出框按钮2.png)

- 其次缩小文字。按钮文本同时逐级缩小，最小字号为 9fp。

- 最后，“...“截断处理。

  ![0000000000011111111.20220510095302.96026243257093777700562089792853](figures/0000000000011111111.20220510095302.96026243257093777700562089792853.png)

## 资源

弹出框相关的开发者文档详见[API接口](http://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-promptAction.md)。