@timus-networks/theme 1.0.62 → 1.0.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Basic</h1>
|
|
5
|
+
<p class="p-lg my-6">
|
|
6
|
+
Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
|
|
7
|
+
</p>
|
|
8
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
9
|
+
<el-collapse v-model="activeNames" @change="handleChange">
|
|
10
|
+
<el-collapse-item title="Consistency" name="1">
|
|
11
|
+
<div>
|
|
12
|
+
Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used
|
|
13
|
+
to;
|
|
14
|
+
</div>
|
|
15
|
+
<div>
|
|
16
|
+
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
|
|
17
|
+
</div>
|
|
18
|
+
</el-collapse-item>
|
|
19
|
+
<el-collapse-item title="Feedback" name="2">
|
|
20
|
+
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
|
21
|
+
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
|
22
|
+
</el-collapse-item>
|
|
23
|
+
<el-collapse-item title="Efficiency" name="3">
|
|
24
|
+
<div>Simplify the process: keep operating process simple and intuitive;</div>
|
|
25
|
+
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
|
26
|
+
<div>
|
|
27
|
+
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and
|
|
28
|
+
recalling.
|
|
29
|
+
</div>
|
|
30
|
+
</el-collapse-item>
|
|
31
|
+
<el-collapse-item title="Controllability" name="4">
|
|
32
|
+
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
|
33
|
+
<div>
|
|
34
|
+
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
|
|
35
|
+
</div>
|
|
36
|
+
</el-collapse-item>
|
|
37
|
+
</el-collapse>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
40
|
+
<p class="text-xs">
|
|
41
|
+
<code><el-input placeholder="Please input" v-model="input"></el-input></code>
|
|
42
|
+
</p>
|
|
43
|
+
</div>
|
|
44
|
+
</section>
|
|
45
|
+
</div>
|
|
46
|
+
</template>
|
|
47
|
+
<script>
|
|
48
|
+
import Vue from 'vue';
|
|
49
|
+
|
|
50
|
+
export default Vue.extend({
|
|
51
|
+
name: 'TimusButtonSample',
|
|
52
|
+
computed: {
|
|
53
|
+
gridSize() {
|
|
54
|
+
const grids = {
|
|
55
|
+
5: 'grid-cols-5',
|
|
56
|
+
6: 'grid-cols-6',
|
|
57
|
+
7: 'grid-cols-7',
|
|
58
|
+
8: 'grid-cols-8',
|
|
59
|
+
};
|
|
60
|
+
return grids;
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
data() {
|
|
64
|
+
return {
|
|
65
|
+
activeNames: ['1'],
|
|
66
|
+
};
|
|
67
|
+
},
|
|
68
|
+
methods: {
|
|
69
|
+
handleChange(val) {
|
|
70
|
+
console.log(val);
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
});
|
|
74
|
+
</script>
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
<el-tab-pane label="Sidebar" name="twenty-one"><ThemeSidebar></ThemeSidebar></el-tab-pane>
|
|
25
25
|
<el-tab-pane label="Upload" name="twenty-two"><ThemeUpload></ThemeUpload></el-tab-pane>
|
|
26
26
|
<el-tab-pane label="MessageBox" name="twenty-three"><ThemeMessageBox></ThemeMessageBox></el-tab-pane>
|
|
27
|
-
<el-tab-pane label="Information" name="twenty-
|
|
27
|
+
<el-tab-pane label="Information" name="twenty-four"><ThemeInformation></ThemeInformation></el-tab-pane>
|
|
28
|
+
<el-tab-pane label="Collapse" name="twenty-five"><ThemeCollapse></ThemeCollapse></el-tab-pane>
|
|
28
29
|
</el-tabs>
|
|
29
30
|
</div>
|
|
30
31
|
</template>
|
|
@@ -36,7 +37,7 @@ import ThemePopover from './ThemePopover.vue';
|
|
|
36
37
|
export default {
|
|
37
38
|
data() {
|
|
38
39
|
return {
|
|
39
|
-
activeName: '
|
|
40
|
+
activeName: 'fifteen',
|
|
40
41
|
};
|
|
41
42
|
},
|
|
42
43
|
methods: {
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Basic</h1>
|
|
5
|
+
<p class="p-lg my-6">
|
|
6
|
+
Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
|
|
7
|
+
</p>
|
|
8
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
9
|
+
<el-collapse v-model="activeNames" @change="handleChange">
|
|
10
|
+
<el-collapse-item title="Consistency" name="1">
|
|
11
|
+
<div>
|
|
12
|
+
Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used
|
|
13
|
+
to;
|
|
14
|
+
</div>
|
|
15
|
+
<div>
|
|
16
|
+
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
|
|
17
|
+
</div>
|
|
18
|
+
</el-collapse-item>
|
|
19
|
+
<el-collapse-item title="Feedback" name="2">
|
|
20
|
+
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
|
21
|
+
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
|
22
|
+
</el-collapse-item>
|
|
23
|
+
<el-collapse-item title="Efficiency" name="3">
|
|
24
|
+
<div>Simplify the process: keep operating process simple and intuitive;</div>
|
|
25
|
+
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
|
26
|
+
<div>
|
|
27
|
+
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and
|
|
28
|
+
recalling.
|
|
29
|
+
</div>
|
|
30
|
+
</el-collapse-item>
|
|
31
|
+
<el-collapse-item title="Controllability" name="4">
|
|
32
|
+
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
|
33
|
+
<div>
|
|
34
|
+
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
|
|
35
|
+
</div>
|
|
36
|
+
</el-collapse-item>
|
|
37
|
+
</el-collapse>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
40
|
+
<p class="text-xs">
|
|
41
|
+
<code><el-input placeholder="Please input" v-model="input"></el-input></code>
|
|
42
|
+
</p>
|
|
43
|
+
</div>
|
|
44
|
+
</section>
|
|
45
|
+
</div>
|
|
46
|
+
</template>
|
|
47
|
+
<script>
|
|
48
|
+
import Vue from 'vue';
|
|
49
|
+
|
|
50
|
+
export default Vue.extend({
|
|
51
|
+
name: 'TimusButtonSample',
|
|
52
|
+
computed: {
|
|
53
|
+
gridSize() {
|
|
54
|
+
const grids = {
|
|
55
|
+
5: 'grid-cols-5',
|
|
56
|
+
6: 'grid-cols-6',
|
|
57
|
+
7: 'grid-cols-7',
|
|
58
|
+
8: 'grid-cols-8',
|
|
59
|
+
};
|
|
60
|
+
return grids;
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
data() {
|
|
64
|
+
return {
|
|
65
|
+
activeNames: ['1'],
|
|
66
|
+
};
|
|
67
|
+
},
|
|
68
|
+
methods: {
|
|
69
|
+
handleChange(val) {
|
|
70
|
+
console.log(val);
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
});
|
|
74
|
+
</script>
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
<el-tab-pane label="Sidebar" name="twenty-one"><ThemeSidebar></ThemeSidebar></el-tab-pane>
|
|
25
25
|
<el-tab-pane label="Upload" name="twenty-two"><ThemeUpload></ThemeUpload></el-tab-pane>
|
|
26
26
|
<el-tab-pane label="MessageBox" name="twenty-three"><ThemeMessageBox></ThemeMessageBox></el-tab-pane>
|
|
27
|
-
<el-tab-pane label="Information" name="twenty-
|
|
27
|
+
<el-tab-pane label="Information" name="twenty-four"><ThemeInformation></ThemeInformation></el-tab-pane>
|
|
28
|
+
<el-tab-pane label="Collapse" name="twenty-five"><ThemeCollapse></ThemeCollapse></el-tab-pane>
|
|
28
29
|
</el-tabs>
|
|
29
30
|
</div>
|
|
30
31
|
</template>
|
|
@@ -36,7 +37,7 @@ import ThemePopover from './ThemePopover.vue';
|
|
|
36
37
|
export default {
|
|
37
38
|
data() {
|
|
38
39
|
return {
|
|
39
|
-
activeName: '
|
|
40
|
+
activeName: 'fifteen',
|
|
40
41
|
};
|
|
41
42
|
},
|
|
42
43
|
methods: {
|