1# Popup
2
3Popup是用于显示特定样式气泡。
4
5>  **说明：**
6>
7>  - 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9>  - 建议开发者结合[Popup控制](ts-universal-attributes-popup.md)中提供的自定义气泡功能一起使用。
10
11## 导入模块
12
13```
14import { Popup, PopupOptions, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI';
15```
16
17##  子组件
18
19无
20
21## Popup
22
23Popup(options: PopupOptions)
24
25**装饰器类型：**@Builder
26
27**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
28
29**系统能力：** SystemCapability.ArkUI.ArkUI.Full
30
31**参数**：
32
33| 参数名  | 类型                          | 必填 | 说明                  |
34| ------- | ----------------------------- | ---- | --------------------- |
35| options | [PopupOptions](#popupoptions) | 是   | 定义Popup组件的类型。 |
36
37## PopupOptions
38
39PopupOptions定义Popup的具体式样参数。
40
41**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
42
43**系统能力：** SystemCapability.ArkUI.ArkUI.Full
44
45| 名称        | 类型       | 必填        | 说明                            |
46| ----------- | ---------- | ------| --------------------------------- |
47| icon      | [PopupIconOptions](#popupiconoptions)                        | 否   | 设置popup图标。<br />**说明：**<br />当size设置异常值或0时不显示。 |
48| title     | [PopupTextOptions](#popuptextoptions)                        | 否   | 设置popup标题文本。                  |
49| message   | [PopupTextOptions](#popuptextoptions)                        | 是   | 设置popup内容文本。<br />**说明：**<br />message不支持设置fontWeight。 |
50| showClose | boolean \| [Resource](ts-types.md#resource)                | 否   | 设置popup关闭按钮。<br />默认值：true |
51| onClose   | () => void                                                   | 否   | 设置popup关闭按钮回调函数。|
52| buttons   | [[PopupButtonOptions](#popupbuttonoptions)?,[PopupButtonOptions](#popupbuttonoptions)?] | 否   | 设置popup操作按钮,按钮最多设置两个。 |
53| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction)                                             | 否                                | 布局方向。<br/>默认值：Direction.Auto                                |
54
55## PopupTextOptions
56
57PopupTextOptions设置文本样式。
58
59**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
60
61**系统能力：** SystemCapability.ArkUI.ArkUI.Full
62
63| 名称       | 类型                                                         | 必填 | 说明         |
64| ---------- | ------------------------------------------------------------ | ---- | ------------------ |
65| text       | [ResourceStr](ts-types.md#resourcestr)                       | 是   | 设置文本内容。     |
66| fontSize   | number \| string \| [Resource](ts-types.md#resource)         | 否   | 设置文本字体大小。<br />默认值：`$r('sys.float.ohos_id_text_size_body2')`  |
67| fontColor  | [ResourceColor](ts-types.md#resourcecolor)                   | 否   | 设置文本字体颜色。<br />默认值：`$r('sys.color.ohos_id_color_text_secondary')` |
68| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 否   | 设置文本字体粗细。<br />默认值：FontWeight.Regular |
69
70## PopupButtonOptions
71
72PopupButtonOptions定义按钮的相关属性和事件。
73
74**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
75
76**系统能力：** SystemCapability.ArkUI.ArkUI.Full
77
78| 名称      | 类型                                                 | 必填 | 说明                 |
79| --------- | ---------------------------------------------------- | ---- | ---------------------- |
80| text      | [ResourceStr](ts-types.md#resourcestr)               | 是   | 设置按钮内容。         |
81| action    | () => void                                           | 否   | 设置按钮click回调。 |
82| fontSize  | number \| string \| [Resource](ts-types.md#resource) | 否   | 设置按钮文本字体大小。 <br />默认值：`$r('sys.float.ohos_id_text_size_button2')` |
83| fontColor | [ResourceColor](ts-types.md#resourcecolor)           | 否   | 设置按钮文本字体颜色。<br />默认值：`$r('sys.color.ohos_id_color_text_primary_activated')` |
84
85##  PopupIconOptions
86
87PopupIconOptions定义icon（右上角图标）的属性。
88
89**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
90
91**系统能力：** SystemCapability.ArkUI.ArkUI.Full
92
93| 名称         | 类型                                                         | 必填 | 说明                             |
94| ------------ | ------------------------------------------------------------ | ---- | ---------------------------------- |
95| image        | [ResourceStr](ts-types.md#resourcestr)                       | 是   | 设置图标内容。                     |
96| width        | [Dimension](ts-types.md#dimension10)                         | 否   | 设置图标宽度。<br />默认值：32VP |
97| height       | [Dimension](ts-types.md#dimension10)                         | 否   | 设置图标高度。<br />默认值：32VP |
98| fillColor    | [ResourceColor](ts-types.md#resourcecolor)                   | 否   | 设置图标填充颜色。 <br />**说明：**<br />仅针对svg图源生效。|
99| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](ts-types.md#borderradiuses9) | 否   | 设置图标圆角。<br />默认值：`$r('sys.float.ohos_id_corner_radius_default_s')`  |
100
101## 示例
102
103### 示例1
104
105```ts
106// xxx.ets
107import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI';
108
109@Entry
110@Component
111struct PopupExample {
112
113  build() {
114    Row() {
115      // popup 自定义高级组件
116      Popup({
117        //PopupIconOptions 类型设置图标内容
118        icon: {
119          image: $r('app.media.icon'),
120          width:32,
121          height:32,
122          fillColor:Color.White,
123          borderRadius: 16
124        } as PopupIconOptions,
125        // PopupTextOptions 类型设置文字内容
126        title: {
127          text: 'This is a popup with PopupOptions',
128          fontSize: 20,
129          fontColor: Color.Black,
130          fontWeight: FontWeight.Normal
131        } as PopupTextOptions,
132        //PopupTextOptions 类型设置文字内容
133        message: {
134          text: 'This is the message',
135          fontSize: 15,
136          fontColor: Color.Black
137        } as PopupTextOptions,
138        showClose: false,
139        onClose: () => {
140          console.info('close Button click')
141        },
142        // PopupButtonOptions 类型设置按钮内容
143        buttons: [{
144          text: 'confirm',
145          action: () => {
146            console.info('confirm button click')
147          },
148          fontSize: 15,
149          fontColor: Color.Black,
150        },
151          {
152            text: 'cancel',
153            action: () => {
154              console.info('cancel button click')
155            },
156            fontSize: 15,
157            fontColor: Color.Black
158          },] as [PopupButtonOptions?, PopupButtonOptions?]
159      })
160    }
161    .width(300)
162    .height(200)
163    .borderWidth(2)
164    .justifyContent(FlexAlign.Center)
165  }
166}
167```
168
169![](figures/popup_7.png)
170
171### 示例 2
172Popup布局镜像展示
173
174```ts
175// xxx.ets
176import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI'
177
178@Entry
179@Component
180struct PopupPage {
181  @State currentDirection: Direction = Direction.Rtl
182
183  build() {
184    Column() {
185      // popup 自定义高级组件
186      Popup({
187        //PopupIconOptions 类型设置图标内容
188        direction: this.currentDirection,
189        icon: {
190          image: $r('app.media.icon'),
191          width: 32,
192          height: 32,
193          fillColor: Color.White,
194          borderRadius: 16,
195        } as PopupIconOptions,
196        // PopupTextOptions 类型设置文字内容
197        title: {
198          text: 'This is a popup with PopupOptions',
199          fontSize: 20,
200          fontColor: Color.Black,
201          fontWeight: FontWeight.Normal,
202
203        } as PopupTextOptions,
204        //PopupTextOptions 类型设置文字内容
205        message: {
206          text: 'This is the message',
207          fontSize: 15,
208          fontColor: Color.Black,
209        } as PopupTextOptions,
210        showClose: true,
211        onClose: () => {
212          console.info('close Button click')
213        },
214        // PopupButtonOptions 类型设置按钮内容
215        buttons: [{
216          text: 'confirm',
217          action: () => {
218            console.info('confirm button click')
219          },
220          fontSize: 15,
221          fontColor: Color.Black,
222
223        },
224          {
225            text: 'cancel',
226            action: () => {
227              console.info('cancel button click')
228            },
229            fontSize: 15,
230            fontColor: Color.Black,
231          },] as [PopupButtonOptions?, PopupButtonOptions?],
232      })
233
234    }
235    .justifyContent(FlexAlign.Center)
236    .width('100%')
237    .height('100%')
238  }
239}
240```
241
242![](figures/popup_8.png)