8000 feat (modals): Show modal with all possible ShowModalOptions options · rchavezj/nativescript-vue@f1d9aae · GitHub
[go: up one dir, main page]
Skip to content

Commit f1d9aae

Browse files
msaelicesmsaelices
committed
feat (modals): Show modal with all possible ShowModalOptions options
1 parent e2abec8 commit f1d9aae

File tree

3 files changed

+33
-13
lines changed

3 files changed

+33
-13
lines changed

‎platform/nativescript/plugins/modal-plugin.js

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ export default {
3030

3131
Vue.prototype.$showModal = function(component, options) {
3232
const defaultOptions = {
33-
fullscreen: false
33+
fullscreen: false,
34+
animated: true,
35+
stretched: false
3436
}
3537
// build options object with defaults
3638
options = Object.assign({}, defaultOptions, options)
@@ -63,12 +65,13 @@ export default {
6365
})
6466
const modalPage = navEntryInstance.$mount().$el.nativeView
6567

66-
this.$el.nativeView.showModal(
67-
modalPage,
68-
null,
69-
closeCb,
70-
options.fullscreen
71-
)
68+
this.$el.nativeView.showModal(modalPage, {
69+
context: null,
70+
closeCallback: closeCb,
71+
fullscreen: options.fullscreen,
72+
animated: options.animated,
73+
stretched: options.stretched
74+
})
7275
})
7376
}
7477
}

‎samples/app/modals.js

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const ModalComponent = {
2424
<Label :text="foo"/>
2525
<FooComp></FooComp>
2626
</StackLayout>
27-
</Page>
27+
</Page>
2828
</Frame>
2929
`,
3030
components: { FooComp }
@@ -33,7 +33,10 @@ const ModalComponent = {
3333
new Vue({
3434
data() {
3535
return {
36-
modalResult: 'No result yet.'
36+
modalResult: 'No result yet.',
37+
animated: true,
38+
fullscreen: true,
39+
stretched: false
3740
}
3841
},
3942
template: `
@@ -42,8 +45,20 @@ new Vue({
4245
<ActionBar title="Modals" />
4346
4447
<StackLayout>
45-
<Label :text="modalResult" />
46-
<Button text="Open Modal" @tap="openModal"/>
48+
<FlexboxLayout justifyContent="center">
49+
<Label text="Animated" />
50+
<Switch v-model="animated" />
51+
</FlexboxLayout>
52+
<FlexboxLayout justifyContent="center">
53+
<Label text="Stretched" />
54+
<Switch v-model="stretched" />
55+
</FlexboxLayout>
56+
<FlexboxLayout justifyContent="center">
57+
<Label text="Fullscreen" />
58+
<Switch v-model="fullscreen" />
59+
</FlexboxLayout>
60+
<Button text="Open Modal" @tap="openModal"/>
61+
<Label :text="modalResult" />
4762
</StackLayout>
4863
</Page>
4964
</Frame>
@@ -52,7 +67,9 @@ new Vue({
5267
openModal() {
5368
this.$showModal(ModalComponent, {
5469
props: { foo: 'bar' },
55-
fullscreen: true
70+
animated: this.animated,
71+
fullscreen: this.fullscreen,
72+
stretched: this.stretched
5673
}).then(res => {
5774
this.modalResult = res
5875
})

‎samples/app/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"main": "app-with-shared-actionbar.js",
< 45D1 code>2+
"main": "modals.js",
33
"name": "nativescript-template-tutorial",
44
"version": "1.0.1"
55
}

0 commit comments

Comments
 (0)
0