Skip to content

Commit 8fbd177

Browse files
mbfloresmbflores
committed
Flavor Update: Svelte
HtmlView Image Label ListPicker ListView Placeholder Progress ScrollView
1 parent a743e33 commit 8fbd177

File tree

10 files changed

+321
-1
lines changed

10 files changed

+321
-1
lines changed

‎examples/svelte/app/components/Home.svelte‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,31 @@
2020
import ActionBar from '~/components/ui/ActionBar.svelte'
2121
import DatePicker from '~/components/ui/DatePicker.svelte'
2222
import Dialogs from '~/components/ui/Dialogs.svelte'
23+
import HtmlView from '~/components/ui/HtmlView.svelte'
24+
import Image from '~/components/ui/Image.svelte'
25+
import Label from '~/components/ui/Label.svelte'
26+
import ListPicker from '~/components/ui/ListPicker.svelte'
27+
import ListView from '~/components/ui/ListView.svelte'
28+
import Placeholder from '~/components/ui/Placeholder.svelte'
29+
import Progress from '~/components/ui/Progress.svelte'
30+
import ScrollView from '~/components/ui/ScrollView.svelte'
31+
import Searchbar from '~/components/ui/SearchBar.svelte'
2332
2433
const examples = [
2534
{name: 'ActionBar', component: ActionBar},
2635
{name: 'ActivityIndicator', component: ActivityIndicator},
2736
{name: 'Button', component: Button},
2837
{name: 'DatePicker', component: DatePicker},
2938
{name: 'Dialogs', component: Dialogs},
30-
39+
{name: 'HtmlView', component: HtmlView},
40+
{name: 'Image', component: Image},
41+
{name: 'Label', component: Label},
42+
{name: 'ListPicker', component: ListPicker},
43+
{name: 'ListView', component: ListView},
44+
{name: 'Placeholder', component: Placeholder},
45+
{name: 'Progress', component: Progress},
46+
{name: 'ScrollView', component: ScrollView},
47+
{name: 'SearchBar', component: Searchbar},
3148
]
3249
3350
function goTo(args) {
@@ -50,6 +67,33 @@
5067
case 'Dialogs':
5168
navigate({ page: Dialogs })
5269
break
70+
case 'HtmlView':
71+
navigate({ page: HtmlView })
72+
break
73+
case 'Image':
74+
navigate({ page: Image })
75+
break
76+
case 'Label':
77+
navigate({ page: Label })
78+
break
79+
case 'ListPicker':
80+
navigate({ page: ListPicker })
81+
break
82+
case 'ListView':
83+
navigate({ page: ListView })
84+
break
85+
case 'Placeholder':
86+
navigate({ page: Placeholder })
87+
break
88+
case 'Progress':
89+
navigate({ page: Progress })
90+
break
91+
case 'ScrollView':
92+
navigate({ page: ScrollView })
93+
break
94+
case 'SearchBar':
95+
navigate({ page: Searchbar })
96+
break
5397
default:
5498
break
5599
}

‎examples/svelte/app/components/ui/HtmlView.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>HTML View</label>
5+
</actionBar>
6+
7+
<gridLayout>
8+
<contentView
9+
horizontalAlignment="center"
10+
verticalAlignment="center">
11+
<!-- region example-->
12+
<htmlView html="{htmlString}"></htmlView>
13+
<!-- endregion example-->
14+
</contentView>
15+
</gridLayout>
16+
</page>
17+
18+
<script lang="ts">
19+
const htmlString = `
20+
<h1 style="color: black; font-family: ui-sans-serif, system-ui;">
21+
<span style="color: #65adf1;">Html</span>View
22+
</h1>
23+
`
24+
</script>
25+
26+
<style>
27+
</style>

‎examples/svelte/app/components/ui/Image.svelte‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>Image</label>
5+
</actionBar>
6+
7+
<gridLayout>
8+
<contentView
9+
horizontalAlignment="center"
10+
verticalAlignment="center">
11+
<!-- region example -->
12+
<image src="~/assets/logo.png" height="60"></image>
13+
<!-- endregion example-->
14+
</contentView>
15+
</gridLayout>
16+
</page>
17+
18+
<script lang="ts">
19+
</script>
20+
21+
<style>
22+
</style>

‎examples/svelte/app/components/ui/Label.svelte‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>Label</label>
5+
</actionBar>
6+
7+
<gridLayout>
8+
<contentView
9+
horizontalAlignment="center"
10+
verticalAlignment="center">
11+
<!-- region example -->
12+
<label text="Hello NativeScript"></label>
13+
<!-- endregion example-->
14+
</contentView>
15+
</gridLayout>
16+
</page>
17+
18+
<script lang="ts">
19+
</script>
20+
21+
<style>
22+
</style>

‎examples/svelte/app/components/ui/ListPicker.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>ListPicker</label>
5+
</actionBar>
6+
7+
<gridLayout>
8+
<contentView
9+
horizontalAlignment="center"
10+
verticalAlignment="center">
11+
<!-- region example -->
12+
<listPicker items="{items}"></listPicker>
13+
<!-- endregion example-->
14+
</contentView>
15+
</gridLayout>
16+
</page>
17+
18+
<script lang="ts">
19+
const items = ['First','Second','Third']
20+
</script>
21+
22+
<style>
23+
</style>

‎examples/svelte/app/components/ui/ListView.svelte‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>ListView</label>
5+
</actionBar>
6+
7+
<gridLayout>
8+
<contentView
9+
horizontalAlignment="center"
10+
verticalAlignment="center">
11+
<!-- region example -->
12+
<listView items="{items}">
13+
<Template let:item>
14+
<stackLayout>
15+
<label>{item.title}</label>
16+
</stackLayout>
17+
</Template>
18+
</listView>
19+
<!-- endregion example-->
20+
</contentView>
21+
</gridLayout>
22+
</page>
23+
24+
<script lang="ts">
25+
// #region example
26+
import { Template } from 'svelte-native/components'
27+
28+
const items = [];
29+
for(let index = 0; index < 100; index++) {
30+
items.push({
31+
title: `Item ${index+1}`
32+
})
33+
}
34+
// #endregion example
35+
</script>
36+
37+
<style>
38+
</style>

‎examples/svelte/app/components/ui/Placeholder.svelte‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>Placeholder</label>
5+
</actionBar>
6+
7+
<gridLayout>
8+
<contentView
9+
horizontalAlignment="center"
10+
verticalAlignment="center">
11+
<!-- region example -->
12+
<placeholder on:creatingView="{creatingView}"></placeholder>
13+
<!-- endregion example-->
14+
</contentView>
15+
</gridLayout>
16+
</page>
17+
18+
<script lang="ts">
19+
import { Utils } from '@nativescript/core'
20+
const creatingView = (args) => {
21+
let nativeView
22+
if (global.isIOS) {
23+
// Example with UITextView on iOS
24+
nativeView = UITextView.new()
25+
nativeView.text = 'Native View (iOS)'
26+
} else if (global.isAndroid) {
27+
// Example with TextView on Android
28+
nativeView = new android.widget.TextView(
29+
Utils.android.getApplicationContext()
30+
)
31+
nativeView.setText('Native View (Android)')
32+
}
33+
34+
// assign it to args.view so NativeScript can place it into the UI
35+
args.view = nativeView
36+
}
37+
</script>
38+
39+
<style>
40+
</style>

‎examples/svelte/app/components/ui/Progress.svelte‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>Progress </label>
5+
</actionBar>
6+
7+
<gridLayout width="100%">
8+
<contentView
9+
width="100%"
10+
horizontalAlignment="center"
11+
verticalAlignment="center">
12+
<!-- region example -->
13+
<stackLayout>
14+
<progress bind:value={currentValue}></progress>
15+
<label textAlignment="center">{currentValue}</label>
16+
17+
</stackLayout>
18+
<!-- endregion example-->
19+
</contentView>
20+
</gridLayout>
21+
</page>
22+
23+
<script lang="ts">
24+
// #region example
25+
let currentValue = 0;
26+
setInterval( () =>{
27+
currentValue ++;
28+
if(currentValue === 101)
29+
currentValue = 0;
30+
}, 100);
31+
// #endregion example
32+
</script>
33+
34+
<style>
35+
</style>

‎examples/svelte/app/components/ui/ScrollView.svelte‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>ScrollView </label>
5+
</actionBar>
6+
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+
42+
<script lang="ts">
43+
</script>
44+
45+
<style>
46+
</style>

‎examples/svelte/app/components/ui/SearchBar.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>ScrollView </label>
5+
</actionBar>
6+
7+
<gridLayout width="100%">
8+
<contentView
9+
width="100%"
10+
horizontalAlignment="center"
11+
verticalAlignment="center">
12+
<!-- region example -->
13+
<searchBar hint="SEARCH HERE"></searchBar>
14+
<!-- endregion example-->
15+
</contentView>
16+
</gridLayout>
17+
</page>
18+
19+
<script lang="ts">
20+
</script>
21+
22+
<style>
23+
</style>

0 commit comments

Comments
 (0)