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)
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**Atomic service API**: This API can be used in atomic services since API version 12.
42
43**System capability**: SystemCapability.ArkUI.ArkUI.Full
44
45| Name       | Type      | Mandatory       | Description                           |
46| ----------- | ---------- | ------| --------------------------------- |
47| 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**.|
48| title     | [PopupTextOptions](#popuptextoptions)                        | No  | Title of the popup.                 |
49| message   | [PopupTextOptions](#popuptextoptions)                        | Yes  | Content of the popup.<br>**NOTE**<br>**fontWeight** is not available for **messages**.|
50| showClose | boolean \| [Resource](ts-types.md#resource)                | No  | Whether to show the close button.<br>Default value: **true**|
51| onClose   | () => void                                                   | No  | Callback for the popup close button.|
52| buttons   | [[PopupButtonOptions](#popupbuttonoptions)?,[PopupButtonOptions](#popupbuttonoptions)?] | No  | Buttons of the popup. A maximum of two buttons can be set.|
53| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction)                                             | No                               | Layout direction.<br>Default value: **Direction.Auto**                               |
54
55## PopupTextOptions
56
57Defines the text parameters of the popup.
58
59**Atomic service API**: This API can be used in atomic services since API version 12.
60
61**System capability**: SystemCapability.ArkUI.ArkUI.Full
62
63| Name      | Type                                                        | Mandatory| Description              |
64| ---------- | ------------------------------------------------------------ | ---- | ------------------ |
65| text       | [ResourceStr](ts-types.md#resourcestr)                       | Yes  | Text content.    |
66| fontSize   | number \| string \| [Resource](ts-types.md#resource)         | No  | Text font size.<br>Default value: **$r('sys.float.ohos_id_text_size_body2')** |
67| fontColor  | [ResourceColor](ts-types.md#resourcecolor)                   | No  | Text font color.<br>Default value: **$r('sys.color.ohos_id_color_text_secondary')**|
68| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | No  | Text font weight.<br>Default value: **FontWeight.Regular**|
69
70## PopupButtonOptions
71
72Defines the button attributes and events.
73
74**Atomic service API**: This API can be used in atomic services since API version 12.
75
76**System capability**: SystemCapability.ArkUI.ArkUI.Full
77
78| Name     | Type                                                | Mandatory| Description                  |
79| --------- | ---------------------------------------------------- | ---- | ---------------------- |
80| text      | [ResourceStr](ts-types.md#resourcestr)               | Yes  | Text of the button.        |
81| action    | () => void                                           | No  | Click callback of the button.|
82| 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')**|
83| 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')**|
84
85##  PopupIconOptions
86
87Defines the attributes of the icon (in the upper right corner).
88
89**Atomic service API**: This API can be used in atomic services since API version 12.
90
91**System capability**: SystemCapability.ArkUI.ArkUI.Full
92
93| Name        | Type                                                        | Mandatory| Description                              |
94| ------------ | ------------------------------------------------------------ | ---- | ---------------------------------- |
95| image        | [ResourceStr](ts-types.md#resourcestr)                       | Yes  | Icon content.                    |
96| width        | [Dimension](ts-types.md#dimension10)                         | No  | Icon width.<br>Default value: **32VP**|
97| height       | [Dimension](ts-types.md#dimension10)                         | No  | Icon height.<br>Default value: **32VP**|
98| fillColor    | [ResourceColor](ts-types.md#resourcecolor)                   | No  | Icon fill color.                |
99| 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')** |
100
101## Example
102
103```ts
104// xxx.ets
105import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI';
106
107@Entry
108@Component
109struct PopupExample {
110
111  build() {
112    Row() {
113      // Define a popup.
114      Popup({
115        // Set the icon through PopupIconOptions.
116        icon: {
117          image: $r('app.media.icon'),
118          width:32,
119          height:32,
120          fillColor:Color.White,
121          borderRadius: 16
122        } as PopupIconOptions,
123        // Set the text through PopupTextOptions.
124        title: {
125          text: 'This is a popup with PopupOptions',
126          fontSize: 20,
127          fontColor: Color.Black,
128          fontWeight: FontWeight.Normal
129        } as PopupTextOptions,
130        // Set the text through PopupTextOptions.
131        message: {
132          text: 'This is the message',
133          fontSize: 15,
134          fontColor: Color.Black
135        } as PopupTextOptions,
136        showClose: false,
137        onClose: () => {
138          console.info('close Button click')
139        },
140        // Set the button through PopupButtonOptions.
141        buttons: [{
142          text: 'confirm',
143          action: () => {
144            console.info('confirm button click')
145          },
146          fontSize: 15,
147          fontColor: Color.Black,
148        },
149          {
150            text: 'cancel',
151            action: () => {
152              console.info('cancel button click')
153            },
154            fontSize: 15,
155            fontColor: Color.Black
156          },] as [PopupButtonOptions?, PopupButtonOptions?]
157      })
158    }
159    .width(300)
160    .height(200)
161    .borderWidth(2)
162    .justifyContent(FlexAlign.Center)
163  }
164}
165```
166
167![](figures/popup_7.png)
168
169## Example 2
170This example shows a mirrored layout of the popup.
171
172```ts
173// xxx.ets
174import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI'
175
176@Entry
177@Component
178struct PopupPage {
179  @State currentDirection: Direction = Direction.Rtl
180
181  build() {
182    Column() {
183      // Define a popup.
184      Popup({
185        // Set the icon through PopupIconOptions.
186        direction: this.currentDirection,
187        icon: {
188          image: $r('app.media.icon'),
189          width: 32,
190          height: 32,
191          fillColor: Color.White,
192          borderRadius: 16,
193        } as PopupIconOptions,
194        // Set the text through PopupTextOptions.
195        title: {
196          text: 'This is a popup with PopupOptions',
197          fontSize: 20,
198          fontColor: Color.Black,
199          fontWeight: FontWeight.Normal,
200
201        } as PopupTextOptions,
202        // Set the text through PopupTextOptions.
203        message: {
204          text: 'This is the message',
205          fontSize: 15,
206          fontColor: Color.Black,
207        } as PopupTextOptions,
208        showClose: true,
209        onClose: () => {
210          console.info('close Button click')
211        },
212        // Set the button through PopupButtonOptions.
213        buttons: [{
214          text: 'confirm',
215          action: () => {
216            console.info('confirm button click')
217          },
218          fontSize: 15,
219          fontColor: Color.Black,
220
221        },
222          {
223            text: 'cancel',
224            action: () => {
225              console.info('cancel button click')
226            },
227            fontSize: 15,
228            fontColor: Color.Black,
229          },] as [PopupButtonOptions?, PopupButtonOptions?],
230      })
231
232    }
233    .justifyContent(FlexAlign.Center)
234    .width('100%')
235    .height('100%')
236  }
237}
238```
239
240![](figures/popup_8.png)
241