1# Dialog 2 3A dialog is a modal window. Before it disappears, users cannot perform any operation. 4 5 6## How to Use 7 8- Use a dialog to display information or operations that users need or must pay attention to. In other cases, use a non-modal window such as a notification window. 9 10- Include a combination of different components, for example, text (in different formats, such as indentation, link, or bold), list, text box, grid, icon, and image, in a dialog. It is generally used to select or confirm information. 11 12## Category 13 14- Dialog without a title 15 16- Dialog with a title 17 18- Dialog with text only 19 20### Dialog Without a Title 21 22A dialog does not have a title. 23 24If the content is not displayed in a list, leave a margin of 24 vp both above and below the content. 25 26 |  |  | 27| -------- | -------- | 28| Content only| Content and button| 29 30 31### Dialog with a Title 32 33In the title area, there can be a pure title in one or two lines. Alternatively, there can be a title followed by an operation icon. 34 35 |  | 36| -------- | 37| Title and content| 38 39If the content is not displayed in a list, leave a margin of 24 vp both above and below the content. 40 41 42### Dialog with Text Only 43 44If there is only a title, the title is centered. 45 46 47 48 49## Height and Position 50 51The height and location of a dialog differs in portrait and landscape orientations. 52 53 54### Portrait 55 56Maximum height of a dialog = 0.8 x (Screen height – Status bar height – Navigation bar height) 57 58Position: Always above the navigation bar (even if the navigation bar is hidden) 59 60 61### Landscape 62 63Maximum height of a dialog = 0.9 x (Screen height – Status bar)<br>Position: Center aligned the screen height excluding the status bar 64 65## Writing Instructions 66 67### Dialog for Operation Confirmation 68 69**Title** 70 71- Short and complete. No period is required if a statement is used. 72 73- Exclamation marks and question marks are required for exclamatory and interrogative sentences, respectively. 74 75- Concise and clear. Titles can be a phrase (verb + noun). 76 77**Content text** 78 79- Describe the content that needs to be confirmed by users. The content can be questions or statements. Try not to provide additional information. If necessary, avoid repeating the title. 80 81**Button** 82 83- Buttons allow the user to choose whether to proceed with the next action. Use operation content for buttons. 84 85- Button contents are usually the same as the verbs in the title. Do not use "Yes" or "No". 86 87 88### Dialog for Information Confirmation 89 90**Content text** 91 92- Use statements to describe the specific items that need to be notified to users. For example, no updates available. 93 94**Button** 95 96- Use **OK**. 97 98## Rules for Handling Ultra-Long UI Strings 99### Title in a Dialog 100 101- Decrease the font size to 15 fp level by level. 102 103  104 105- Wrap lines if the length exceeds the upper limit. 106 107- If the text still cannot fit in, use "..." for truncation. 108 109 110### Button in a Dialog 111 112- Do not wrap lines for button texts. 113 114 115 116- Change the buttons from horizontal alignment to vertical alignment. 117 118 119 120- Reduce the font size level by level until the minimum font size 9 fp is reached. 121 122- If the text still cannot fit in, use "..." for truncation. 123 124  125 126## Resources 127 128For details about the dialog box, see the [API Reference](../application-dev/reference/apis/js-apis-promptAction.md). 129
