Skip to content

chore: split vue examples #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 1, 2019
Merged

chore: split vue examples #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions demo-vue/app/components/GettingStarted.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<template>
<Page class="page">
<ActionBar :title="title">
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
</ActionBar>
<GridLayout rows="50, *">
<PickerField hint="Getting Started" padding="10" :items="pickerItems"></PickerField>
</GridLayout>>
</Page>
</template>

<script>
import { PickerField } from "nativescript-picker";
import * as frameModule from "tns-core-modules/ui/frame";
export default {
name: "Getting Started",
computed: {
},
created() {
for(let i = 0; i < 100; i++) {
this.pickerItems.push("Item " + i);
}
},
data() {
return {
pickerItems: [],
title: "Getting Started"
};
},
methods: {
onNavigationButtonTap() {
frameModule.topmost().goBack();
},
}
};
</script>

<style scoped lang="scss">
</style>
166 changes: 40 additions & 126 deletions demo-vue/app/components/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,140 +1,54 @@
<template>
<Page class="page">
<ActionBar title="PickerField Demo Vue">
</ActionBar>
<GridLayout rows="50, 50, 50, 50, *">
<PickerField hint="Getting Started" padding="10" :items="pickerItems"></PickerField>

<PickerField hint="Styling"
row="1"
padding="10"
:pickerTitle="pickerTitle"
for="item in pickerObjects"
class="picker-field"
textField="name"
iOSCloseButtonIcon="14"
iOSCloseButtonPosition="left"
androidCloseButtonPosition="actionBar"
androidCloseButtonIcon="ic_media_previous">
<v-template>
<GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
<Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
<Label :text="item.name" col="0" row="1" class="item-template-label red-label"
marginBottom="20"></Label>
<Image :src="item.imageUrl" col="1" row="0" rowSpan="2" class="item-template-picture"></Image>
</GridLayout>
</v-template>
</PickerField>

<PickerField hint="Value APIs"
ref="apiPicker"
row="2"
padding="10"
for="item in pickerObjects"
textField="description"
valueField="name"
pickerTitle="Select item from list">
<v-template>
<GridLayout rows="auto, auto, auto" backgroundColor="lightBlue">
<Label :text="item.id" class="item-template-label red-label" margin="20"></Label>
<Label :text="item.name" row="1" class="item-template-label green-label"></Label>
<Label :text="item.description" row="2" class="item-template-label green-label" marginBottom="20"></Label>
</GridLayout>
</v-template>
</PickerField>
<Button row="3" @tap="checkTap" text="Check picker value APIs"></Button>
</GridLayout>>
</Page>
<Page>
<ActionBar title="PickerField Vue">
</ActionBar>
<ListView ref="listView"
for="example in examples"
@itemTap="goToExample">
<v-template>
<StackLayout class="item" orientation="vertical">
<Label :text="example.name" class="titleLabel"></Label>
<StackLayout height="1" backgroundColor="#EEEEEE"></StackLayout>
</StackLayout>
</v-template>
</ListView>
</Page>
</template>

<script>
import { PickerField } from "nativescript-picker";
import { EventData } from "tns-core-modules/data/observable";
import { Button } from "tns-core-modules/ui/button";
import GettingStarted from './GettingStarted';
import Styling from './Styling';
import ValueApis from './ValueApis';
export default {
computed: {
message() {
return "test";
}
},
created() {
for(let i = 0; i < 100; i++) {
this.pickerItems.push("Item " + i);
}

for(let i = 0; i < 20; i++) {
this.pickerObjects.push({ id: i, name: "Item " + i, description: "Description " + i , imageUrl: "https://picsum.photos/150/70/?random" });
}
},
data() {
return {
pickerItems: [],
pickerObjects: [],
pickerTitle: "Select item from list"
};
},
methods: {
checkTap: function(args) {
let picker = this.$refs.apiPicker.nativeView;
console.log("text: ", picker.text);
console.log("selectedValue: ", picker.selectedValue);
console.log("selectedIndex:", picker.selectedIndex);
alert({
title: "PickerField available APIs:",
message: `text: ${picker.text}\n` + `selectedValue: ${picker.selectedValue}\n` + `selectedIndex: ${picker.selectedIndex}`,
okButtonText: "OK"
});
name: 'Home',
data() {
return {
examples: [
GettingStarted,
Styling,
ValueApis
],
};
},
methods: {
goToExample({ item }) {
this.$navigateTo(item);
}
}
}
};
};
</script>

<style scoped lang="scss">
@import "../app-variables";

.item-template-label {
margin-left: 20;
.itemStackLayout {
text-align: left;
vertical-align: center;
font-size: 16;
}

.item-template-top-label {
margin: 20;
font-weight: bold;
.titleLabel {
margin: 16;
vertical-align: center;
}

.green-label {
color: green;
}

.red-label {
color: red;
}

/* Styling css start */

.picker-field {
background-color: lightblue;
color: blue;
}

ListView.picker-field {
background-color: green;
margin-left: 20;
margin-right: 20;
margin-bottom: 20;
separator-color: red;
}

ActionBar.picker-field {
background-color:yellow;
color:black;
}

.item-template-picture {
height: 70;
width: 150;
margin: 20;
margin-left: 100;
}

/* Styling css end */
</style>

98 changes: 98 additions & 0 deletions demo-vue/app/components/Styling.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<template>
<Page class="page">
<ActionBar :title="title">
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
</ActionBar>
<GridLayout rows="50, *">
<PickerField hint="Styling"
row="0"
padding="10"
:pickerTitle="pickerTitle"
for="item in pickerObjects"
class="picker-field"
textField="name"
iOSCloseButtonIcon="14"
iOSCloseButtonPosition="left"
androidCloseButtonPosition="actionBar"
androidCloseButtonIcon="ic_media_previous">
<v-template>
<GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
<Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
<Label :text="item.name" col="0" row="1" class="item-template-label red-label"
marginBottom="20"></Label>
<Image :src="item.imageUrl" col="1" row="0" rowSpan="2" class="item-template-picture"></Image>
</GridLayout>
</v-template>
</PickerField>
</GridLayout>
</Page>
</template>

<script>
import { PickerField } from "nativescript-picker";
import * as frameModule from "tns-core-modules/ui/frame";
export default {
name: "Styling",
computed: {
},
created() {
for(let i = 0; i < 20; i++) {
this.pickerObjects.push({ id: i, name: "Item " + i, description: "Description " + i , imageUrl: "https://picsum.photos/150/70/?random" });
}
},
data() {
return {
pickerObjects: [],
pickerTitle: "Select item from list",
title: "Styling"
};
},
methods: {
onNavigationButtonTap() {
frameModule.topmost().goBack();
},
}
};
</script>

<style scoped lang="scss">
@import "../app-variables";

.item-template-label {
margin-left: 20;
}

.item-template-top-label {
margin: 20;
font-weight: bold;
}

.red-label {
color: red;
}

.picker-field {
background-color: lightblue;
color: blue;
}

ListView.picker-field {
background-color: green;
margin-left: 20;
margin-right: 20;
margin-bottom: 20;
separator-color: red;
}

ActionBar.picker-field {
background-color:yellow;
color:black;
}

.item-template-picture {
height: 70;
width: 150;
margin: 20;
margin-left: 100;
}
</style>
Loading