Content-Length: 799846 | pFad | http://github.com/NativeScript/docs/commit/36dafb7b1d122884fb0a933a9c3af69c9939acbd

41 Flavors Vue Update · NativeScript/docs@36dafb7 · GitHub
Skip to content

Commit 36dafb7

Browse files
mbfloresmbflores
committed
Flavors Vue Update
ListPicker Palceholder Progress Scrollview SegmentedBar
1 parent a46a310 commit 36dafb7

File tree

8 files changed

+204
-3
lines changed

8 files changed

+204
-3
lines changed

‎examples/vue/src/Home.vue

+30-3
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,16 @@ import Button from './ui/Button/component.vue'
66
import DatePicker from './ui/DatePicker/component.vue'
77
import HtmlView from './ui/HtmlView/component.vue'
88
import Image from './ui/Image/component.vue'
9+
// todo not working label
10+
// import Label from './ui/Label/component.vue'
11+
import ListPicker from './ui/ListPicker/component.vue'
12+
// todo notworking listview
13+
// import ListView from './ui/ListView/component.vue'
14+
import Placeholder from './ui/Placeholder/component.vue'
15+
import Progress from './ui/Progress/component.vue'
16+
import ScrollView from './ui/ScrollView/component.vue'
917
import SearchBar from './ui/SearchBar/component.vue'
10-
18+
import SegmentedBar from './ui/SegmentedBar/component.vue'
1119
const examples = ref<Array<{ name: string }>>(
1220
getComponentList(
1321
// @ts-expect-error
@@ -34,11 +42,30 @@ const goTo = (args: any) => {
3442
case 'Image':
3543
$navigateTo(Image)
3644
break
37-
38-
45+
case 'Label':
46+
$navigateTo(Image)
47+
break
48+
case 'ListPicker':
49+
$navigateTo(ListPicker)
50+
break
51+
case 'ListView':
52+
$navigateTo(ListPicker)
53+
break
54+
case 'Placeholder':
55+
$navigateTo(Placeholder)
56+
break
57+
case 'Progress':
58+
$navigateTo(Progress)
59+
break
60+
case 'ScrollView':
61+
$navigateTo(ScrollView)
62+
break
3963
case 'SearchBar':
4064
$navigateTo(SearchBar)
4165
break
66+
case 'SegmentedBar':
67+
$navigateTo(SegmentedBar)
68+
break
4269
default:
4370
console.log('No component found')
4471
break

‎examples/vue/src/ui/Label/component.vue

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts" setup>
2+
3+
const htmlString = `
4+
<h1 style="color: black; font-family: ui-sans-serif, system-ui;">
5+
<span style="color: #65adf1;">Html</span>View
6+
</h1>
7+
`
8+
</script>
9+
10+
<template>
11+
<Page>
12+
<Frame>
13+
<GridLayout>
14+
<ContentView verticalAlignment="center" horizontalAlignment="center">
15+
<!-- #region example -->
16+
<Image src="~/assets/logo.png" height="60" />
17+
<!-- #endregion example -->
18+
</ContentView>
19+
</GridLayout>
20+
</Frame>
21+
22+
</Page>
23+
</template>

‎examples/vue/src/ui/ListPicker/component.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts" setup>
2+
const items = [`First`, `Second`, `Third`];
3+
</script>
4+
5+
<template>
6+
<Page>
7+
<ActionBar>
8+
</ActionBar>
9+
10+
<GridLayout>
11+
<ContentView verticalAlignment="center" horizontalAlignment="center">
12+
<!-- #region example -->
13+
<ListPicker v-bind:items="items" />
14+
<!-- #endregion example -->
15+
</ContentView>
16+
</GridLayout>
17+
</Page>
18+
</template>

‎examples/vue/src/ui/ListView/component.vue

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts" setup>
2+
// #region example
3+
const items = Array.from({ length: 100 }).map((_, i) => ({
4+
title: `Item ${i}`,
5+
}));
6+
// #endregion example
7+
</script>
8+
9+
<template>
10+
<Page>
11+
<ActionBar>
12+
</ActionBar>
13+
14+
<GridLayout>
15+
<!-- #region example -->
16+
<ListView for="item in items" >
17+
<v-template>
18+
<!-- Shows the list item label in the default color and style. -->
19+
<Label :text="item.title" />
20+
</v-template>
21+
</ListView>
22+
<!-- #endregion example -->
23+
</GridLayout>
24+
</Page>
25+
</template>

‎examples/vue/src/ui/Placeholder/component.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script lang="ts" setup>
2+
const creatingView = (args) => {
3+
let nativeView
4+
if (global.isIOS) {
5+
// Example with UITextView on iOS
6+
nativeView = UITextView.new()
7+
nativeView.text = 'Native View (iOS)'
8+
} else if (global.isAndroid) {
9+
// Example with TextView on Android
10+
nativeView = new android.widget.TextView(
11+
Utils.android.getApplicationContext()
12+
)
13+
nativeView.setText('Native View (Android)')
14+
}
15+
16+
// assign it to args.view so NativeScript can place it into the UI
17+
args.view = nativeView
18+
}
19+
</script>
20+
21+
<template>
22+
<Page>
23+
<GridLayout>
24+
<ContentView verticalAlignment="center" horizontalAlignment="center">
25+
<!-- #region example -->
26+
<Placeholder @creatingView="creatingView" />
27+
<!-- #endregion example -->
28+
</ContentView>
29+
</GridLayout>
30+
31+
32+
</Page>
33+
</template>

‎examples/vue/src/ui/Progress/component.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts" setup>
2+
3+
</script>
4+
5+
<template>
6+
<Page>
7+
<GridLayout>
8+
<ContentView verticalAlignment="center">
9+
<!-- #region example -->
10+
<Progress value="75"></Progress>
11+
<!-- #endregion example -->
12+
</ContentView>
13+
</GridLayout>
14+
</Page>
15+
</template>

‎examples/vue/src/ui/ScrollView/component.vue

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script lang="ts" setup>
2+
3+
</script>
4+
5+
<template>
6+
<Page>
7+
<GridLayout rows="*, 50, 300, *">
8+
<ScrollView orientation="horizontal" row="1">
9+
<StackLayout orientation="horizontal" padding="12">
10+
<Label text="h1" width="50"></Label>
11+
<Label text="h2" width="50"></Label>
12+
<Label text="h3" width="50"></Label>
13+
<Label text="h4" width="50"></Label>
14+
<Label text="h5" width="50"></Label>
15+
<Label text="h6" width="50"></Label>
16+
<Label text="h7" width="50"></Label>
17+
<Label text="h8" width="50"></Label>
18+
<Label text="h9" width="50"></Label>
19+
</StackLayout>
20+
</ScrollView>
21+
22+
<ContentView row="2">
23+
<!-- #region example -->
24+
<ScrollView>
25+
<StackLayout padding="12">
26+
<Label text="v1" height="50"></Label>
27+
<Label text="v2" height="50"></Label>
28+
<Label text="v3" height="50"></Label>
29+
<Label text="v4" height="50"></Label>
30+
<Label text="v5" height="50"></Label>
31+
<Label text="v6" height="50"></Label>
32+
<Label text="v7" height="50"></Label>
33+
<Label text="v8" height="50"></Label>
34+
<Label text="v9" height="50"></Label>
35+
</StackLayout>
36+
</ScrollView>
37+
<!-- #endregion example -->
38+
</ContentView>
39+
</GridLayout>
40+
</Page>
41+
</template>

‎examples/vue/src/ui/SegmentedBar/component.vue

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts" setup>
2+
3+
</script>
4+
5+
<template>
6+
<Page>
7+
<GridLayout padding="8">
8+
<ContentView verticalAlignment="center">
9+
<!-- #region example -->
10+
<SegmentedBar>
11+
<SegmentedBarItem title="First" />
12+
<SegmentedBarItem title="Second" />
13+
<SegmentedBarItem title="Third" />
14+
</SegmentedBar>
15+
<!-- #endregion example -->
16+
</ContentView>
17+
</GridLayout>
18+
</Page>
19+
</template>

0 commit comments

Comments
 (0)








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/NativeScript/docs/commit/36dafb7b1d122884fb0a933a9c3af69c9939acbd

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy