enrecipes/app/components/modal/PromptDialog.vue

58 lines
1.1 KiB
Vue
Raw Normal View History

2020-10-21 17:54:45 +00:00
<template>
<Page>
2020-10-22 18:36:50 +00:00
<StackLayout
class="dialogContainer"
:class="isLightTheme ? 'light' : 'dark'"
>
2020-10-21 17:54:45 +00:00
<Label class="dialogTitle orkm" :text="title" />
<TextField
width="100%"
:hint="hint"
v-model="category"
autocapitalizationType="words"
/>
<StackLayout orientation="horizontal" horizontalAlignment="right">
<Label class="action orkm" text="CANCEL" @tap="$modal.close(false)" />
<Label
class="action orkm"
:text="action"
@tap="$modal.close(category)"
/>
</StackLayout>
</StackLayout>
</Page>
</template>
<script>
2020-10-22 18:36:50 +00:00
import Theme from "@nativescript/theme"
2020-10-21 17:54:45 +00:00
export default {
props: ["title", "hint", "action"],
data() {
return {
category: null,
2020-10-22 18:36:50 +00:00
isLightTheme: true,
2020-10-21 17:54:45 +00:00
}
},
2020-10-22 18:36:50 +00:00
created() {
this.isLightTheme = Theme.getMode() == "ns-light" ? true : false
},
2020-10-21 17:54:45 +00:00
}
</script>
<style lang="scss" scoped>
TextField {
margin: 0 24 16;
}
.dialogContainer {
padding: 0 24;
}
.dialogTitle {
padding: 24 0 12;
font-size: 20;
}
.action {
padding: 24 0 24 32;
font-size: 12;
color: #ff7043;
}
</style>