@timus-networks/theme 1.0.24 → 1.0.26
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.
- package/components-js/ThemeLink.vue +98 -78
- package/components-ts/ThemeLink.vue +98 -78
- package/output/main.css +1 -1
- package/package.json +1 -1
|
@@ -1,91 +1,111 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Link</h1>
|
|
5
|
+
<p class="p-lg my-6">
|
|
6
|
+
`el-link` bileşeni, sayfadaki metni veya bağlantıyı temsil eder ve stil ve davranışlarını özelleştirmenize olanak tanır.
|
|
7
|
+
</p>
|
|
8
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
9
|
+
<el-link href="https://element.eleme.io" target="_blank">default</el-link>
|
|
10
|
+
<el-link :type="item" v-for="(item, index) in colors" :key="index">{{ item }}</el-link>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
13
|
+
<p class="text-xs">
|
|
14
|
+
<code><el-link type="primary">Bağlantı</el-link></code>
|
|
15
|
+
</p>
|
|
16
|
+
</div>
|
|
17
|
+
</section>
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
<section>
|
|
20
|
+
<h1>Nuxt Link ile Kullanım</h1>
|
|
21
|
+
<p class="p-lg my-6">El Link bileşenini Nuxt Link ile kullanabilirsiniz. Bu, Nuxt.js projelerinde sayfa geçişlerini kolaylaştırır.</p>
|
|
22
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
23
|
+
<NuxtLink to="/" v-for="(item, index) in colors" :key="index">
|
|
24
|
+
<el-link :type="item">Router: {{ item }}</el-link>
|
|
25
|
+
</NuxtLink>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
28
|
+
<p class="text-xs">
|
|
29
|
+
<code><NuxtLink to="/"><el-link type="primary">Bağlantı</el-link></NuxtLink></code>
|
|
30
|
+
</p>
|
|
31
|
+
</div>
|
|
32
|
+
</section>
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
34
|
+
<section>
|
|
35
|
+
<h1>Devre Dışı Bırakılmış Durum</h1>
|
|
36
|
+
<p class="p-lg my-6">El Link bileşenini devre dışı bırakmak için <code>disabled</code> özelliğini kullanabilirsiniz.</p>
|
|
37
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
38
|
+
<el-link disabled>default</el-link>
|
|
39
|
+
<el-link :type="item" v-for="(item, index) in colors" :key="index" disabled>{{ item }}</el-link>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
42
|
+
<p class="text-xs">
|
|
43
|
+
<code><el-link disabled>Devre Dışı</el-link></code>
|
|
44
|
+
</p>
|
|
45
|
+
</div>
|
|
46
|
+
</section>
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
48
|
+
<section>
|
|
49
|
+
<h1>Sizes</h1>
|
|
50
|
+
<p class="p-lg my-6">
|
|
51
|
+
El Link bileşeninin farklı boyutlarda kullanımı için 5 örnek yer almaktadır. 'large', 'medium', 'medium-custom', 'small', 'xsmall'
|
|
52
|
+
</p>
|
|
53
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
54
|
+
<el-link type="primary" :underline="false">Alt Çizgi Yok</el-link>
|
|
55
|
+
<el-link type="primary" class="large">Alt Çizgiyle</el-link>
|
|
56
|
+
<el-link type="primary" class="medium">Alt Çizgiyle</el-link>
|
|
57
|
+
<el-link type="primary" class="medium-custom">Alt Çizgiyle</el-link>
|
|
58
|
+
<el-link type="primary" class="small">Alt Çizgiyle</el-link>
|
|
59
|
+
<el-link type="primary" class="xsmall">Alt Çizgiyle</el-link>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
62
|
+
<p class="text-xs">
|
|
63
|
+
<code><el-link :underline="false">Alt Çizgi Yok</el-link></code>
|
|
64
|
+
</p>
|
|
65
|
+
</div>
|
|
66
|
+
</section>
|
|
63
67
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
68
|
+
<section>
|
|
69
|
+
<h1>Alt Çizgi</h1>
|
|
70
|
+
<p class="p-lg my-6">
|
|
71
|
+
El Link bileşeninin alt çizgisini göstermek veya gizlemek için <code>:underline="false"</code> özelliğini kullanabilirsiniz.
|
|
72
|
+
</p>
|
|
73
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
74
|
+
<el-link type="primary" :underline="false">Alt Çizgi Yok</el-link>
|
|
75
|
+
<el-link type="primary">Alt Çizgiyle</el-link>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
78
|
+
<p class="text-xs">
|
|
79
|
+
<code><el-link :underline="false">Alt Çizgi Yok</el-link></code>
|
|
80
|
+
</p>
|
|
81
|
+
</div>
|
|
82
|
+
</section>
|
|
83
|
+
|
|
84
|
+
<section>
|
|
85
|
+
<h1>İkon</h1>
|
|
86
|
+
<p class="p-lg my-6">El Link bileşeni, metin veya bağlantı ile birlikte ikonlar eklemenize olanak tanır.</p>
|
|
87
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
88
|
+
<el-link type="primary" icon="el-icon-edit">Düzenle</el-link>
|
|
89
|
+
<el-link type="primary">Onayla<i class="el-icon-view el-icon--right"></i> </el-link>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
92
|
+
<p class="text-xs">
|
|
93
|
+
<code><el-link icon="el-icon-edit">Düzenle</el-link></code>
|
|
94
|
+
</p>
|
|
95
|
+
</div>
|
|
96
|
+
</section>
|
|
97
|
+
</div>
|
|
78
98
|
</template>
|
|
79
99
|
|
|
80
100
|
<script>
|
|
81
101
|
import Vue from 'vue';
|
|
82
102
|
|
|
83
103
|
export default Vue.extend({
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
104
|
+
name: 'TimusButtonSample',
|
|
105
|
+
data() {
|
|
106
|
+
return {
|
|
107
|
+
colors: ['primary', 'secondary', 'gray', 'info', 'success', 'warning', 'danger'],
|
|
108
|
+
};
|
|
109
|
+
},
|
|
90
110
|
});
|
|
91
111
|
</script>
|
|
@@ -1,91 +1,111 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Link</h1>
|
|
5
|
+
<p class="p-lg my-6">
|
|
6
|
+
`el-link` bileşeni, sayfadaki metni veya bağlantıyı temsil eder ve stil ve davranışlarını özelleştirmenize olanak tanır.
|
|
7
|
+
</p>
|
|
8
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
9
|
+
<el-link href="https://element.eleme.io" target="_blank">default</el-link>
|
|
10
|
+
<el-link :type="item" v-for="(item, index) in colors" :key="index">{{ item }}</el-link>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
13
|
+
<p class="text-xs">
|
|
14
|
+
<code><el-link type="primary">Bağlantı</el-link></code>
|
|
15
|
+
</p>
|
|
16
|
+
</div>
|
|
17
|
+
</section>
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
<section>
|
|
20
|
+
<h1>Nuxt Link ile Kullanım</h1>
|
|
21
|
+
<p class="p-lg my-6">El Link bileşenini Nuxt Link ile kullanabilirsiniz. Bu, Nuxt.js projelerinde sayfa geçişlerini kolaylaştırır.</p>
|
|
22
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
23
|
+
<NuxtLink to="/" v-for="(item, index) in colors" :key="index">
|
|
24
|
+
<el-link :type="item">Router: {{ item }}</el-link>
|
|
25
|
+
</NuxtLink>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
28
|
+
<p class="text-xs">
|
|
29
|
+
<code><NuxtLink to="/"><el-link type="primary">Bağlantı</el-link></NuxtLink></code>
|
|
30
|
+
</p>
|
|
31
|
+
</div>
|
|
32
|
+
</section>
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
34
|
+
<section>
|
|
35
|
+
<h1>Devre Dışı Bırakılmış Durum</h1>
|
|
36
|
+
<p class="p-lg my-6">El Link bileşenini devre dışı bırakmak için <code>disabled</code> özelliğini kullanabilirsiniz.</p>
|
|
37
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
38
|
+
<el-link disabled>default</el-link>
|
|
39
|
+
<el-link :type="item" v-for="(item, index) in colors" :key="index" disabled>{{ item }}</el-link>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
42
|
+
<p class="text-xs">
|
|
43
|
+
<code><el-link disabled>Devre Dışı</el-link></code>
|
|
44
|
+
</p>
|
|
45
|
+
</div>
|
|
46
|
+
</section>
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
48
|
+
<section>
|
|
49
|
+
<h1>Sizes</h1>
|
|
50
|
+
<p class="p-lg my-6">
|
|
51
|
+
El Link bileşeninin farklı boyutlarda kullanımı için 5 örnek yer almaktadır. 'large', 'medium', 'medium-custom', 'small', 'xsmall'
|
|
52
|
+
</p>
|
|
53
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
54
|
+
<el-link type="primary" :underline="false">Alt Çizgi Yok</el-link>
|
|
55
|
+
<el-link type="primary" class="large">Alt Çizgiyle</el-link>
|
|
56
|
+
<el-link type="primary" class="medium">Alt Çizgiyle</el-link>
|
|
57
|
+
<el-link type="primary" class="medium-custom">Alt Çizgiyle</el-link>
|
|
58
|
+
<el-link type="primary" class="small">Alt Çizgiyle</el-link>
|
|
59
|
+
<el-link type="primary" class="xsmall">Alt Çizgiyle</el-link>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
62
|
+
<p class="text-xs">
|
|
63
|
+
<code><el-link :underline="false">Alt Çizgi Yok</el-link></code>
|
|
64
|
+
</p>
|
|
65
|
+
</div>
|
|
66
|
+
</section>
|
|
63
67
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
68
|
+
<section>
|
|
69
|
+
<h1>Alt Çizgi</h1>
|
|
70
|
+
<p class="p-lg my-6">
|
|
71
|
+
El Link bileşeninin alt çizgisini göstermek veya gizlemek için <code>:underline="false"</code> özelliğini kullanabilirsiniz.
|
|
72
|
+
</p>
|
|
73
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
74
|
+
<el-link type="primary" :underline="false">Alt Çizgi Yok</el-link>
|
|
75
|
+
<el-link type="primary">Alt Çizgiyle</el-link>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
78
|
+
<p class="text-xs">
|
|
79
|
+
<code><el-link :underline="false">Alt Çizgi Yok</el-link></code>
|
|
80
|
+
</p>
|
|
81
|
+
</div>
|
|
82
|
+
</section>
|
|
83
|
+
|
|
84
|
+
<section>
|
|
85
|
+
<h1>İkon</h1>
|
|
86
|
+
<p class="p-lg my-6">El Link bileşeni, metin veya bağlantı ile birlikte ikonlar eklemenize olanak tanır.</p>
|
|
87
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
88
|
+
<el-link type="primary" icon="el-icon-edit">Düzenle</el-link>
|
|
89
|
+
<el-link type="primary">Onayla<i class="el-icon-view el-icon--right"></i> </el-link>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
92
|
+
<p class="text-xs">
|
|
93
|
+
<code><el-link icon="el-icon-edit">Düzenle</el-link></code>
|
|
94
|
+
</p>
|
|
95
|
+
</div>
|
|
96
|
+
</section>
|
|
97
|
+
</div>
|
|
78
98
|
</template>
|
|
79
99
|
|
|
80
100
|
<script>
|
|
81
101
|
import Vue from 'vue';
|
|
82
102
|
|
|
83
103
|
export default Vue.extend({
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
104
|
+
name: 'TimusButtonSample',
|
|
105
|
+
data() {
|
|
106
|
+
return {
|
|
107
|
+
colors: ['primary', 'secondary', 'gray', 'info', 'success', 'warning', 'danger'],
|
|
108
|
+
};
|
|
109
|
+
},
|
|
90
110
|
});
|
|
91
111
|
</script>
|