Skip to content

Commit e61450c

Browse files
OmbuwebNathanWalker
Ombuweb
and
NathanWalker
authored
docs: initial content for Dialogs in NativeScript (#21)
Co-authored-by: Nathan Walker <[email protected]>
1 parent 50832df commit e61450c

File tree

2 files changed

+172
-2
lines changed

2 files changed

+172
-2
lines changed

‎content/sidebar.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,10 @@ export default [
224224
{
225225
text: 'UI',
226226
items: [
227+
{
228+
text: 'Dialogs',
229+
link: '/ui/dialogs',
230+
},
227231
{
228232
text: 'Image',
229233
items: [
@@ -295,8 +299,8 @@ export default [
295299
// { text: 'PromptDialog', link: '//#' },
296300
// ],
297301
// },
298-
// ],
299-
// },
302+
],
303+
},
300304
// {
301305
// text: 'Diving Deeper',
302306
// items: [{ text: 'Architecture concepts', link: '//#' }],

‎content/ui/dialogs.md

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
---
2+
title: Dialogs
3+
---
4+
5+
<!-- TODO: Add SB+Preview -->
6+
7+
NativeScript lets you create dialogs in a similar manner to the web browser. Available dialogs are: `action`,`alert`, `confirm`, `prompt`, `login`.
8+
9+
All the dialogs take a `DialogOption` object with the properties:
10+
11+
- `title`: Sets the dialog title.
12+
- `message` : Sets the dialog message.
13+
- `cancelable`(`android only`): Sets if the dialog can be canceled by taping outside of the dialog.
14+
- `theme`(`android only`): Sets the theme of the Dialog. Usable themes can be found: https://developer.android.com/reference/android/R.style
15+
16+
## Creating an alert dialog
17+
| <img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/AlertDialog.png" alt="Android AlertDialog Example" height="300"/> | <img alt="iOS AlertDialog Example" src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/AlertDialog.png" height="300" />
18+
|:-------|:----------
19+
To create an alert, use the `Dialogs.alert()` method:
20+
21+
`Dialogs.alert` has additonal `okButtonText` property.
22+
23+
At minimum, you should pass it a message:
24+
```ts
25+
26+
Dialogs.alert("Some messge").then(() => {
27+
console.log("User notified!");
28+
});
29+
```
30+
31+
Add a title, custom OK text and more as follows:
32+
```ts
33+
const alertOptions: AlertOptions = {
34+
title: "Race selection",
35+
message: "Race chosen: Unicorn",
36+
okButtonText: "OK",
37+
cancelable: false
38+
39+
Dialogs.alert(alertOptions).then(() => {
40+
console.log("User notified!");
41+
});
42+
```
43+
:::
44+
45+
## Creating an action dialog
46+
| <img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/ActionDialog.png" alt="Android ActionDialog Example" height="200" width="300"/> | <img alt="iOS ActionDialog Example" src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/ActionDialog.png" height="00" width="300"/>
47+
|:-------|:----------
48+
To let the user choose an input from a list, use `Dialogs.action()`:
49+
For the `action` dialog, there are 3 more properties available:
50+
51+
- `cancelButtonText`: Sets custom text for the cancel button.
52+
- `actions`: Sets the list of available inputs.
53+
- `destructiveActionsIndexes` (`iOS only`): Sets an array of the indexes of destructive actions.
54+
55+
56+
```ts
57+
onst actionOptions = {
58+
title: "Race selection",
59+
message: "Choose your race",
60+
cancelButtonText: "Cancel",
61+
actions: ["Human", "Elf", "Dwarf", "Orc", "Unicorn"],
62+
cancelable: true
63+
};
64+
65+
Dialogs.action(actionOptions).then((result) => {
66+
console.log(result);
67+
});
68+
```
69+
70+
## Creating a confirm dialog
71+
| <img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/ConfirmDialog.png" alt="Android ConfirmDialog Example" height="300" width="400"/> | <img alt="iOS ConfirmDialog Example" src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/ConfirmDialog.png" height="300" width="400"/>
72+
|:-------|:----------
73+
For a user's action that requires confirmation, use the `Dialogs.confirm`:
74+
75+
Additional properties for the parameter object are:
76+
77+
- `cancelButtonText`
78+
- `okButtonText`
79+
- `neutralButtonText`
80+
81+
```ts
82+
83+
const confirmOptions = {
84+
title: "Race selection",
85+
message: "Are you sure you want to be a Unicorn?",
86+
okButtonText: "Yes",
87+
cancelButtonText: "No",
88+
neutralButtonText: "Cancel"
89+
};
90+
Dialogs.confirm(confirmOptions)
91+
.then((result) => {
92+
console.log(result);
93+
});
94+
95+
```
96+
97+
## Creating a prompt dialog
98+
99+
| <img class="w-full sm:w-1/2" src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/PromptDialog.png" alt="Android PromptDialog Example" height="300" width="400"/> | <img class="w-full sm:w-1/2" alt="iOS PromptDialog Example" src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/PromptDialog.png" height="300" width="400"/>
100+
|:-------|:----------
101+
To request for a user's input, use `Dialogs.prompt`:
102+
103+
Other properties available for the `Dialogs.prompt`:
104+
105+
- `defaultText`: Sets the default text to display in the input box.
106+
- `inputType`
107+
- Sets the prompt input type (`text`, `password`, or `email`).
108+
- Available options: `email`, `decimal`, `phone`, `number`, `text`, `password`, or `email`
109+
- `capitalizationType`
110+
- Sets the prompt capitalization type.
111+
- Avalable options: `none`, `allCharacters`, `sentences`, or `words`.
112+
113+
114+
```ts
115+
import { Dialogs, CoreTypes, inputType } from '@nativescript/core'
116+
117+
export function showPromptDialog() {
118+
const promptOptions = {
119+
title: 'Hey There',
120+
defaultText: ' Enter your mood ',
121+
message: "How you doin'",
122+
okButtonText: 'OK',
123+
cancelButtonText: 'Cancel',
124+
neutralButtonText: 'Neutral',
125+
cancelable: true,
126+
inputType: inputType.text,
127+
capitalizationType: Enums.AutocapitalizationType.sentences
128+
}
129+
130+
Dialogs.prompt(promptOptions).then(result => {
131+
console.log('Hello, ' + result.text)
132+
})
133+
}
134+
```
135+
136+
## Creating a login dialog
137+
| <img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/LoginDialog.png" class="w-full sm:w-1/2" alt="Android LoginDialog Example" height="300" width="400"/> | <img alt="iOS LoginDialog Example" class="w-full sm:w-1/2" src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/LoginDialog.png" height="300" width="400"/>
138+
|:-------|:----------
139+
To have an isolated login form, use `Dialogs.login`:
140+
141+
:::details Additional Resources
142+
143+
## API References
144+
| Name | Type |
145+
| ---------------------------------------------------------------------------------------------- | ----------- |
146+
| [@nativescript/core/dialogs](https://docs.nativescript.org/api-reference/modules#dialogs) | `Module` |
147+
| [action](https://docs.nativescript.org/api-reference/interfaces/alertoptions) | `function` |
148+
| [ActionOptions](https://docs.nativescript.org/api-reference/interfaces/actionoptions) | `interface` |
149+
| [alert](https://docs.nativescript.org/api-reference/modules#dialogs) | `function` |
150+
| [AlertOptions](https://docs.nativescript.org/api-reference/interfaces/alertoptions) | `interface` |
151+
| [confirm](https://docs.nativescript.org/api-reference/modules#dialogs) | `function` |
152+
| [ConfirmOptions](https://docs.nativescript.org/api-reference/interfaces/confirmoptions) | `interface` |
153+
| [login](https://docs.nativescript.org/api-reference/modules#dialogs) | `function` |
154+
| [LoginOptions](https://docs.nativescript.org/api-reference/interfaces/loginoptions) | `interface` |
155+
| [LoginResults](https://docs.nativescript.org/api-reference/interfaces/loginresult) | `interface` |
156+
| [prompt](https://docs.nativescript.org/api-reference/modules#dialogs) | `function` |
157+
| [PromptOptions](https://docs.nativescript.org/api-reference/interfaces/promptoptions) | `interface` |
158+
| [PromptResults](https://docs.nativescript.org/api-reference/interfaces/promptresult) | `interface` |
159+
160+
## Native Component
161+
162+
| Android | iOS |
163+
| :--------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- |
164+
| [android.app.AlertDialog.Builder](https://developer.android.com/reference/android/app/AlertDialog.Builder) | [UIAlertController](https://developer.apple.com/documentation/uikit/uialertcontroller) |
165+
166+
:::

0 commit comments

Comments
 (0)