1 # Popup
2 
3 Popup是用于显示特定样式气泡。
4 
5 >  **说明：**
6 >
7 >  - 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8 >
9 >  - 建议开发者结合[Popup控制](ts-universal-attributes-popup.md)中提供的自定义气泡功能一起使用。
10 
11 ## 导入模块
12 
13 ```
14 import { Popup, PopupOptions, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI';
15 ```
16 
17 ##  子组件
18 
19 无
20 
21 ## Popup
22 
23 Popup(options: PopupOptions): void
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 
39 PopupOptions定义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 
57 PopupTextOptions设置文本样式。
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 
72 PopupButtonOptions定义按钮的相关属性和事件。
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 
87 PopupIconOptions定义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 该示例通过配置PopupIconOptions、PopupTextOptions、PopupButtonOptions实现气泡的样式。
106 
107 ```ts
108 // xxx.ets
109 import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI';
110 
111 @Entry
112 @Component
113 struct PopupExample {
114 
115   build() {
116     Row() {
117       // popup 自定义高级组件
118       Popup({
119         // PopupIconOptions类型设置图标内容
120         icon: {
121           image: $r('app.media.icon'),
122           width:32,
123           height:32,
124           fillColor:Color.White,
125           borderRadius: 16
126         } as PopupIconOptions,
127         // PopupTextOptions类型设置文字内容
128         title: {
129           text: 'This is a popup with PopupOptions',
130           fontSize: 20,
131           fontColor: Color.Black,
132           fontWeight: FontWeight.Normal
133         } as PopupTextOptions,
134         // PopupTextOptions类型设置文字内容
135         message: {
136           text: 'This is the message',
137           fontSize: 15,
138           fontColor: Color.Black
139         } as PopupTextOptions,
140         showClose: false,
141         onClose: () => {
142           console.info('close Button click')
143         },
144         // PopupButtonOptions类型设置按钮内容
145         buttons: [{
146           text: 'confirm',
147           action: () => {
148             console.info('confirm button click')
149           },
150           fontSize: 15,
151           fontColor: Color.Black,
152         },
153           {
154             text: 'cancel',
155             action: () => {
156               console.info('cancel button click')
157             },
158             fontSize: 15,
159             fontColor: Color.Black
160           },] as [PopupButtonOptions?, PopupButtonOptions?]
161       })
162     }
163     .width(300)
164     .height(200)
165     .borderWidth(2)
166     .justifyContent(FlexAlign.Center)
167   }
168 }
169 ```
170 
171 ![](figures/popup_7.png)
172 
173 ### 示例 2（设置镜像效果）
174 该示例通过配置direction实现Popup的镜像效果。
175 
176 ```ts
177 // xxx.ets
178 import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI'
179 
180 @Entry
181 @Component
182 struct PopupPage {
183   @State currentDirection: Direction = Direction.Rtl
184 
185   build() {
186     Column() {
187       // popup 自定义高级组件
188       Popup({
189         //PopupIconOptions 类型设置图标内容
190         direction: this.currentDirection,
191         icon: {
192           image: $r('app.media.icon'),
193           width: 32,
194           height: 32,
195           fillColor: Color.White,
196           borderRadius: 16,
197         } as PopupIconOptions,
198         // PopupTextOptions 类型设置文字内容
199         title: {
200           text: 'This is a popup with PopupOptions',
201           fontSize: 20,
202           fontColor: Color.Black,
203           fontWeight: FontWeight.Normal,
204 
205         } as PopupTextOptions,
206         //PopupTextOptions 类型设置文字内容
207         message: {
208           text: 'This is the message',
209           fontSize: 15,
210           fontColor: Color.Black,
211         } as PopupTextOptions,
212         showClose: true,
213         onClose: () => {
214           console.info('close Button click')
215         },
216         // PopupButtonOptions 类型设置按钮内容
217         buttons: [{
218           text: 'confirm',
219           action: () => {
220             console.info('confirm button click')
221           },
222           fontSize: 15,
223           fontColor: Color.Black,
224 
225         },
226           {
227             text: 'cancel',
228             action: () => {
229               console.info('cancel button click')
230             },
231             fontSize: 15,
232             fontColor: Color.Black,
233           },] as [PopupButtonOptions?, PopupButtonOptions?],
234       })
235 
236     }
237     .justifyContent(FlexAlign.Center)
238     .width('100%')
239     .height('100%')
240   }
241 }
242 ```
243 
244 ![](figures/popup_8.png)