Skip to content

Commit 03e308b

Browse files
farfromrefugfarfromrefug
committed
test: vue demo tabs comp
1 parent 2ca1a71 commit 03e308b

File tree

6 files changed

+134
-11
lines changed

6 files changed

+134
-11
lines changed

‎demo-vue/app/app.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
@import '~@nativescript/theme/index';
22

3+
.mdi {
4+
font-family: "materialdesignicons-webfont", "Material Design Icons";
5+
}
36
mdbutton {
47
color: black;
58
.ns-dark & {

‎demo-vue/app/examples/Tabs.vue

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<Page>
3+
<ActionBar :title="title">
4+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap" />
5+
</ActionBar>
6+
<MDTabs selectedIndex="1">
7+
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
8+
<TabStrip>
9+
<TabStripItem>
10+
<Label text="Home"></Label>
11+
<Image src="font://󰋜" class="mdi"></Image>
12+
</TabStripItem>
13+
<TabStripItem class="special">
14+
<Label text="Account"></Label>
15+
<Image src="font://󰀄" class="mdi"></Image>
16+
</TabStripItem>
17+
<TabStripItem class="special">
18+
<Label text="Search"></Label>
19+
<Image src="font://󰜏" class="mdi"></Image>
20+
</TabStripItem>
21+
</TabStrip>
22+
23+
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
24+
<TabContentItem>
25+
<GridLayout>
26+
<Label text="Home Page" class="h2 text-center"></Label>
27+
</GridLayout>
28+
</TabContentItem>
29+
<TabContentItem>
30+
<GridLayout>
31+
<Label text="Account Page" class="h2 text-center"></Label>
32+
</GridLayout>
33+
</TabContentItem>
34+
<TabContentItem>
35+
<GridLayout>
36+
<Label text="Search Page" class="h2 text-center"></Label>
37+
</GridLayout>
38+
</TabContentItem>
39+
</MDTabs>
40+
</Page>
41+
</template>
42+
43+
<script lang="ts">
44+
import * as frameModule from '@nativescript/core/ui/frame';
45+
import { Tabs } from 'nativescript-material-tabs';
46+
import { EventData } from '@nativescript/core/ui/core/view';
47+
48+
import Vue from 'vue';
49+
50+
export const title = 'Tabs sample';
51+
52+
export default Vue.extend({
53+
name: 'Tabs',
54+
data() {
55+
return {
56+
title: title
57+
};
58+
},
59+
methods: {
60+
onNavigationButtonTap() {
61+
frameModule.topmost().goBack();
62+
}
63+
}
64+
});
65+
</script>
66+
67+
<style>
68+
Tabs.bottom-nav {
69+
background-color: orangered;
70+
color: gold;
71+
font-size: 18;
72+
}
73+
74+
TabStripItem.tabstripitem-active {
75+
background-color: teal;
76+
}
77+
78+
TabStripItem.tabstripitem-active:active {
79+
background-color: yellowgreen;
80+
}
81+
82+
TabContentItem.first-tabcontent {
83+
background-color: seashell;
84+
color: olive;
85+
}
86+
TabContentItem.second-tabcontent {
87+
background-color: slategray;
88+
color: aquamarine;
89+
}
90+
TabContentItem.third-tabcontent {
91+
background-color: blueviolet;
92+
color: antiquewhite;
93+
}
94+
Tabs TabStrip {
95+
highlight-color: red;
96+
}
97+
</style>

‎demo-vue/app/examples/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import TextFields, { title as textFieldsTitle } from './TextFields.vue';
1111
import TextViews, { title as textViewsTitle } from './TextView.vue';
1212
import ButtonIssue, { title as buttonIssueTitle } from './ButtonIssue.vue';
1313
import BottomSheet, { title as bottomsheetTitle } from './BottomSheet.vue';
14+
import Tabs, { title as tabsTitle } from './Tabs.vue';
1415
import Mixins, { title as mixinsTitle } from './Mixins.vue';
1516

1617
export const getExamples = () => {
@@ -27,6 +28,10 @@ export const getExamples = () => {
2728
title: bottomNavigationBarTitle,
2829
component: BottomNavigationBar
2930
},
31+
{
32+
title: tabsTitle,
33+
component: Tabs
34+
},
3035
{
3136
title: cardViewsTitle,
3237
component: CardViews

‎demo-vue/app/main.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ import TextViewPlugin from 'nativescript-material-textview/vue';
3939
import { isIOS } from '@nativescript/core/platform';
4040
import { install as installBottomSheet } from 'nativescript-material-bottomsheet';
4141
import BottomSheetPlugin from 'nativescript-material-bottomsheet/vue';
42-
import BottomNavigationBarlugin from 'nativescript-material-bottomnavigationbar/vue';
42+
import BottomNavigationBarPlugin from 'nativescript-material-bottomnavigationbar/vue';
43+
import TabsPlugin from 'nativescript-material-tabs/vue';
4344

4445
installBottomSheet();
4546

@@ -53,7 +54,8 @@ Vue.use(SliderPlugin);
5354
Vue.use(TextViewPlugin);
5455
Vue.use(TextFieldPlugin);
5556
Vue.use(BottomSheetPlugin);
56-
Vue.use(BottomNavigationBarlugin);
57+
Vue.use(BottomNavigationBarPlugin);
58+
Vue.use(TabsPlugin);
5759

5860
Vue.registerElement('PreviousNextView', () => require('nativescript-iqkeyboardmanager').PreviousNextView);
5961
Vue.registerElement('TextViewWithHint', () => require('nativescript-iqkeyboardmanager').TextViewWithHint);

‎demo-vue/package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@
1313
}
1414
},
1515
"dependencies": {
16+
"@mdi/font": "^5.0.45",
1617
"@nativescript/core": "6.5.0",
17-
"nativescript-vue-template-compiler": "^2.5.0",
18-
"nativescript-vue": "~2.5.0",
19-
"nativescript-akylas-vue": "2.5.0-alpha.12",
18+
"@nativescript/theme": "~2.3.3",
2019
"nativescript-iqkeyboardmanager": "^1.5.1",
2120
"nativescript-material-activityindicator": "file:../packages/nativescript-material-activityindicator",
2221
"nativescript-material-bottomnavigationbar": "file:../packages/nativescript-material-bottomnavigationbar",
@@ -30,21 +29,23 @@
3029
"nativescript-material-ripple": "file:../packages/nativescript-material-ripple",
3130
"nativescript-material-slider": "file:../packages/nativescript-material-slider",
3231
"nativescript-material-snackbar": "file:../packages/nativescript-material-snackbar",
32+
"nativescript-material-tabs": "file:../packages/nativescript-material-tabs",
3333
"nativescript-material-textfield": "file:../packages/nativescript-material-textfield",
3434
"nativescript-material-textview": "file:../packages/nativescript-material-textview",
35-
"@nativescript/theme": "~2.3.3"
35+
"nativescript-vue": "~2.6.0",
36+
"nativescript-vue-template-compiler": "^2.5.0"
3637
},
3738
"devDependencies": {
3839
"@babel/core": "^7.9.0",
3940
"@babel/preset-env": "^7.9.0",
4041
"babel-loader": "^8.1.0",
4142
"clean-webpack-plugin": "^3.0.0",
4243
"copy-webpack-plugin": "^5.1.1",
44+
"css-loader": "^3.4.2",
4345
"nativescript-dev-webpack": "1.5.1",
4446
"nativescript-vue-template-compiler": "^2.5.0",
4547
"node-sass": "^4.13.1",
4648
"sass-loader": "^8.0.2",
47-
"css-loader": "^3.4.2",
4849
"tns-platform-declarations": "6.5.0",
4950
"tslint": "^6.1.0",
5051
"tslint-config-prettier": "^1.18.0",

‎demo-vue/webpack.config.js

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ module.exports = env => {
8989
alias['~'] = appFullPath;
9090
alias['@'] = appFullPath;
9191
alias['vue'] = 'nativescript-vue';
92-
alias['nativescript-vue'] = 'nativescript-akylas-vue';
9392

9493
if (hasRootLevelScopedModules) {
9594
coreModulesPackageName = '@nativescript/core';
@@ -136,6 +135,11 @@ module.exports = env => {
136135
'nativescript-material-button/button$': '#/button/button.' + platform,
137136
'../button$': '#/button/button.' + platform,
138137

138+
'nativescript-material-tabs$': '#/tabs/tabs.' + platform,
139+
'nativescript-material-tabs/vue$': '#/tabs/vue/index',
140+
'nativescript-material-tabs/tabs$': '#/tabs/button.' + platform,
141+
'../tabs$': '#/tabs/tabs.' + platform,
142+
139143
'nativescript-material-textfield$': '#/textfield/textfield',
140144
'nativescript-material-textfield': '#/textfield',
141145
// 'nativescript-material-textfield/textfield$': '#/textfield/textfield.' + platform,
@@ -386,9 +390,20 @@ module.exports = env => {
386390
// Remove all files from the out dir.
387391
new CleanWebpackPlugin({ verbose: !!verbose, cleanOnceBeforeBuildPatterns: itemsToClean }),
388392
// Copy assets to out dir. Add your own globs as needed.
389-
new CopyWebpackPlugin([{ from: { glob: 'fonts/**' } }, { from: { glob: '**/*.+(jpg|png)' } }, { from: { glob: 'assets/**/*' } }], {
390-
ignore: [`${relative(appPath, appResourcesFullPath)}/**`]
391-
}),
393+
new CopyWebpackPlugin(
394+
[
395+
{ from: { glob: 'fonts/**' } },
396+
{ from: { glob: '**/*.+(jpg|png)' } },
397+
{ from: { glob: 'assets/**/*' } },
398+
{
399+
from: resolve(__dirname, 'node_modules', '@mdi/font/fonts/materialdesignicons-webfont.ttf'),
400+
to: 'fonts'
401+
}
402+
],
403+
{
404+
ignore: [`${relative(appPath, appResourcesFullPath)}/**`]
405+
}
406+
),
392407
new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'),
393408
// For instructions on how to set up workers with webpack
394409
// check out https://github.com/nativescript/worker-loader

0 commit comments

Comments
 (0)