Skip to content

Commit d8f4dbe

Browse files
farfromrefugfarfromrefug
committed
demo: basic svelte demo
1 parent 79b1ce1 commit d8f4dbe

File tree

7 files changed

+136
-129
lines changed

7 files changed

+136
-129
lines changed

‎demo-snippets/svelte/AllSides.svelte

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎demo-snippets/svelte/BasicDrawer.svelte

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎demo-snippets/svelte/Buttons.svelte

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<script lang="typescript">
2+
import { Frame } from '@nativescript/core';
3+
let isEditing = false;
4+
function onNavigationButtonTap() {
5+
Frame.topmost().goBack();
6+
}
7+
function onTap(event) {
8+
console.log('Button tapped', event.object, Date.now());
9+
}
10+
function switchExpanded(event) {
11+
console.log('switchExpanded', this.expanded, event.object.nativeView);
12+
13+
// wont work after activity reset
14+
this.expanded = !this.expanded;
15+
16+
// works after activity reset
17+
// event.object.expanded = !event.object.expanded;
18+
}
19+
</script>
20+
21+
<page>
22+
<actionBar :title="title">
23+
<stackLayout orientation="horizontal" width="100%">
24+
<mdbutton v-show="isEditing" variant="flat" text="test" on:tap={() => (isEditing = !isEditing)} />
25+
<mdbutton text="save" on:tap={() => (isEditing = !isEditing)} />
26+
</stackLayout>
27+
<navigationButton text="Back" android.systemIcon="ic_menu_back" on:tap={onNavigationButtonTap} />
28+
</actionBar>
29+
<scrollView>
30+
<stackLayout>
31+
<mdbutton text="raised button" on:tap={onTap} />
32+
<mdbutton src="res://ic_action_add" text="button with icon" on:tap={onTap} />
33+
<mdbutton variant="text" color="red" src="res://ic_action_add" text="button with icon and tint" on:tap={onTap} />
34+
<mdbutton variant="text" text="text button" on:tap={onTap} />
35+
<mdbutton variant="flat" text="flat button" on:tap={onTap} />
36+
<mdbutton variant="outline" text="outline button" on:tap={onTap} />
37+
<mdbutton borderRadius="10" fontSize="20" text="raised button" on:tap={onTap} />
38+
39+
<mdbutton fontSize="26" text="mdi-plus" class="mdi" on:tap={onTap} horizontalAlignment="center" />
40+
<stackLayout margin="10">
41+
<mdbutton text="default button" on:tap={onTap} />
42+
</stackLayout>
43+
<mdbutton class="bg-red" borderRadius="10" color="red" text="text button" variant="text" on:tap={onTap}>
44+
<formattedString>
45+
<span text="Words " color="#00ff00" />
46+
<span text="with " color="#ff0000" fontAttributes="Bold" />
47+
</formattedString>
48+
</mdbutton>
49+
<mdbutton class="bg-red" verticalTextAlignment="center" borderRadius="10" color="red" text="text button" variant="text" on:tap={onTap}>
50+
<span text="mdi-magnify" fontSize="20" class="mdi" />
51+
<span text=" search" fontAttributes="Bold" />
52+
</mdbutton>
53+
<mdbutton text="disabled button" isEnabled="false" on:tap={onTap} />
54+
<mdbutton text="flat button \n test" variant="flat" class="bg-blue" on:tap={onTap} />
55+
<mdbutton text="flat transparent button \n test" rippleColor="red" variant="flat" backgroundColor="transparent" on:tap={onTap} />
56+
<mdbutton text="flat disabled button" variant="flat" isEnabled="false" backgroundColor="yellow" on:tap={onTap} />
57+
<mdbutton text="outline button" rippleColor="red" color="black" width="200" variant="outline" on:tap={onTap} />
58+
<mdbutton text="disabled outline button" borderColor="red" borderRadius="2" borderWidth="2" isEnabled="false" width="200" variant="outline" backgroundColor="green" on:tap={onTap} />
59+
<mdbutton text="text button" width="200" color="green" variant="text" on:tap={onTap} />
60+
<mdbutton text="text button class" width="200" class="text_class_test" variant="text" on:tap={onTap} />
61+
<mdbutton text="disabled text button" isEnabled="false" width="200" variant="text" on:tap={onTap} />
62+
<mdbutton class="falseFAb bg-green" text="+" color="white" verticalAlign="center" backgroundColor="#53ba82" on:tap={onTap} />
63+
<mdbutton class="falseFAb bg-green" src="res://ic_action_add" on:tap={onTap} />
64+
<mdbutton backgroundColor="red" text="backgroundColor" isEnabled="false" />
65+
<mdbutton class="buttontest" text="buttontest" />
66+
<mdbutton class="buttontest" text="buttontest" isEnabled="false" />
67+
</stackLayout>
68+
</scrollView>
69+
</page>
70+
71+
<style scoped>
72+
.buttontest {
73+
color: blue;
74+
background-color: #333;
75+
}
76+
.buttontest:disabled {
77+
color: red;
78+
background-color: yellow;
79+
}
80+
.text_class_test {
81+
color: red;
82+
ripple-color: green;
83+
}
84+
</style>

‎demo-snippets/svelte/install.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { install as installBottomSheet } from '@nativescript-community/ui-material-bottomsheet';
22
import { installMixins, themer } from '@nativescript-community/ui-material-core';
33

4+
import ButtonPlugin from '@nativescript-community/ui-material-button/svelte';
45
import '../app.scss';
6+
import Buttons from './Buttons.svelte';
57

68
installMixins();
79
installBottomSheet();
@@ -18,6 +20,11 @@ themer.createShape('cut', {
1820
unit: '%'
1921
}
2022
});
21-
export function installPlugin() {}
23+
export function installPlugin() {
24+
ButtonPlugin.register();
25+
}
26+
27+
export const demos = [
28+
{ name: 'Buttons', path: 'Buttons', component: Buttons },
2229

23-
export const demos = [];
30+
];

‎demo-snippets/webpack.config.svelte.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
const { readFileSync } = require('fs');
2+
3+
const { resolve } = require('path');
4+
function fixedFromCharCode(codePt) {
5+
if (codePt > 0xffff) {
6+
codePt -= 0x10000;
7+
return String.fromCharCode(0xd800 + (codePt >> 10), 0xdc00 + (codePt & 0x3ff));
8+
} else {
9+
return String.fromCharCode(codePt);
10+
}
11+
}
12+
13+
module.exports = (env, webpack) => {
14+
const platform = env && ((env.android && 'android') || (env.ios && 'ios'));
15+
webpack.chainWebpack((config) => {
16+
const symbolsParser = require('scss-symbols-parser');
17+
const mdiSymbols = symbolsParser.parseSymbols(readFileSync(resolve(__dirname, 'node_modules/@mdi/font/scss/_variables.scss')).toString());
18+
const mdiIcons = JSON.parse(`{${mdiSymbols.variables[mdiSymbols.variables.length - 1].value.replace(/" (F|0)(.*?)([,\n]|$)/g, '": "$1$2"$3')}}`);
19+
20+
const scssPrepend = `$mdi-fontFamily: ${platform === 'android' ? 'materialdesignicons-webfont' : 'Material Design Icons'};`;
21+
config.module.rule('scss').use('sass-loader').options({
22+
additionalData: scssPrepend
23+
});
24+
config.module
25+
.rule('replace_mdi')
26+
.exclude.add(/node_modules/)
27+
.end()
28+
.test(/\.(ts|js|scss|css|vue)$/)
29+
.use('string-replace-loader')
30+
.loader(resolve(__dirname, 'node_modules/string-replace-loader'))
31+
.options({
32+
search: 'mdi-([a-z0-9-_]+)',
33+
replace: (match, p1, offset, str) => {
34+
if (mdiIcons[p1]) {
35+
return fixedFromCharCode(parseInt(mdiIcons[p1], 16));
36+
}
37+
return match;
38+
},
39+
flags: 'g'
40+
});
41+
});
42+
};

‎demo-snippets/webpack.config.vue.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,12 @@ NsVueTemplateCompiler.registerElement('MDSlider', () => require('@nativescript-c
3535

3636
module.exports = (env, webpack) => {
3737
const platform = env && ((env.android && 'android') || (env.ios && 'ios'));
38-
console.log('inside custom webpack');
3938
webpack.chainWebpack((config) => {
4039
const symbolsParser = require('scss-symbols-parser');
4140
const mdiSymbols = symbolsParser.parseSymbols(readFileSync(resolve(__dirname, 'node_modules/@mdi/font/scss/_variables.scss')).toString());
4241
const mdiIcons = JSON.parse(`{${mdiSymbols.variables[mdiSymbols.variables.length - 1].value.replace(/" (F|0)(.*?)([,\n]|$)/g, '": "$1$2"$3')}}`);
4342

4443
const scssPrepend = `$mdi-fontFamily: ${platform === 'android' ? 'materialdesignicons-webfont' : 'Material Design Icons'};`;
45-
console.log('scssPrepend', scssPrepend);
4644
config.module.rule('scss').use('sass-loader').options({
4745
additionalData: scssPrepend
4846
});

‎demo-svelte

0 commit comments

Comments
 (0)