1# Popup 2 3The **Popup** component is used to display popups in a specific style. 4 5> **NOTE** 6> 7> - This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> - Use this component with the custom popup features in [popup control](ts-universal-attributes-popup.md) for best results. 10 11## Modules to Import 12 13``` 14import { Popup, PopupOptions, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI'; 15``` 16 17## Child Components 18 19Not supported 20 21## Popup 22 23Popup(options: PopupOptions): void 24 25**Decorator**: @Builder 26 27**Atomic service API**: This API can be used in atomic services since API version 12. 28 29**System capability**: SystemCapability.ArkUI.ArkUI.Full 30 31**Parameters** 32 33| Name | Type | Mandatory| Description | 34| ------- | ----------------------------- | ---- | --------------------- | 35| options | [PopupOptions](#popupoptions) | Yes | Parameters of the popup.| 36 37## PopupOptions 38 39Defines the style parameters of the popup. 40 41**System capability**: SystemCapability.ArkUI.ArkUI.Full 42 43| Name | Type | Mandatory | Description | 44| ----------- | ---------- | ------| --------------------------------- | 45| icon | [PopupIconOptions](#popupiconoptions) | No | Icon of the popup.<br>**NOTE**<br>The icon is not displayed when **size** is set to an invalid value or **0**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 46| title | [PopupTextOptions](#popuptextoptions) | No | Title of the popup.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 47| message | [PopupTextOptions](#popuptextoptions) | Yes | Content of the popup.<br>**NOTE**<br>**fontWeight** is not available for **messages**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 48| showClose | boolean \| [Resource](ts-types.md#resource) | No | Whether to show the close button.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 49| onClose | () => void | No | Callback for the popup close button.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 50| buttons | [[PopupButtonOptions](#popupbuttonoptions)?,[PopupButtonOptions](#popupbuttonoptions)?] | No | Buttons of the popup. A maximum of two buttons can be set.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 51| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | No | Layout direction.<br>Default value: **Direction.Auto**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 52| maxWidth<sup>18+</sup> | [Dimension](ts-types.md#dimension10) | No | Maximum width of the popup. This API allows you to display the popup with a custom width.<br>Default value: 400 vp<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 53 54## PopupTextOptions 55 56Defines the text parameters of the popup. 57 58**Atomic service API**: This API can be used in atomic services since API version 12. 59 60**System capability**: SystemCapability.ArkUI.ArkUI.Full 61 62| Name | Type | Mandatory| Description | 63| ---------- | ------------------------------------------------------------ | ---- | ------------------ | 64| text | [ResourceStr](ts-types.md#resourcestr) | Yes | Text content. | 65| fontSize | number \| string \| [Resource](ts-types.md#resource) | No | Text font size.<br>Default value: **$r('sys.float.ohos_id_text_size_body2')**<br>The string value must be convertible to a number (for example, **'10'**) or include a length unit (for example, **'10px'**); percentage-based strings are not supported.<br>Value range of number values: (0, +∞)| 66| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Text font color.<br>Default value: **$r('sys.color.ohos_id_color_text_secondary')**| 67| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | No | Text font weight.<br>For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a heavier font weight. The default value is **400**.<br>For the string type, only strings of the number type are supported, for example, **"400"**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.<br>Default value: **FontWeight.Regular**| 68 69## PopupButtonOptions 70 71Defines the button attributes and events. 72 73**Atomic service API**: This API can be used in atomic services since API version 12. 74 75**System capability**: SystemCapability.ArkUI.ArkUI.Full 76 77| Name | Type | Mandatory| Description | 78| --------- | ---------------------------------------------------- | ---- | ---------------------- | 79| text | [ResourceStr](ts-types.md#resourcestr) | Yes | Text of the button. | 80| action | () => void | No | Click callback of the button.| 81| fontSize | number \| string \| [Resource](ts-types.md#resource) | No | Font size of the button text.<br>Default value: **$r('sys.float.ohos_id_text_size_button2')**| 82| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the button text.<br>Default value: **$r('sys.color.ohos_id_color_text_primary_activated')**| 83 84## PopupIconOptions 85 86Defines the attributes of the icon (in the upper left corner). 87 88**Atomic service API**: This API can be used in atomic services since API version 12. 89 90**System capability**: SystemCapability.ArkUI.ArkUI.Full 91 92| Name | Type | Mandatory| Description | 93| ------------ | ------------------------------------------------------------ | ---- | ---------------------------------- | 94| image | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon content. | 95| width | [Dimension](ts-types.md#dimension10) | No | Icon width.<br>Default value: **32VP**| 96| height | [Dimension](ts-types.md#dimension10) | No | Icon height.<br>Default value: **32VP**| 97| fillColor | [ResourceColor](ts-types.md#resourcecolor) | No | Icon fill color.<br>**NOTE**<br>This property applies only to an SVG image.| 98| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](ts-types.md#borderradiuses9) | No | Rounded corner of the icon.<br>Default value: **$r('sys.float.ohos_id_corner_radius_default_s')** | 99 100## Example 101 102### Example 1: Setting the Popup Style 103 104This example demonstrates how to customize the style of a popup by configuring **PopupIconOptions**, **PopupTextOptions**, and **PopupButtonOptions**. 105 106```ts 107// xxx.ets 108import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI'; 109 110@Entry 111@Component 112struct PopupExample { 113 114 build() { 115 Row() { 116 // Define a popup. 117 Popup({ 118 // Set the icon through PopupIconOptions. 119 icon: { 120 image: $r('app.media.icon'), 121 width:32, 122 height:32, 123 fillColor:Color.White, 124 borderRadius: 16 125 } as PopupIconOptions, 126 // Set the text through PopupTextOptions. 127 title: { 128 text: 'This is a popup with PopupOptions', 129 fontSize: 20, 130 fontColor: Color.Black, 131 fontWeight: FontWeight.Normal 132 } as PopupTextOptions, 133 // Set the text through PopupTextOptions. 134 message: { 135 text: 'This is the message', 136 fontSize: 15, 137 fontColor: Color.Black 138 } as PopupTextOptions, 139 showClose: false, 140 onClose: () => { 141 console.info('close Button click') 142 }, 143 // Set the button through PopupButtonOptions. 144 buttons: [{ 145 text: 'confirm', 146 action: () => { 147 console.info('confirm button click') 148 }, 149 fontSize: 15, 150 fontColor: Color.Black, 151 }, 152 { 153 text: 'cancel', 154 action: () => { 155 console.info('cancel button click') 156 }, 157 fontSize: 15, 158 fontColor: Color.Black 159 },] as [PopupButtonOptions?, PopupButtonOptions?] 160 }) 161 } 162 .width(300) 163 .height(200) 164 .borderWidth(2) 165 .justifyContent(FlexAlign.Center) 166 } 167} 168``` 169 170 171 172### Example 2: Implementing a Mirror Effect 173This example shows how to achieve a mirror effect for a popup by configuring **direction**. 174 175```ts 176// xxx.ets 177import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI' 178 179@Entry 180@Component 181struct PopupPage { 182 @State currentDirection: Direction = Direction.Rtl 183 184 build() { 185 Column() { 186 // Define a popup. 187 Popup({ 188 // Set the icon through PopupIconOptions. 189 direction: this.currentDirection, 190 icon: { 191 image: $r('app.media.icon'), 192 width: 32, 193 height: 32, 194 fillColor: Color.White, 195 borderRadius: 16, 196 } as PopupIconOptions, 197 // Set the text through PopupTextOptions. 198 title: { 199 text: 'This is a popup with PopupOptions', 200 fontSize: 20, 201 fontColor: Color.Black, 202 fontWeight: FontWeight.Normal, 203 204 } as PopupTextOptions, 205 // Set the text through PopupTextOptions. 206 message: { 207 text: 'This is the message', 208 fontSize: 15, 209 fontColor: Color.Black, 210 } as PopupTextOptions, 211 showClose: true, 212 onClose: () => { 213 console.info('close Button click') 214 }, 215 // Set the button through PopupButtonOptions. 216 buttons: [{ 217 text: 'confirm', 218 action: () => { 219 console.info('confirm button click') 220 }, 221 fontSize: 15, 222 fontColor: Color.Black, 223 224 }, 225 { 226 text: 'cancel', 227 action: () => { 228 console.info('cancel button click') 229 }, 230 fontSize: 15, 231 fontColor: Color.Black, 232 },] as [PopupButtonOptions?, PopupButtonOptions?], 233 }) 234 235 } 236 .justifyContent(FlexAlign.Center) 237 .width('100%') 238 .height('100%') 239 } 240} 241``` 242 243 244 245### Example 3: Setting the Custom Width 246This example demonstrates how to set the custom width for a popup using **maxWidth**. 247 248```ts 249// xxx.ets 250import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI' 251 252@Entry 253@Component 254struct PopupPage { 255 @State currentDirection: Direction = Direction.Rtl 256 257 build() { 258 Row() { 259 // Define a popup. 260 Popup({ 261 // Set the custom width. 262 maxWidth:'50%', 263 // Set the icon through PopupIconOptions. 264 icon: { 265 image: $r('app.media.startIcon'), 266 width: 32, 267 height: 32, 268 fillColor: Color.White, 269 borderRadius: 16, 270 } as PopupIconOptions, 271 // Set the text through PopupTextOptions. 272 message: { 273 text: 'This is the message. This is the message. This is the message. This is the message.', 274 fontSize: 15, 275 fontColor: Color.Black 276 } as PopupTextOptions, 277 showClose: false, 278 onClose: () => { 279 console.info('close Button click') 280 }, 281 // Set the button through PopupButtonOptions. 282 buttons: [{ 283 text: 'OK', 284 action: () => { 285 console.info('confirm button click') 286 }, 287 fontSize: 15, 288 fontColor: Color.Black, 289 }, 290 { 291 text: 'Cancel', 292 action: () => { 293 console.info('cancel button click') 294 }, 295 fontSize: 15, 296 fontColor: Color.Black 297 },] as [PopupButtonOptions?, PopupButtonOptions?] 298 }) 299 } 300 .width(400) 301 .height(200) 302 .borderWidth(2) 303 .justifyContent(FlexAlign.Center) 304 } 305} 306``` 307 308 309
