Skip to content

Commit 74cbb23

Browse files
author
Zdravko
authored
Merge pull request #4 from NativeScript/zbranzov/vue-app-styling
chore: split vue examples
2 parents 3141e90 + 00413b7 commit 74cbb23

4 files changed

Lines changed: 258 additions & 126 deletions

File tree

‎demo-vue/app/components/GettingStarted.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<Page class="page">
3+
<ActionBar :title="title">
4+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
5+
</ActionBar>
6+
<GridLayout rows="50, *">
7+
<PickerField hint="Getting Started" padding="10" :items="pickerItems"></PickerField>
8+
</GridLayout>>
9+
</Page>
10+
</template>
11+
12+
<script>
13+
import { PickerField } from "nativescript-picker";
14+
import * as frameModule from "tns-core-modules/ui/frame";
15+
export default {
16+
name: "Getting Started",
17+
computed: {
18+
},
19+
created() {
20+
for(let i = 0; i < 100; i++) {
21+
this.pickerItems.push("Item " + i);
22+
}
23+
},
24+
data() {
25+
return {
26+
pickerItems: [],
27+
title: "Getting Started"
28+
};
29+
},
30+
methods: {
31+
onNavigationButtonTap() {
32+
frameModule.topmost().goBack();
33+
},
34+
}
35+
};
36+
</script>
37+
38+
<style scoped lang="scss">
39+
</style>

‎demo-vue/app/components/Home.vue‎

Lines changed: 40 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,54 @@
11
<template>
2-
<Page class="page">
3-
<ActionBar title="PickerField Demo Vue">
4-
</ActionBar>
5-
<GridLayout rows="50, 50, 50, 50, *">
6-
<PickerField hint="Getting Started" padding="10" :items="pickerItems"></PickerField>
7-
8-
<PickerField hint="Styling"
9-
row="1"
10-
padding="10"
11-
:pickerTitle="pickerTitle"
12-
for="item in pickerObjects"
13-
class="picker-field"
14-
textField="name"
15-
iOSCloseButtonIcon="14"
16-
iOSCloseButtonPosition="left"
17-
androidCloseButtonPosition="actionBar"
18-
androidCloseButtonIcon="ic_media_previous">
19-
<v-template>
20-
<GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
21-
<Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
22-
<Label :text="item.name" col="0" row="1" class="item-template-label red-label"
23-
marginBottom="20"></Label>
24-
<Image :src="item.imageUrl" col="1" row="0" rowSpan="2" class="item-template-picture"></Image>
25-
</GridLayout>
26-
</v-template>
27-
</PickerField>
28-
29-
<PickerField hint="Value APIs"
30-
ref="apiPicker"
31-
row="2"
32-
padding="10"
33-
for="item in pickerObjects"
34-
textField="description"
35-
valueField="name"
36-
pickerTitle="Select item from list">
37-
<v-template>
38-
<GridLayout rows="auto, auto, auto" backgroundColor="lightBlue">
39-
<Label :text="item.id" class="item-template-label red-label" margin="20"></Label>
40-
<Label :text="item.name" row="1" class="item-template-label green-label"></Label>
41-
<Label :text="item.description" row="2" class="item-template-label green-label" marginBottom="20"></Label>
42-
</GridLayout>
43-
</v-template>
44-
</PickerField>
45-
<Button row="3" @tap="checkTap" text="Check picker value APIs"></Button>
46-
</GridLayout>>
47-
</Page>
2+
<Page>
3+
<ActionBar title="PickerField Vue">
4+
</ActionBar>
5+
<ListView ref="listView"
6+
for="example in examples"
7+
@itemTap="goToExample">
8+
<v-template>
9+
<StackLayout class="item" orientation="vertical">
10+
<Label :text="example.name" class="titleLabel"></Label>
11+
<StackLayout height="1" backgroundColor="#EEEEEE"></StackLayout>
12+
</StackLayout>
13+
</v-template>
14+
</ListView>
15+
</Page>
4816
</template>
4917

5018
<script>
51-
import { PickerField } from "nativescript-picker";
52-
import { EventData } from "tns-core-modules/data/observable";
53-
import { Button } from "tns-core-modules/ui/button";
19+
import GettingStarted from './GettingStarted';
20+
import Styling from './Styling';
21+
import ValueApis from './ValueApis';
5422
export default {
55-
computed: {
56-
message() {
57-
return "test";
58-
}
59-
},
60-
created() {
61-
for(let i = 0; i < 100; i++) {
62-
this.pickerItems.push("Item " + i);
63-
}
64-
65-
for(let i = 0; i < 20; i++) {
66-
this.pickerObjects.push({ id: i, name: "Item " + i, description: "Description " + i , imageUrl: "https://picsum.photos/150/70/?random" });
67-
}
68-
},
69-
data() {
70-
return {
71-
pickerItems: [],
72-
pickerObjects: [],
73-
pickerTitle: "Select item from list"
74-
};
75-
},
76-
methods: {
77-
checkTap: function(args) {
78-
let picker = this.$refs.apiPicker.nativeView;
79-
console.log("text: ", picker.text);
80-
console.log("selectedValue: ", picker.selectedValue);
81-
console.log("selectedIndex:", picker.selectedIndex);
82-
alert({
83-
title: "PickerField available APIs:",
84-
message: `text: ${picker.text}\n` + `selectedValue: ${picker.selectedValue}\n` + `selectedIndex: ${picker.selectedIndex}`,
85-
okButtonText: "OK"
86-
});
23+
name: 'Home',
24+
data() {
25+
return {
26+
examples: [
27+
GettingStarted,
28+
Styling,
29+
ValueApis
30+
],
31+
};
32+
},
33+
methods: {
34+
goToExample({ item }) {
35+
this.$navigateTo(item);
36+
}
8737
}
88-
}
89-
};
38+
};
9039
</script>
9140

9241
<style scoped lang="scss">
93-
@import "../app-variables";
9442
95-
.item-template-label {
96-
margin-left: 20;
43+
.itemStackLayout {
44+
text-align: left;
45+
vertical-align: center;
46+
font-size: 16;
9747
}
9848
99-
.item-template-top-label {
100-
margin: 20;
101-
font-weight: bold;
49+
.titleLabel {
50+
margin: 16;
51+
vertical-align: center;
10252
}
103-
104-
.green-label {
105-
color: green;
106-
}
107-
108-
.red-label {
109-
color: red;
110-
}
111-
112-
/* Styling css start */
113-
114-
.picker-field {
115-
background-color: lightblue;
116-
color: blue;
117-
}
118-
119-
ListView.picker-field {
120-
background-color: green;
121-
margin-left: 20;
122-
margin-right: 20;
123-
margin-bottom: 20;
124-
separator-color: red;
125-
}
126-
127-
ActionBar.picker-field {
128-
background-color:yellow;
129-
color:black;
130-
}
131-
132-
.item-template-picture {
133-
height: 70;
134-
width: 150;
135-
margin: 20;
136-
margin-left: 100;
137-
}
138-
139-
/* Styling css end */
14053
</style>
54+

‎demo-vue/app/components/Styling.vue‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<template>
2+
<Page class="page">
3+
<ActionBar :title="title">
4+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
5+
</ActionBar>
6+
<GridLayout rows="50, *">
7+
<PickerField hint="Styling"
8+
row="0"
9+
padding="10"
10+
:pickerTitle="pickerTitle"
11+
for="item in pickerObjects"
12+
class="picker-field"
13+
textField="name"
14+
iOSCloseButtonIcon="14"
15+
iOSCloseButtonPosition="left"
16+
androidCloseButtonPosition="actionBar"
17+
androidCloseButtonIcon="ic_media_previous">
18+
<v-template>
19+
<GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
20+
<Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
21+
<Label :text="item.name" col="0" row="1" class="item-template-label red-label"
22+
marginBottom="20"></Label>
23+
<Image :src="item.imageUrl" col="1" row="0" rowSpan="2" class="item-template-picture"></Image>
24+
</GridLayout>
25+
</v-template>
26+
</PickerField>
27+
</GridLayout>
28+
</Page>
29+
</template>
30+
31+
<script>
32+
import { PickerField } from "nativescript-picker";
33+
import * as frameModule from "tns-core-modules/ui/frame";
34+
export default {
35+
name: "Styling",
36+
computed: {
37+
},
38+
created() {
39+
for(let i = 0; i < 20; i++) {
40+
this.pickerObjects.push({ id: i, name: "Item " + i, description: "Description " + i , imageUrl: "https://picsum.photos/150/70/?random" });
41+
}
42+
},
43+
data() {
44+
return {
45+
pickerObjects: [],
46+
pickerTitle: "Select item from list",
47+
title: "Styling"
48+
};
49+
},
50+
methods: {
51+
onNavigationButtonTap() {
52+
frameModule.topmost().goBack();
53+
},
54+
}
55+
};
56+
</script>
57+
58+
<style scoped lang="scss">
59+
@import "../app-variables";
60+
61+
.item-template-label {
62+
margin-left: 20;
63+
}
64+
65+
.item-template-top-label {
66+
margin: 20;
67+
font-weight: bold;
68+
}
69+
70+
.red-label {
71+
color: red;
72+
}
73+
74+
.picker-field {
75+
background-color: lightblue;
76+
color: blue;
77+
}
78+
79+
ListView.picker-field {
80+
background-color: green;
81+
margin-left: 20;
82+
margin-right: 20;
83+
margin-bottom: 20;
84+
separator-color: red;
85+
}
86+
87+
ActionBar.picker-field {
88+
background-color:yellow;
89+
color:black;
90+
}
91+
92+
.item-template-picture {
93+
height: 70;
94+
width: 150;
95+
margin: 20;
96+
margin-left: 100;
97+
}
98+
</style>

0 commit comments

Comments
 (0)