Skip to content

Commit 8c13286

Browse files
mbfloresmbflores
committed
Flavor Update: Svelte
SearchBar SegmentedBar Slider Switch TabView TextField TextView TimePicker WebView
1 parent 8fbd177 commit 8c13286

File tree

10 files changed

+246
-1
lines changed

10 files changed

+246
-1
lines changed

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@
2929
import Progress from '~/components/ui/Progress.svelte'
3030
import ScrollView from '~/components/ui/ScrollView.svelte'
3131
import Searchbar from '~/components/ui/SearchBar.svelte'
32+
import SegmentedBar from '~/components/ui/SegmentedBar.svelte'
33+
import Slider from '~/components/ui/Slider.svelte'
34+
import Switch from '~/components/ui/Switch.svelte'
35+
import TabView from '~/components/ui/TabView.svelte'
36+
import TextField from '~/components/ui/TextField.svelte'
37+
import TextView from '~/components/ui/TextView.svelte'
38+
import TimePicker from '~/components/ui/TimePicker.svelte'
39+
import WebView from '~/components/ui/WebView.svelte'
3240
3341
const examples = [
3442
{name: 'ActionBar', component: ActionBar},
@@ -45,6 +53,15 @@
4553
{name: 'Progress', component: Progress},
4654
{name: 'ScrollView', component: ScrollView},
4755
{name: 'SearchBar', component: Searchbar},
56+
{name: 'SegmentedBar', component: SegmentedBar},
57+
{name: 'Slider', component: Slider},
58+
{name: 'Switch', component: Switch},
59+
{name: 'TabView', component: TabView},
60+
{name: 'TextField', component: TextField},
61+
{name: 'TextView', component: TextView},
62+
{name: 'TimePicker', component: TimePicker},
63+
{name: 'WebView', component: WebView},
64+
4865
]
4966
5067
function goTo(args) {
@@ -94,6 +111,30 @@
94111
case 'SearchBar':
95112
navigate({ page: Searchbar })
96113
break
114+
case 'SegmentedBar':
115+
navigate({ page: SegmentedBar })
116+
break
117+
case 'Slider':
118+
navigate({ page: Slider })
119+
break
120+
case 'Switch':
121+
navigate({ page: Switch })
122+
break
123+
case 'TabView':
124+
navigate({ page: TabView })
125+
break
126+
case 'TextField':
127+
navigate({ page: TextField })
128+
break
129+
case 'TextView':
130+
navigate({ page: TextView })
131+
break
132+
case 'TimePicker':
133+
navigate({ page: TimePicker })
134+
break
135+
case 'WebView':
136+
navigate({ page: WebView })
137+
break
97138
default:
98139
break
99140
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
<page>
33
<actionBar >
4-
<label>ScrollView </label>
4+
<label>SearchBar </label>
55
</actionBar>
66

77
<gridLayout width="100%">

‎examples/svelte/app/components/ui/SegmentedBar.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>SegmentedBar</label>
5+
</actionBar>
6+
7+
<gridLayout width="100%">
8+
<contentView
9+
width="100%"
10+
horizontalAlignment="center"
11+
verticalAlignment="center">
12+
<!-- region example -->
13+
<segmentedBar>
14+
<segmentedBarItem title="First" />
15+
<segmentedBarItem title="Second" />
16+
<segmentedBarItem title="Third" />
17+
</segmentedBar>
18+
<!-- endregion example-->
19+
</contentView>
20+
</gridLayout>
21+
</page>
22+
23+
<script lang="ts">
24+
</script>
25+
26+
<style>
27+
</style>

‎examples/svelte/app/components/ui/Slider.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>Slider</label>
5+
</actionBar>
6+
7+
<gridLayout width="100%">
8+
<contentView
9+
width="100%"
10+
horizontalAlignment="center"
11+
verticalAlignment="center">
12+
<stackLayout>
13+
<!-- #region example -->
14+
<slider bind:value="{sliderValue}"/>
15+
<!-- #endregion example -->
16+
<label width="100%" textAlignment="center">{sliderValue}</label>
17+
</stackLayout>
18+
</contentView>
19+
</gridLayout>
20+
</page>
21+
22+
<script lang="ts">
23+
let sliderValue = 0;
24+
</script>
25+
26+
<style>
27+
</style>

‎examples/svelte/app/components/ui/Switch.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>Switch</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+
<switch horizontalAlignment="center" bind:checked="{switchValue}"></switch>
15+
<label textAlignment="center" width="100%">{switchValue}</label>
16+
</stackLayout>
17+
<!-- endregion example-->
18+
</contentView>
19+
</gridLayout>
20+
</page>
21+
22+
<script lang="ts">
23+
let switchValue = true;
24+
</script>
25+
26+
<style>
27+
</style>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>TabView</label>
5+
</actionBar>
6+
7+
<gridLayout width="100%">
8+
<!-- #region example -->
9+
<tabView>
10+
<tabViewItem title="First">
11+
<label text="First Tab Content" textAlignment="center" verticalAlignment="center"></label>
12+
</tabViewItem>
13+
<tabViewItem title="Second">
14+
<label text="Second Tab Content" textAlignment="center" verticalAlignment="center"></label>
15+
</tabViewItem>
16+
<tabViewItem title="Third">
17+
<label text="Third Tab Content" textAlignment="center" verticalAlignment="center"></label>
18+
</tabViewItem>
19+
</tabView>
20+
<!-- #endregion example -->
21+
</gridLayout>
22+
</page>
23+
24+
<script lang="ts">
25+
</script>
26+
27+
<style>
28+
</style>

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

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

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>TextView</label>
5+
</actionBar>
6+
7+
<gridLayout width="100%">
8+
<contentView
9+
width="100%"
10+
horizontalAlignment="center"
11+
verticalAlignment="center">
12+
<!-- #region example -->
13+
<textView text="{text}" />
14+
<!-- #endregion example -->
15+
</contentView>
16+
</gridLayout>
17+
</page>
18+
19+
<script lang="ts">
20+
// #region example
21+
const text = `TextView\nWith\nMultiple\nLines!`;
22+
// #endregion example
23+
</script>
24+
25+
<style>
26+
</style>

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

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

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
<page>
3+
<actionBar >
4+
<label>WebView</label>
5+
</actionBar>
6+
7+
<gridLayout>
8+
<!-- keeps the screen busy for Maestro to wait for the WebView... -->
9+
<activityIndicator busy="true" />
10+
<webView src="https://nativescript.org/" backgroundColor="transparent" />
11+
12+
<!-- actual example - not rendered because the above WebView is used for the screenshot instead. -->
13+
<contentView visibility="collapse">
14+
<!-- #region example -->
15+
<webView src="https://nativescript.org/" />
16+
<!-- #endregion example -->
17+
</contentView>
18+
</gridLayout>
19+
</page>
20+
21+
<script lang="ts">
22+
</script>
23+
24+
<style>
25+
</style>

0 commit comments

Comments
 (0)