1# ExceptionPrompt
2
3
4The exception prompt component is used to show an error message when an error arises.
5
6
7> **NOTE**
8>
9> This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Modules to Import
13
14```ts
15import { ExceptionPrompt, PromptOptions, MarginType } from '@kit.ArkUI'
16```
17
18
19## Child Components
20
21Not supported
22
23## Attributes
24
25The [universal attributes](ts-universal-attributes-size.md) are not supported.
26
27## ExceptionPrompt
28
29ExceptionPrompt({ options: PromptOptions, onTipClick?: ()=>void, onActionTextClick?: ()=>void })
30
31**Decorator**: @Component
32
33**Atomic service API**: This API can be used in atomic services since API version 12.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37**Parameters**
38
39
40| Name| Type| Mandatory| Decorator| Description|
41| -------- | -------- | -------- | -------- | -------- |
42| options | [PromptOptions](#promptoptions) | Yes| \@Prop | Exception prompt configuration.|
43| onTipClick | ()=>void | No| - | Callback invoked when the prompt text on the left is clicked.|
44| onActionTextClick | ()=>void | No| - | Callback invoked when the icon on the right is clicked.|
45
46## PromptOptions
47
48Defines the exception prompt options.
49
50**Atomic service API**: This API can be used in atomic services since API version 12.
51
52**System capability**: SystemCapability.ArkUI.ArkUI.Full
53
54| Name| Type| Mandatory| Description|
55| -------- | -------- | -------- | -------- |
56| icon | [ResourceStr](ts-types.md#resourcestr) | No| Icon of the exception prompt.|
57| tip | [ResourceStr](ts-types.md#resourcestr) | No| Text content of the exception prompt.<br>By default, the following text resources are provided:<br>1. **ohos_network_not_connected**: displayed when no Internet connection.<br>2. **ohos_network_connected_unstable**: displayed when the Internet connection is unstable.<br>3. **ohos_unstable_connect_server**: displayed when the server fails to be connected.<br>4. **ohos_custom_network_tips_left**: displayed when an Internet connection is available but the location fails to be obtained.|
58| marginType | [MarginType](#margintype) | Yes| Margin type of the exception prompt.|
59| actionText | [ResourceStr](ts-types.md#resourcestr) | No| Text of the icon on the right of the exception prompt.|
60| marginTop | [Dimension](ts-types.md#dimension10) | Yes| Top margin of the exception prompt.|
61| isShown | boolean | No| Whether the exception prompt is displayed.<br>**true**: The exception prompt is displayed.<br>**false**: The exception prompt is displayed.|
62
63## MarginType
64
65Defines the margin type.
66
67**Atomic service API**: This API can be used in atomic services since API version 12.
68
69**System capability**: SystemCapability.ArkUI.ArkUI.Full
70
71| Name| Value| Description|
72| -------- | -------- | -------- |
73| DEFAULT_MARGIN | 0 | Default margin:<br>Margin 1: referenced from **ohos_id_card_margin_start**.<br>Margin 2: referenced from **ohos_id_card_margin_end**.|
74| FIT_MARGIN | 1 | Adaptable margin:<br> Margin 1: referenced from **ohos_id_max_padding_start**.<br> Margin 2: referenced from **ohos_id_max_padding_end**.|
75
76## Events
77The [universal events](ts-universal-events-click.md) are supported.
78
79## Example
80### Example 1
81
82```ts
83import { ExceptionPrompt, PromptOptions, MarginType } from '@kit.ArkUI'
84
85@Entry
86@Component
87struct Index {
88  @State options: PromptOptions = {
89    icon: $r('sys.media.ohos_ic_public_fail'),
90    tip: 'Error',
91    marginType: MarginType.DEFAULT_MARGIN,
92    actionText: 'Set network',
93    marginTop: 80,
94    isShown:true
95  }
96
97  build() {
98    Column() {
99      ExceptionPrompt({
100        options: this.options,
101        onTipClick: () => {
102            // Click the text on the left to change into the connecting state
103        },
104        onActionTextClick: () => {
105            // Click Set Network to open the Set network pop-up interface
106        },
107      })
108    }
109  }
110}
111```
112
113![ExceptionPrompt1](figures/ExceptionPrompt1.png)
114
115### Example 2
116
117```ts
118import { ExceptionPrompt, PromptOptions, MarginType } from '@kit.ArkUI'
119
120@CustomDialog
121struct CustomDialogExample {
122  @Link textValue: string
123  @Link inputValue: string
124  @State options: PromptOptions = {
125    icon: $r('app.media.ic_public_fail'),
126    tip: 'Error',
127    marginType: MarginType.DEFAULT_MARGIN,
128    actionText: 'Settings',
129    marginTop: 5,
130    isShown: true
131  }
132  cancel: () => void = () => {}
133  confirm: () => void = () => {}
134  controller: CustomDialogController
135  // You can pass in multiple other controllers in the CustomDialog to open one or more other CustomDialogs in the CustomDialog. In this case, you must place the controller pointing to the self behind all controllers.
136  build() {
137    Column() {
138      ExceptionPrompt({
139        options: this.options,
140      })
141      TextInput({ placeholder: '', text: this.textValue }).margin({top:70}).height(60).width('90%')
142        .onChange((value: string) => {
143          this.textValue = value
144        })
145      Text('Are you sure you want to change the text?').fontSize(16).margin({ bottom: 10 })
146      Flex({ justifyContent: FlexAlign.SpaceAround }) {
147        Button('No')
148          .onClick(() => {
149            this.controller.close()
150            this.cancel()
151          }).backgroundColor(0xffffff).fontColor(Color.Black)
152        Button('OK')
153          .onClick(() => {
154            this.inputValue = this.textValue
155            this.controller.close()
156            this.confirm()
157          }).backgroundColor(0xffffff).fontColor(Color.Red)
158      }.margin({ bottom: 10 })
159    }
160  }
161}
162@Entry
163@Component
164struct Index1 {
165  @State ButtonText: string = ''
166  @State MAP_HEIGHT: string = '30%'
167  @State duration: number = 2500
168  @State tips: string = ''
169  @State actionText: string = ''
170  controller: TextInputController = new TextInputController()
171  cancel: () => void = () => {}
172  confirm: () => void = () => {}
173  @State options: PromptOptions = {
174    icon: $r('app.media.ic_public_fail'),
175    tip: '',
176    marginType: MarginType.DEFAULT_MARGIN,
177    actionText: '',
178    marginTop: 80,
179    isShown: true
180  }
181  @State textValue: string = ''
182  @State inputValue: string = 'click me'
183  dialogController: CustomDialogController | undefined = new CustomDialogController({
184    builder: CustomDialogExample({
185      cancel: this.onCancel,
186      confirm: this.onAccept,
187      textValue: $textValue,
188      inputValue: $inputValue
189    }),
190    cancel: this.existApp,
191    autoCancel: true,
192    alignment: DialogAlignment.Bottom,
193    offset: { dx: 0, dy: -20 },
194    gridCount: 4,
195    customStyle: false
196  })
197
198  aboutToDisappear() {
199    this.dialogController = undefined // Set dialogController to undefined.
200  }
201
202  onCancel() {
203    console.info('Callback when the first button is clicked')
204  }
205
206  onAccept() {
207    console.info('Callback when the second button is clicked')
208  }
209
210  existApp() {
211    console.info('Click the callback in the blank area')
212  }
213
214  build() {
215    Column() {
216      Button('Click Me')
217        .width('30%')
218        .margin({top:420})
219        .zIndex(999)
220        .onClick(()=>{
221          if (this.dialogController != undefined) {
222            this.dialogController.open()
223          }
224        })
225    }
226    .height('100%')
227    .width('100%')
228
229  }
230}
231```
232
233![ExceptionPrompt2](figures/ExceptionPrompt2.gif)
234