8000 refactor: add <Frame> element to all samples · AlexLingXiang/nativescript-vue@6f8e7b5 · GitHub
[go: up one dir, main page]
Skip to content

Commit 6f8e7b5

Browse files
msaelicesrigor789
msaelices
authored and
rigor789
committed
refactor: add <Frame> element to all samples
* Fix typo error which happens in case-sensitive filesystems. * Add <Frame> node to all the samples.
1 parent ac50072 commit 6f8e7b5

15 files changed

+232
-202
lines changed

‎samples/app/app-with-android-ios.js

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,22 @@ const Vue = require('./nativescript-vue')
22

33
new Vue({
44
template: `
5-
<Page>
6-
<StackLayout>
7-
<Label android:text="hi android" ios:text="hi ios..." />
8-
9-
<android>
10-
<Label text="hello android" />
11-
<Label text="hello android 2" />
12-
</android>
13-
<ios>
14-
<Label text="hello ios" />
15-
<Label text="hello ios 2" />
16-
</ios>
17-
</StackLayout>
18-
</Page>
5+
<Frame>
6+
<Page>
7+
<StackLayout>
8+
<Label android:text="hi android" ios:text="hi ios..." />
9+
10+
<android>
11+
<Label text="hello android" />
12+
<Label text="hello android 2" />
13+
</android>
14+
<ios>
15+
<Label text="hello ios" />
16+
<Label text="hello ios 2" />
17+
</ios>
18+
</StackLayout>
19+
</Page>
20+
</Frame>
1921
`
2022
}).$start({
2123
getRootView(self) {

‎samples/app/app-with-formatted-string.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,16 @@ const Vue = require('./nativescript-vue')
22

33
new Vue({
44
template: `
5-
<Label>
6-
<FormattedString>
7-
<Span text="some" fontWeight="Bold" />
8-
<Span text="content" />
9-
</FormattedString>
10-
</Label>
5+
<Frame>
6+
<Page>
7+
<Label>
8+
<FormattedString>
9+
<Span text="some" fontWeight="Bold" />
10+
<Span text="content" />
11+
</FormattedString>
12+
</Label>
13+
</Page>
14+
</Frame>
1115
`,
1216

1317
comments: true

‎samples/app/app-with-http-requests.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ Vue.config.debug = true
55

66
new Vue({
77
template: `
8-
<Page>
9-
<ScrollView>
10-
<StackLayout>
11-
<Button text="make request" @tap="makeRequest" />
12-
</StackLayout>
13-
</ScrollView>
14-
</Page>
8+
<Frame>
9+
<Page>
10+
<ScrollView>
11+
<StackLayout>
12+
<Button text="make request" @tap="makeRequest" />
13+
</StackLayout>
14+
</ScrollView>
15+
</Page>
16+
</Frame>
1517
`,
1618

1719
methods: {

‎samples/app/app-with-nested-object-list-view.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,20 @@ const Vue = require('./nativescript-vue')
22

33
new Vue({
44
template: `
5-
<Page>
6-
<ListView for="item in items">
7-
<v-template>
8-
<FlexboxLayout class="line">
9-
<Label :text="$index" />
10-
<Label :text="item.text" />
11-
<Label :text="item.user.name" />
12-
<Label :text="item.user.meta.age" />
13-
</FlexboxLayout>
14-
</v-template>
15-
</ListView>
16-
</Page>
5+
<Frame>
6+
<Page>
7+
<ListView for="item in items">
8+
<v-template>
9+
<FlexboxLayout class="line">
10+
<Label :text="$index" />
11+
<Label :text="item.text" />
12+
<Label :text="item.user.name" />
13+
<Label :text="item.user.meta.age" />
14+
</FlexboxLayout>
15+
</v-template>
16+
</ListView>
17+
</Page>
18+
</Frame>
1719
`,
1820

1921
data: {

‎samples/app/app-with-page-routing.js

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,20 @@ const DetailPage = {
3939
}
4040
},
4141
template: `
42-
<Page>
43-
<ActionBar title="Detail Page">
44-
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$router.back()" />
45-
</ActionBar>
46-
<StackLayout>
47-
<Label v-if="current" :text="current.text" textWrap="true" />
48-
49-
50-
<Label text="Related" />
51-
<Label text="Second Item" @tap="$router.replace('/detail/2')" style="color: blue; text-decoration: underline;" />
52-
</StackLayout>
53-
</Page>
42+
<Frame>
43+
<Page>
44+
<ActionBar title="Detail Page">
45+
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$router.back()" />
46+
</ActionBar>
47+
<StackLayout>
48+
<Label v-if="current" :text="current.text" textWrap="true" />
49+
50+
51+
<Label text="Related" />
52+
<Label text="Second Item" @tap="$router.replace('/detail/2')" style="color: blue; text-decoration: underline;" />
53+
</StackLayout>
54+
</Page>
55+
</Frame>
5456
`
5557
}
5658
const MasterPage = {
@@ -68,7 +70,7 @@ const MasterPage = {
6870
<GridLayout style="border-bottom-width: 2; border-bottom-color: red;">
6971
<Label :text="item.title" style="padding: 20"/>
7072
</GridLayout>
71-
</v-template>
73+
</v-template>
7274
</ListView>
7375
</GridLayout>
7476
</Page>

‎samples/app/app-with-pager.js

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,31 @@ new Vue({
1313
}
1414
},
1515
template: `
16-
<Page>
17-
<StackLayout>
18-
<Button text="go to first" @tap="selected = 0"/>
19-
<Button text="go to last" @tap="selected = 3"/>
20-
21-
<Pager for="i in [0,1,2,3]" v-model="selected" pagesCount="4">
22-
<v-template>
23-
<Label :text="i" backgroundColor="red" />
24-
</v-template>
25-
26-
<v-template if="i === 1">
27-
<Label :text="i" style="color: red;" backgroundColor="blue" />
28-
</v-template>
29-
30-
<v-template if="i === 2">
31-
<Label :text="i" style="color: blue;" backgroundColor="green" />
32-
</v-template>
33-
34-
<v-template if="i === 3">
35-
<Label :text="i" style="color: green;" backgroundColor="yellow" />
36-
</v-template>
37-
</Pager>
38-
</StackLayout>
39-
</Page>
16+
<Frame>
17+
<Page>
18+
<StackLayout>
19+
<Button text="go to first" @tap="selected = 0"/>
20+
<Button text="go to last" @tap="selected = 3"/>
21+
22+
<Pager for="i in [0,1,2,3]" v-model="selected" pagesCount="4">
23+
<v-template>
24+
<Label :text="i" backgroundColor="red" />
25+
</v-template>
26+
27+
<v-template if="i === 1">
28+
<Label :text="i" style="color: red;" backgroundColor="blue" />
29+
</v-template>
30+
31+
<v-template if="i === 2">
32+
<Label :text="i" style="color: blue;" backgroundColor="green" />
33+
</v-template>
34+
35+
<v-template if="i === 3">
36+
<Label :text="i" style="color: green;" backgroundColor="yellow" />
37+
</v-template>
38+
</Pager>
39+
</StackLayout>
40+
</Page>
41+
</Frame>
4042
`
4143
}).$start()

‎samples/app/app-with-router-pages.js

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,17 @@ Vue.use(VueRouter)
55

66
const Foo = {
77
template: `
8-
<Page>
9-
<ActionBar :title="$route.path" />
10-
<StackLayout>
11-
<Label :text="$route.path" textWrap="true" />
12-
<Label text="Hi I'm foo!" style="text-align: center; color: #41b883; font-size: 30" />
13-
<Button text="Bar" @tap="$router.push('/bar')" />
14-
<Button text="Baz" @tap="$router.push('/baz')"></Button>
15-
</StackLayout>
16-
</Page>
8+
<Frame>
9+
<Page>
10+
<ActionBar :title="$route.path" />
11+
<StackLayout>
12+
<Label :text="$route.path" textWrap="true" />
13+
<Label text="Hi I'm foo!" style="text-align: center; color: #41b883; font-size: 30" />
14+
<Button text="Bar" @tap="$router.push('/bar')" />
15+
<Button text="Baz" @tap="$router.push('/baz')"></Button>
16+
</StackLayout>
17+
</Page>
18+
</Frame>
1719
`
1820
}
1921
const Bar = {
@@ -30,7 +32,7 @@ const Bar = {
3032
`
3133
}
3234
const Baz = {
33-
template: `
35+
template: `
3436
<Page>
3537
<ActionBar :title="$route.path">
3638
<navigation-Button text="Back!" android.systemIcon="ic_menu_back" @tap="$router.back()" />

‎samples/app/app-with-router-v2.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ const Detail = {
2121
<Page>
2222
<StackLayout>
2323
<Label :text="'Detail page for ' + $route.params.id"/>
24-
<Button text="go to Tab 2 of the current page" @tap="$router.push($route.path + '/tab2')"/>
25-
24+
<Button text="go to Tab 2 of the current page" @tap="$router.push($route.path + '/tab2')"/>
25+
2626
<router-view/>
2727
</StackLayout>
2828
</Page>
@@ -65,10 +65,10 @@ new Vue({
6565
<Frame row="0">
6666
<router-view />
6767
</Frame>
68-
68+
6969
<Label :text="$route.path"
70-
backgroundColor="#333" color="#eee"
70+
backgroundColor="#333" color="#eee"
7171
row="1" />
72-
</GridLayout>
72+
</GridLayout>
7373
`
7474
}).$start()

‎samples/app/app-with-router.js

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -71,18 +71,20 @@ new Vue({
7171
},
7272

7373
template: `
74-
<Page ref="page">
75-
<ActionBar :title="pageTitle" />
76-
<StackLayout>
77-
<StackLayout orientation="horizontal" horizontalAlignment="center" class="m-b-20">
78-
<Button text="Foo" @tap="changeRoute('/foo')" class="m-10" />
79-
<Button text="Bar" @tap="changeRoute('/bar')" class="m-10" />
74+
<Frame>
75+
<Page ref="page">
76+
<ActionBar :title="pageTitle" />
77+
<StackLayout>
78+
<StackLayout orientation="horizontal" horizontalAlignment="center" class="m-b-20">
79+
<Button text="Foo" @tap="changeRoute('/foo')" class="m-10" />
80+
<Button text="Bar" @tap="changeRoute('/bar')" class="m-10" />
81+
</StackLayout>
82+
<transition name="fade" :duration="1000" mode="out-in">
83+
<router-view />
84+
</transition>
8085
</StackLayout>
81-
<transition name="fade" :duration="1000" mode="out-in">
82-
<router-view />
83-
</transition>
84-
</StackLayout>
85-
</Page>
86+
</Page>
87+
</Frame>
8688
`,
8789

8890
methods: {

‎samples/app/app-with-tab-view.js

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,32 @@ let app = new Vue({
1313
},
1414

1515
template: `
16-
<Page>
17-
<ActionBar title="test">
18-
<StackLayout orientation="horizontal" horizontalAlignment="center">
19-
<Image src="res://icon" style="width: 30; height: 30; vertical-align: center; margin-right: 10;" />
20-
<Label style="font-size: 20; vertical-align: center;">
21-
<FormattedString>
22-
<Span text="Tab" fontWeight="Bold" />
23-
<Span text="Views" />
24-
</FormattedString>
25-
</Label>
16+
<Frame>
17+
<Page>
18+
<ActionBar title="test">
19+
<StackLayout orientation="horizontal" horizontalAlignment="center">
20+
<Image src="res://icon" style="width: 30; height: 30; vertical-align: center; margin-right: 10;" />
21+
<Label style="font-size: 20; vertical-align: center;">
22+
<FormattedString>
23+
<Span text="Tab" fontWeight="Bold" />
24+
<Span text="Views" />
25+
</FormattedString>
26+
</Label>
27+
</StackLayout>
28+
</ActionBar>
29+
<StackLayout>
30+
<Label :text="activeTab" />
31+
<Button text="Click me!" @tap="tabs.push({title: 'added', text: 'added tab'})" />
32+
<button text="Go to last!" @tap="activeTab = tabs.length - 1" />
33+
34+
<TabView v-model="activeTab">
35+
<TabViewItem v-for="(tab, i) in tabs" :key="i + tab.title" :title="tab.title">
36+
<Label text="tab.text" />
37+
</TabViewItem>
38+
</TabView>
2639
</StackLayout>
27-
</ActionBar>
28-
<StackLayout>
29-
<Label :text="activeTab" />
30-
<Button text="Click me!" @tap="tabs.push({title: 'added', text: 'added tab'})" />
31-
<button text="Go to last!" @tap="activeTab = tabs.length - 1" />
32-
33-
<TabView v-model="activeTab">
34-
<TabViewItem v-for="(tab, i) in tabs" :key="i + tab.title" :title="tab.title">
35-
<Label text="tab.text" />
36-
</TabViewItem>
37-
</TabView>
38-
</StackLayout>
39-
</Page>
40+
</Page>
41+
</Frame>
4042
`
4143
})
4244

0 commit comments

Comments
 (0)
0