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): 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 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该示例通过配置PopupIconOptions、PopupTextOptions、PopupButtonOptions实现气泡的样式。 106 107```ts 108// xxx.ets 109import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI'; 110 111@Entry 112@Component 113struct 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 172 173### 示例 2（设置镜像效果） 174该示例通过配置direction实现Popup的镜像效果。 175 176```ts 177// xxx.ets 178import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@kit.ArkUI' 179 180@Entry 181@Component 182struct 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
