Skip to content

Commit a743e33

Browse files
mbfloresmbflores
committed
Flavors: Svelte Update
Datepicker DIalogs Update titles of actionbar
1 parent b28aeb5 commit a743e33

File tree

6 files changed

+159
-16
lines changed

6 files changed

+159
-16
lines changed

‎examples/svelte/app/components/Home.svelte‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,15 @@
1818
import { navigate } from 'svelte-native'
1919
import ActivityIndicator from '~/components/ui/ActivityIndicator.svelte'
2020
import ActionBar from '~/components/ui/ActionBar.svelte'
21+
import DatePicker from '~/components/ui/DatePicker.svelte'
22+
import Dialogs from '~/components/ui/Dialogs.svelte'
2123
2224
const examples = [
2325
{name: 'ActionBar', component: ActionBar},
2426
{name: 'ActivityIndicator', component: ActivityIndicator},
2527
{name: 'Button', component: Button},
28+
{name: 'DatePicker', component: DatePicker},
29+
{name: 'Dialogs', component: Dialogs},
2630
2731
]
2832
@@ -40,6 +44,12 @@
4044
case 'Button':
4145
navigate({ page: Button })
4246
break
47+
case 'DatePicker':
48+
navigate({ page: DatePicker })
49+
break
50+
case 'Dialogs':
51+
navigate({ page: Dialogs })
52+
break
4353
default:
4454
break
4555
}

‎examples/svelte/app/components/ui/ActionBar.svelte‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,28 @@
1-
21
<page>
32
<!-- #region example-->
4-
<actionBar >
5-
<actionItem on:tap={goBack()}>
6-
<label text="<< Back"></label>
3+
4+
<actionBar title="ActionBar" >
5+
<actionItem on:tap={goBack}>
6+
<label text="<< Back"
7+
class="font-bold text-lg" />
78
</actionItem>
8-
</actionBar>
9+
</actionBar>
910
<!-- #endregion example-->
1011

11-
<gridLayout>
12-
<contentView verticalAlignment="center">
13-
14-
<label text="Main Content"
15-
verticalAlignment="center"
16-
horizontalAlignment="center"></label>
17-
</contentView>
18-
</gridLayout>
12+
<gridLayout>
13+
<contentView
14+
horizontalAlignment="center"
15+
verticalAlignment="center">
16+
<label>Main Content</label>
17+
</contentView>
18+
</gridLayout>
1919
</page>
2020

2121
<script lang="ts">
2222
import { Frame } from '@nativescript/core'
2323
2424
function goBack() {
2525
Frame.goBack();
26-
2726
}
2827
</script>
2928

‎examples/svelte/app/components/ui/ActivityIndicator.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<page>
22
<actionBar >
3-
<label text="Home"
3+
<label text="ActivityIndicator"
44
class="font-bold text-lg" />
55
</actionBar>
66
<gridLayout>

‎examples/svelte/app/components/ui/Button.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<page>
22
<actionBar >
3-
<label text="Home"
3+
<label text="Button"
44
class="font-bold text-lg" />
55
</actionBar>
66
<gridLayout>

‎examples/svelte/app/components/ui/DatePicker.svelte‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>DatePicker</label>
5+
</actionBar>
6+
7+
<gridLayout>
8+
<contentView
9+
horizontalAlignment="center"
10+
verticalAlignment="center">
11+
<stackLayout>
12+
<!-- #region example-->
13+
<datepicker bind:date="{value}"></datepicker>
14+
<!-- #endregion example-->
15+
<label>{value}</label>
16+
17+
</stackLayout>
18+
</contentView>
19+
</gridLayout>
20+
</page>
21+
22+
<script lang="ts">
23+
import { Frame } from '@nativescript/core'
24+
25+
let value = new Date();
26+
function goBack() {
27+
Frame.goBack();
28+
29+
}
30+
</script>
31+
32+
<style>
33+
</style>

‎examples/svelte/app/components/ui/Dialogs.svelte‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>Dialogs</label>
5+
</actionBar>
6+
7+
<gridLayout>
8+
<contentView
9+
horizontalAlignment="center"
10+
verticalAlignment="center">
11+
<stackLayout>
12+
13+
<button on:tap={showAlert} padding="8" >Alert</button>
14+
<button on:tap={showAction} padding="8" >Action</button>
15+
<button on:tap={showConfirm} padding="8" >Confirm</button>
16+
<button on:tap={showPrompt} padding="8" >Prompt</button>
17+
<button on:tap={showLogin} padding="8" >Login</button>
18+
19+
</stackLayout>
20+
</contentView>
21+
</gridLayout>
22+
</page>
23+
24+
<script lang="ts">
25+
import { action, login, confirm, prompt } from '@nativescript/core'
26+
27+
function showAlert() {
28+
// #region example-alert
29+
alert({
30+
title: 'Alert!',
31+
message: 'Please try again later.',
32+
okButtonText: 'OK',
33+
cancelable: true,
34+
})
35+
// #endregion example-alert
36+
console.log('Show Alert');
37+
}
38+
39+
function showAction() {
40+
// #region example-action
41+
action({
42+
title: 'Action!',
43+
message: 'Choose your language:',
44+
cancelButtonText: 'Cancel',
45+
actions: ['TypeScript', 'JavaScript', 'Neither'],
46+
cancelable: true,
47+
destructiveActionsIndexes: [2],
48+
})
49+
// #endregion example-action
50+
}
51+
52+
function showConfirm() {
53+
// #region example-confirm
54+
confirm({
55+
title: 'Confirm!',
56+
message: 'Are you sure you want to do this?',
57+
okButtonText: 'Yes',
58+
cancelButtonText: 'No',
59+
neutralButtonText: 'Cancel',
60+
}).then((result) => {
61+
console.log(result)
62+
})
63+
// #endregion example-confirm
64+
}
65+
66+
function showPrompt() {
67+
// #region example-prompt
68+
prompt({
69+
title: 'Prompt!',
70+
message: 'Enter the name of this framework:',
71+
defaultText: 'NativeScript',
72+
okButtonText: 'OK',
73+
neutralButtonText: 'Cancel',
74+
// cancelable: true,
75+
// cancelButtonText: 'Cancel',
76+
// capitalizationType: 'none',
77+
// inputType: 'email',
78+
});
79+
// #endregion example-prompt
80+
}
81+
82+
function showLogin() {
83+
// #region example-login
84+
login({
85+
title: 'Login!',
86+
message: 'Enter your credentials',
87+
okButtonText: 'Login',
88+
cancelButtonText: 'Cancel',
89+
userName: 'NativeScript',
90+
password: 'hunter2',
91+
// neutralButtonText: 'Neutral',
92+
// cancelable: true,
93+
// passwordHint: 'Your password',
94+
// userNameHint: 'Your username',
95+
});
96+
}
97+
// #endregion example-login
98+
</script>
99+
100+
<style>
101+
</style>

0 commit comments

Comments
 (0)