Skip to content

Commit a1b3aa7

Browse files
farfromrefugfarfromrefug
committed
chore: demo
1 parent 597a256 commit a1b3aa7

File tree

2 files changed

+51
-58
lines changed

2 files changed

+51
-58
lines changed

‎demo-snippets/vue/SwipeMenu.vue‎

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,9 @@
66
</ActionBar>
77

88
<GridLayout rows="auto,*">
9-
<CollectionView :items="items" row="1" rowHeight="100" ref="collectionView">
9+
<CollectionView :items="items" row="1" rowHeight="100" ref="collectionView" autoReloadItemOnLayout="true">
1010
<v-template>
11-
<SwipeMenu
12-
rightSwipeDistance="300"
13-
:translationFunction="drawerTranslationFunction"
14-
:startingSide="item.startingSide"
15-
>
11+
<SwipeMenu rightSwipeDistance="300" :translationFunction="drawerTranslationFunction" :startingSide="item.startingSide">
1612
<Gridlayout rows="*, auto" :backgroundColor="item.color" class="item" ~mainContent width="100%">
1713
<Stacklayout row="1">
1814
<Label row="1" :text="item.name" class="title" />
@@ -43,26 +39,26 @@ export default Vue.extend({
4339
return {
4440
item: undefined, // only for vetur errors
4541
items: new ObservableArray([
46-
{ index: 0, name: 'TURQUOISE', color: '#1abc9c'},
47-
{ index: 1, name: 'EMERALD', color: '#2ecc71'},
48-
{ index: 2, name: 'PETER RIVER', color: '#3498db'},
49-
{ index: 3, name: 'AMETHYST', color: '#9b59b6'},
50-
{ index: 4, name: 'WET ASPHALT', color: '#34495e'},
51-
{ index: 5, name: 'GREEN SEA', color: '#16a085'},
52-
{ index: 6, name: 'NEPHRITIS', color: '#27ae60'},
53-
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9'},
54-
{ index: 8, name: 'WISTERIA', color: '#8e44ad'},
55-
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50'},
56-
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f'},
57-
{ index: 11, name: 'CARROT', color: '#e67e22'},
58-
{ index: 12, name: 'ALIZARIN', color: '#e74c3c'},
59-
{ index: 13, name: 'CLOUDS', color: '#ecf0f1'},
60-
{ index: 14, name: 'CONCRETE', color: '#95a5a6'},
61-
{ index: 15, name: 'ORANGE', color: '#f39c12'},
62-
{ index: 16, name: 'PUMPKIN', color: '#d35400'},
63-
{ index: 17, name: 'POMEGRANATE', color: '#c0392b'},
64-
{ index: 18, name: 'SILVER', color: '#bdc3c7'},
65-
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d'}
42+
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
43+
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
44+
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
45+
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
46+
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
47+
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
48+
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
49+
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
50+
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
51+
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
52+
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
53+
{ index: 11, name: 'CARROT', color: '#e67e22' },
54+
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
55+
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
56+
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
57+
{ index: 15, name: 'ORANGE', color: '#f39c12' },
58+
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
59+
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
60+
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
61+
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
6662
])
6763
};
6864
},

‎demo-snippets/vue3/SwipeMenu.vue‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,17 @@
66
</ActionBar>
77

88
<GridLayout rows="auto,*">
9-
<CollectionView :items="itemList" row="1" rowHeight="100" ref="collectionView">
9+
<CollectionView :items="itemList" row="1" rowHeight="100" ref="collectionView" autoReloadItemOnLayout="true">
1010
<template #default="{ item }">
11-
<SwipeMenu leftSwipeDistance="300" :translationFunction="drawerTranslationFunction"
12-
:startingSide="item.startingSide">
13-
<Gridlayout rows="*, auto" :backgroundColor="item.color" class="item" ~mainContent
14-
width="100%">
11+
<SwipeMenu leftSwipeDistance="300" :translationFunction="drawerTranslationFunction" :startingSide="item.startingSide">
12+
<Gridlayout rows="*, auto" :backgroundColor="item.color" class="item" ~mainContent width="100%">
1513
<Stacklayout row="1">
1614
<Label row="1" :text="item.name" class="title" />
1715
<Label row="1" :text="item.color" class="subtitle" />
1816
</Stacklayout>
1917
</Gridlayout>
2018
<Stacklayout ~leftDrawer orientation="horizontal" width="200">
21-
<Label :text="item.menuOpened ? 'opened' : 'a'" width="100" height="100%" backgroundColor="red"
22-
textAlignment="center" />
19+
<Label :text="item.menuOpened ? 'opened' : 'a'" width="100" height="100%" backgroundColor="red" textAlignment="center" />
2320
<Label text="b" width="100" height="100%" backgroundColor="blue" textAlignment="center" />
2421
</Stacklayout>
2522
</SwipeMenu>
@@ -29,33 +26,34 @@
2926
</Page>
3027
</template>
3128

32-
3329
<script setup lang="ts">
3430
import { ObservableArray } from '@nativescript/core';
35-
import { ref, $navigateBack } from "nativescript-vue"
31+
import { $navigateBack, ref } from 'nativescript-vue';
3632
37-
const itemList = ref(new ObservableArray([
38-
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
39-
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
40-
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
41-
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
42-
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
43-
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
44-
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
45-
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
46-
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
47-
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
48-
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
49-
{ index: 11, name: 'CARROT', color: '#e67e22' },
50-
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
51-
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
52-
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
53-
{ index: 15, name: 'ORANGE', color: '#f39c12' },
54-
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
55-
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
56-
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
57-
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
58-
]));
33+
const itemList = ref(
34+
new ObservableArray([
35+
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
36+
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
37+
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
38+
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
39+
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
40+
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
41+
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
42+
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
43+
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
44+
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
45+
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
46+
{ index: 11, name: 'CARROT', color: '#e67e22' },
47+
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
48+
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
49+
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
50+
{ index: 15, name: 'ORANGE', color: '#f39c12' },
51+
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
52+
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
53+
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
54+
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
55+
])
56+
);
5957
6058
function drawerTranslationFunction(side, width, value, delta, progress) {
6159
const result = {
@@ -66,7 +64,6 @@ function drawerTranslationFunction(side, width, value, delta, progress) {
6664
6765
return result;
6866
}
69-
7067
</script>
7168

7269
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)