Skip to content

Commit b28aeb5

Browse files
mbfloresmbflores
committed
Flavor: Svelte
WIP bootstrapping of svelte flavor ActionBar ActivityIndicator Button
1 parent 7c3d4c1 commit b28aeb5

20 files changed

+5995
-0
lines changed

‎examples/svelte/.gitignore‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# NativeScript
2+
hooks/
3+
node_modules/
4+
platforms/
5+
6+
# Logs
7+
logs
8+
*.log
9+
npm-debug.log*
10+
yarn-debug.log*
11+
yarn-error.log*
12+
13+
# General
14+
.DS_Store
15+
.AppleDouble
16+
.LSOverride
17+
.idea
18+
.cloud
19+
.project
20+
tmp/
21+
typings/
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json

‎examples/svelte/app/App.svelte‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<frame>
2+
<Home />
3+
</frame>
4+
5+
<script lang="ts">
6+
import Home from './components/Home.svelte'
7+
</script>

‎examples/svelte/app/app.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@import '@nativescript/theme/css/core.css';
2+
@import '@nativescript/theme/css/default.css';
3+
4+
.fab {
5+
font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
6+
font-weight: 400;
7+
}
8+
9+
.fas {
10+
font-family: 'Font Awesome 5 Free', 'fa-solid-900';
11+
font-weight: 900;
12+
}
13+
14+
.far {
15+
font-family: 'Font Awesome 5 Free', 'fa-regular-400';
16+
font-weight: 400;
17+
}
18+
19+
20+
Page {
21+
background-color: white;
22+
}

‎examples/svelte/app/app.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
In NativeScript, the app.ts file is the entry point to your application.
3+
You can use this file to perform app-level initialization, but the primary
4+
purpose of the file is to pass control to the app’s first page.
5+
*/
6+
7+
import { svelteNativeNoFrame } from 'svelte-native'
8+
import App from './App.svelte'
9+
10+
svelteNativeNoFrame(App, {})

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<page>
2+
<actionBar >
3+
<label text="Home"
4+
class="font-bold text-lg" />
5+
</actionBar>
6+
<gridLayout>
7+
<listView items="{examples}" on:itemTap="{goTo}">
8+
<Template let:item>
9+
<label class="item-label" text="{item.name}" padding="16" color="black" borderBottomColor="black"></label>
10+
</Template>
11+
</listView>
12+
</gridLayout>
13+
</page>
14+
15+
<script lang="ts">
16+
import { Template } from 'svelte-native/components'
17+
import Button from '~/components/ui/Button.svelte'
18+
import { navigate } from 'svelte-native'
19+
import ActivityIndicator from '~/components/ui/ActivityIndicator.svelte'
20+
import ActionBar from '~/components/ui/ActionBar.svelte'
21+
22+
const examples = [
23+
{name: 'ActionBar', component: ActionBar},
24+
{name: 'ActivityIndicator', component: ActivityIndicator},
25+
{name: 'Button', component: Button},
26+
27+
]
28+
29+
function goTo(args) {
30+
const {index} = args;
31+
console.log(index);
32+
const item = examples[index];
33+
switch (item.name) {
34+
case 'ActionBar':
35+
navigate({ page: ActionBar })
36+
break
37+
case 'ActivityIndicator':
38+
navigate({ page: ActivityIndicator })
39+
break
40+
case 'Button':
41+
navigate({ page: Button })
42+
break
43+
default:
44+
break
45+
}
46+
}
47+
</script>
48+
49+
<style>
50+
.item-label{
51+
}
52+
</style>

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
<page>
3+
<!-- #region example-->
4+
<actionBar >
5+
<actionItem on:tap={goBack()}>
6+
<label text="<< Back"></label>
7+
</actionItem>
8+
</actionBar>
9+
<!-- #endregion example-->
10+
11+
<gridLayout>
12+
<contentView verticalAlignment="center">
13+
14+
<label text="Main Content"
15+
verticalAlignment="center"
16+
horizontalAlignment="center"></label>
17+
</contentView>
18+
</gridLayout>
19+
</page>
20+
21+
<script lang="ts">
22+
import { Frame } from '@nativescript/core'
23+
24+
function goBack() {
25+
Frame.goBack();
26+
27+
}
28+
</script>
29+
30+
<style>
31+
</style>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<page>
2+
<actionBar >
3+
<label text="Home"
4+
class="font-bold text-lg" />
5+
</actionBar>
6+
<gridLayout>
7+
<contentView verticalAlignment="center">
8+
<!-- #region example-->
9+
<activityIndicator busy="true"/>
10+
<!-- #endregion example-->
11+
</contentView>
12+
</gridLayout>
13+
</page>
14+
15+
<script lang="ts">
16+
17+
</script>
18+
19+
<style>
20+
</style>

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<page>
2+
<actionBar >
3+
<label text="Home"
4+
class="font-bold text-lg" />
5+
</actionBar>
6+
<gridLayout>
7+
<contentView verticalAlignment="center">
8+
<!-- #region example-->
9+
<button text="this is a button" on:tap={showAlert}></button>
10+
<!-- #endregion example-->
11+
</contentView>
12+
</gridLayout>
13+
</page>
14+
15+
<script lang="ts">
16+
import {alert} from '@nativescript/core'
17+
function showAlert() {
18+
alert({
19+
title:"alert",
20+
message: "you've made an alert with a click from a button",
21+
okButtonText: "OK"
22+
})
23+
}
24+
</script>
25+
26+
<style>
27+
</style>

‎examples/svelte/app/fonts/LICENSE.txt‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
Font Awesome Free License
2+
-------------------------
3+
4+
Font Awesome Free is free, open source, and GPL friendly. You can use it for
5+
commercial projects, open source projects, or really almost whatever you want.
6+
Full Font Awesome Free license: https://fontawesome.com/license/free.
7+
8+
# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
9+
In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
10+
packaged as SVG and JS file types.
11+
12+
# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
13+
In the Font Awesome Free download, the SIL OFL license applies to all icons
14+
packaged as web and desktop font files.
15+
16+
# Code: MIT License (https://opensource.org/licenses/MIT)
17+
In the Font Awesome Free download, the MIT license applies to all non-font and
18+
non-icon files.
19+
20+
# Attribution
21+
Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
22+
Awesome Free files already contain embedded comments with sufficient
23+
attribution, so you shouldn't need to do anything additional when using these
24+
files normally.
25+
26+
We've kept attribution comments terse, so we ask that you do not actively work
27+
to remove them from files, especially code. They're a great way for folks to
28+
learn about Font Awesome.
29+
30+
# Brand Icons
31+
All brand icons are trademarks of their respective owners. The use of these
32+
trademarks does not indicate endorsement of the trademark holder by Font
33+
Awesome, nor vice versa. **Please do not use brand logos for any purpose except
34+
to represent the company, product, or service to which they refer.**

‎examples/svelte/app/fonts/fa-brands-400.ttf‎

128 KB
Binary file not shown.

0 commit comments

Comments
 (0)