@timus-networks/theme 1.0.19 → 1.0.20
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/ThemeButtons.vue +17 -15
- package/components-js/ThemeInputNumbers.vue +72 -0
- package/components-js/ThemeInputs.vue +13 -13
- package/components-js/ThemeTimePicker.vue +153 -0
- package/components-js/TimusSamples.vue +5 -2
- package/components-ts/ThemeButtons.vue +17 -15
- package/components-ts/ThemeInputNumbers.vue +72 -0
- package/components-ts/ThemeInputs.vue +13 -13
- package/components-ts/ThemeTimePicker.vue +153 -0
- package/components-ts/TimusSamples.vue +5 -2
- package/output/main.css +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"Fill" stili butonlar, içeriği tamamen kaplayan renge sahip butonlardır. Bu butonlar, kullanıcının dikkatini çekmek ve önemli eylemleri
|
|
7
7
|
vurgulamak için idealdir.
|
|
8
8
|
</p>
|
|
9
|
-
<div class="grid grid-flow-col auto-cols-max">
|
|
9
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
10
10
|
<el-button :type="item" v-for="(item, index) in colors" :key="index">{{ item }}</el-button>
|
|
11
11
|
</div>
|
|
12
12
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<section>
|
|
21
21
|
<h1>Outline</h1>
|
|
22
22
|
<p class="p-lg my-6">Çevresi çizgili ve içi transparan olan 'outline' butonlarımız, daha hafif bir tasarım dili sunar.</p>
|
|
23
|
-
<div class="grid grid-flow-col auto-cols-max">
|
|
23
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
24
24
|
<el-button :type="item" v-for="(item, index) in colors" :key="index" class="outline" plain>{{ item }}</el-button>
|
|
25
25
|
</div>
|
|
26
26
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
<section>
|
|
35
35
|
<h1>Ghost</h1>
|
|
36
36
|
<p class="p-lg my-6">Hemen hemen şeffaf 'ghost' butonlarımız, minimalist tasarımlar için uygundur ve arka planla uyum sağlar.</p>
|
|
37
|
-
<div class="grid grid-flow-col auto-cols-max">
|
|
37
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
38
38
|
<el-button :type="item" v-for="(item, index) in colors" :key="index" class="ghost">{{ item }}</el-button>
|
|
39
39
|
</div>
|
|
40
40
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
<section>
|
|
49
49
|
<h1>Size</h1>
|
|
50
50
|
<p class="p-lg my-6">Farklı boyutlardaki butonlarımız, çeşitli arayüz ihtiyaçlarına yanıt vermek için tasarlanmıştır.</p>
|
|
51
|
-
<div class="grid grid-flow-col auto-cols-max items-center">
|
|
51
|
+
<div class="grid grid-flow-col auto-cols-max items-center gap-4">
|
|
52
52
|
<el-button :size="item" v-for="(item, index) in sizes" :key="index" type="primary">{{ item }}</el-button>
|
|
53
53
|
</div>
|
|
54
54
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
<section>
|
|
64
64
|
<h1>Disabled</h1>
|
|
65
65
|
<p class="p-lg my-6">Etkileşime kapalı 'disabled' butonlarımız, kullanılamaz durumları göstermek için kullanılır.</p>
|
|
66
|
-
<div class="grid grid-flow-col auto-cols-max">
|
|
66
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
67
67
|
<el-button :type="item" v-for="(item, index) in colors" :key="index" disabled>{{ item }}</el-button>
|
|
68
68
|
</div>
|
|
69
69
|
<div class="my-4 p-4 border-l-4 border-red-600 bg-red-100">
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
İkonlarla zenginleştirilmiş butonlarımız, görsel bir ipucu sunar ve kullanıcı deneyimini artırır. Tüm ikonlarımızın listesini görmek için
|
|
81
81
|
<nuxt-link to="/icons" class="text-blue-600 hover:underline">buraya tıklayın</nuxt-link>.
|
|
82
82
|
</p>
|
|
83
|
-
<div class="grid grid-flow-col auto-cols-max">
|
|
83
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
84
84
|
<el-button type="primary" class="isax-trash"></el-button>
|
|
85
85
|
<el-button type="primary" class="isax-chart"></el-button>
|
|
86
86
|
<el-button type="primary" class="isax-clipboard-text icon-right">icon-right</el-button>
|
|
@@ -97,15 +97,17 @@
|
|
|
97
97
|
<section>
|
|
98
98
|
<h1>Groups</h1>
|
|
99
99
|
<p class="p-lg my-6">Buton gruplarımız, ilgili işlemleri bir arada toplayarak kullanıcı arayüzünü düzenler.</p>
|
|
100
|
-
<
|
|
101
|
-
<el-button
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
<el-button
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
100
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
101
|
+
<el-button-group>
|
|
102
|
+
<el-button type="primary" class="isax-arrow-left">Previous Page</el-button>
|
|
103
|
+
<el-button type="primary" class="isax-arrow-right-1 icon-right">Next Page</el-button>
|
|
104
|
+
</el-button-group>
|
|
105
|
+
<el-button-group>
|
|
106
|
+
<el-button type="primary" icon="isax-textalign-justifyleft"></el-button>
|
|
107
|
+
<el-button type="primary" icon="isax-textalign-center"></el-button>
|
|
108
|
+
<el-button type="primary" icon="isax-textalign-justifyright"></el-button>
|
|
109
|
+
</el-button-group>
|
|
110
|
+
</div>
|
|
109
111
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
110
112
|
<p class="text-xs">Buton grupları için <code><el-button-group></code> kullanın.</p>
|
|
111
113
|
</div>
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Controls Position</h1>
|
|
5
|
+
<p class="p-lg my-6">Bu örnek, farklı boyutlarda ve konfigürasyonlarda bir sayı giriş bileşeni olan el-input-number'ı göstermektedir.</p>
|
|
6
|
+
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
7
|
+
<el-input-number v-model="input" controls-position="right" @change="handleChange" disabled></el-input-number>
|
|
8
|
+
<el-input-number v-model="input" size="large" controls-position="right" @change="handleChange"></el-input-number>
|
|
9
|
+
<el-input-number v-model="input" size="medium" controls-position="right" @change="handleChange"></el-input-number>
|
|
10
|
+
<el-input-number v-model="input" size="small" controls-position="right" @change="handleChange"></el-input-number>
|
|
11
|
+
<el-input-number v-model="input" size="mini" controls-position="right" @change="handleChange"></el-input-number>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
14
|
+
<p class="text-xs">
|
|
15
|
+
<code>
|
|
16
|
+
<el-input-number v-model="input" size="large" controls-position="right"
|
|
17
|
+
@change="handleChange"></el-input-number>
|
|
18
|
+
</code>
|
|
19
|
+
</p>
|
|
20
|
+
</div>
|
|
21
|
+
</section>
|
|
22
|
+
|
|
23
|
+
<section>
|
|
24
|
+
<h1>Basic usage</h1>
|
|
25
|
+
<p class="p-lg my-6">Bu örnek, minimum ve maksimum değerlerle sınırlı bir el-input-number bileşenini göstermektedir.</p>
|
|
26
|
+
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
27
|
+
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10000" disabled></el-input-number>
|
|
28
|
+
<el-input-number size="large" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
|
|
29
|
+
<el-input-number size="medium" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
|
|
30
|
+
<el-input-number size="small" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
|
|
31
|
+
<el-input-number size="mini" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
34
|
+
<p class="text-xs">
|
|
35
|
+
<code>
|
|
36
|
+
<el-input-number v-model="num" @change="handleChange" :min="1"
|
|
37
|
+
:max="10000"></el-input-number>
|
|
38
|
+
</code>
|
|
39
|
+
</p>
|
|
40
|
+
</div>
|
|
41
|
+
</section>
|
|
42
|
+
</div>
|
|
43
|
+
</template>
|
|
44
|
+
<script>
|
|
45
|
+
import Vue from 'vue';
|
|
46
|
+
|
|
47
|
+
export default Vue.extend({
|
|
48
|
+
name: 'TimusButtonSample',
|
|
49
|
+
data() {
|
|
50
|
+
return {
|
|
51
|
+
input: 3532,
|
|
52
|
+
num: 213,
|
|
53
|
+
};
|
|
54
|
+
},
|
|
55
|
+
methods: {
|
|
56
|
+
handleChange(value) {
|
|
57
|
+
console.log(value);
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
computed: {
|
|
61
|
+
gridSize() {
|
|
62
|
+
const grids = {
|
|
63
|
+
5: 'grid-cols-5',
|
|
64
|
+
6: 'grid-cols-6',
|
|
65
|
+
7: 'grid-cols-7',
|
|
66
|
+
8: 'grid-cols-8',
|
|
67
|
+
};
|
|
68
|
+
return grids;
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
});
|
|
72
|
+
</script>
|
|
@@ -12,7 +12,9 @@
|
|
|
12
12
|
start-placeholder="Start Date"
|
|
13
13
|
end-placeholder="End Date"
|
|
14
14
|
default-value="2010-10-01"
|
|
15
|
-
|
|
15
|
+
class="danger"
|
|
16
|
+
>
|
|
17
|
+
</el-date-picker>
|
|
16
18
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
17
19
|
<p class="text-xs">
|
|
18
20
|
<code
|
|
@@ -53,7 +55,7 @@
|
|
|
53
55
|
<h1>Basic</h1>
|
|
54
56
|
<p class="p-lg my-6">Standart metin girişi için temel <code>el-input</code> bileşenini kullanabilirsiniz.</p>
|
|
55
57
|
<div class="grid grid-flow-col auto-cols-max">
|
|
56
|
-
<el-input placeholder="Please input" v-model="input"></el-input>
|
|
58
|
+
<el-input placeholder="Please input" v-model="input" class="danger"></el-input>
|
|
57
59
|
</div>
|
|
58
60
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
59
61
|
<p class="text-xs">
|
|
@@ -150,19 +152,21 @@
|
|
|
150
152
|
<h1>Mixed input</h1>
|
|
151
153
|
<p class="p-lg my-6">Ön ek veya son ek içeren giriş bileşenleri, giriş alanlarına ekstra içerik ekleyerek daha açıklayıcı olabilir.</p>
|
|
152
154
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
153
|
-
<el-input placeholder="Please input" v-model="input1">
|
|
155
|
+
<el-input placeholder="Please input" v-model="input1" type="success">
|
|
154
156
|
<template slot="prepend">Http://</template>
|
|
155
157
|
</el-input>
|
|
158
|
+
|
|
156
159
|
<el-input placeholder="Please input" v-model="input2">
|
|
157
160
|
<template slot="append">.com</template>
|
|
158
161
|
</el-input>
|
|
162
|
+
|
|
159
163
|
<el-input placeholder="Please input" v-model="input3" class="input-with-select">
|
|
160
|
-
<el-select v-model="select" slot="
|
|
164
|
+
<el-select v-model="select" slot="append" placeholder="Select">
|
|
161
165
|
<el-option label="Restaurant" value="1"></el-option>
|
|
162
166
|
<el-option label="Order No." value="2"></el-option>
|
|
163
167
|
<el-option label="Tel" value="3"></el-option>
|
|
164
168
|
</el-select>
|
|
165
|
-
<el-button slot="
|
|
169
|
+
<el-button slot="prepend" icon="el-icon-search"></el-button>
|
|
166
170
|
</el-input>
|
|
167
171
|
</div>
|
|
168
172
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
@@ -194,13 +198,8 @@
|
|
|
194
198
|
<h1>Autocomplete</h1>
|
|
195
199
|
<p class="p-lg my-6">Otomatik tamamlama bileşeni, kullanıcıların yazarken öneriler almasını sağlar ve verimliliği artırır.</p>
|
|
196
200
|
<div class="grid grid-flow-col auto-cols-max items-center gap-4">
|
|
197
|
-
<el-autocomplete
|
|
198
|
-
|
|
199
|
-
v-model="state1"
|
|
200
|
-
:fetch-suggestions="querySearch"
|
|
201
|
-
placeholder="Please Input"
|
|
202
|
-
@select="handleSelect"
|
|
203
|
-
></el-autocomplete>
|
|
201
|
+
<el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="Please Input" @select="handleSelect">
|
|
202
|
+
</el-autocomplete>
|
|
204
203
|
<el-autocomplete
|
|
205
204
|
class="inline-input"
|
|
206
205
|
v-model="state2"
|
|
@@ -208,7 +207,8 @@
|
|
|
208
207
|
placeholder="Please Input"
|
|
209
208
|
:trigger-on-focus="false"
|
|
210
209
|
@select="handleSelect"
|
|
211
|
-
|
|
210
|
+
>
|
|
211
|
+
</el-autocomplete>
|
|
212
212
|
</div>
|
|
213
213
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
214
214
|
<p class="text-xs">
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Popover</h1>
|
|
5
|
+
<p class="p-lg my-6">
|
|
6
|
+
Popover bileşeni, kullanıcı tıkladığında veya üzerine geldiğinde ek bilgileri veya eylemleri göstermek için kullanılır. Örneğinizde, farklı
|
|
7
|
+
yönlere (right, bottom, top, left) yerleştirilmiş dört popover var. Her bir popover, içeriğini ve başlığını göstermek için bir tetikleyici
|
|
8
|
+
düğme (el-button) kullanır.
|
|
9
|
+
</p>
|
|
10
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
11
|
+
<el-popover placement="right" title="Title" width="200" trigger="click" content="this is content, this is content, this is content">
|
|
12
|
+
<el-button slot="reference">Right</el-button>
|
|
13
|
+
</el-popover>
|
|
14
|
+
<el-popover placement="bottom" title="Title" width="200" trigger="click" content="this is content, this is content, this is content">
|
|
15
|
+
<el-button slot="reference">Bottom</el-button>
|
|
16
|
+
</el-popover>
|
|
17
|
+
<el-popover placement="top" title="Title" width="200" trigger="click" content="this is content, this is content, this is content">
|
|
18
|
+
<el-button slot="reference">Top</el-button>
|
|
19
|
+
</el-popover>
|
|
20
|
+
<el-popover placement="left" title="Title" width="200" trigger="click" content="this is content, this is content, this is content">
|
|
21
|
+
<el-button slot="reference">Left</el-button>
|
|
22
|
+
</el-popover>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
25
|
+
<p class="text-xs">
|
|
26
|
+
<code>
|
|
27
|
+
<el-popover placement="right" title="Popover Title" trigger="click"> <el-button
|
|
28
|
+
slot="reference">Click Me</el-button> </el-popover>
|
|
29
|
+
</code>
|
|
30
|
+
</p>
|
|
31
|
+
</div>
|
|
32
|
+
</section>
|
|
33
|
+
|
|
34
|
+
<section>
|
|
35
|
+
<h1>Fixed time picker</h1>
|
|
36
|
+
<p class="p-lg my-6">
|
|
37
|
+
Fixed Time Picker, kullanıcının sabit zaman aralıklarından birini seçmesine olanak tanır. Bu örnekte, saat 08:30 ile 18:30 arasında 15
|
|
38
|
+
dakikalık adımlarla sabit zaman dilimleri belirlenmiştir. Kullanıcı bu zamanlardan birini seçebilir.
|
|
39
|
+
</p>
|
|
40
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
41
|
+
<el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="Select time"> </el-time-select>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
44
|
+
<p class="text-xs">
|
|
45
|
+
<code>
|
|
46
|
+
<el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30'
|
|
47
|
+
}"></el-time-select>
|
|
48
|
+
</code>
|
|
49
|
+
</p>
|
|
50
|
+
</div>
|
|
51
|
+
</section>
|
|
52
|
+
|
|
53
|
+
<section>
|
|
54
|
+
<h1>Arbitrary time picker</h1>
|
|
55
|
+
<p class="p-lg my-6">
|
|
56
|
+
Arbitrary Time Picker, kullanıcıya belirli bir zaman aralığında serbestçe zaman seçme imkanı sunar. Örneğinizde, seçilebilir zaman aralığı
|
|
57
|
+
18:30 - 20:30 arasındadır. Kullanıcılar bu zaman aralığı içinde herhangi bir zamanı seçebilirler.
|
|
58
|
+
</p>
|
|
59
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
60
|
+
<el-time-picker v-model="value1" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Arbitrary time"> </el-time-picker>
|
|
61
|
+
<el-time-picker arrow-control v-model="value2" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Arbitrary time">
|
|
62
|
+
</el-time-picker>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
65
|
+
<p class="text-xs">
|
|
66
|
+
<code>
|
|
67
|
+
<el-time-picker v-model="value" :picker-options="{ selectableRange: '18:30:00 - 20:30:00'
|
|
68
|
+
}"></el-time-picker>
|
|
69
|
+
</code>
|
|
70
|
+
</p>
|
|
71
|
+
</div>
|
|
72
|
+
</section>
|
|
73
|
+
|
|
74
|
+
<section>
|
|
75
|
+
<h1>Fixed time range</h1>
|
|
76
|
+
<p class="p-lg my-6">
|
|
77
|
+
Bu bileşen, kullanıcıya sabit bir zaman aralığında başlangıç ve bitiş zamanları seçme olanağı sunar. İki el-time-select bileşeni kullanılarak,
|
|
78
|
+
kullanıcılar belirli bir zaman aralığı içinde başlangıç ve bitiş zamanlarını seçebilirler.
|
|
79
|
+
</p>
|
|
80
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
81
|
+
<el-time-select placeholder="Start time" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
|
|
82
|
+
</el-time-select>
|
|
83
|
+
<el-time-select
|
|
84
|
+
placeholder="End time"
|
|
85
|
+
v-model="endTime"
|
|
86
|
+
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
|
|
87
|
+
>
|
|
88
|
+
</el-time-select>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
91
|
+
<p class="text-xs">
|
|
92
|
+
<code>
|
|
93
|
+
<el-time-select v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30'
|
|
94
|
+
}"></el-time-select>
|
|
95
|
+
</code>
|
|
96
|
+
</p>
|
|
97
|
+
</div>
|
|
98
|
+
</section>
|
|
99
|
+
|
|
100
|
+
<section>
|
|
101
|
+
<h1>Arbitrary time range</h1>
|
|
102
|
+
<p class="p-lg my-6">
|
|
103
|
+
Arbitrary Time Range bileşeni, kullanıcıya serbestçe bir zaman aralığı seçme imkanı tanır. is-range özelliği sayesinde, kullanıcılar başlangıç
|
|
104
|
+
ve bitiş zamanlarını serbestçe seçebilirler. Bu, zaman aralıklı işlemler için idealdir.
|
|
105
|
+
</p>
|
|
106
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
107
|
+
<el-time-picker is-range v-model="value1" range-separator="To" start-placeholder="Start time" end-placeholder="End time"> </el-time-picker>
|
|
108
|
+
<el-time-picker is-range arrow-control v-model="value2" range-separator="To" start-placeholder="Start time" end-placeholder="End time">
|
|
109
|
+
</el-time-picker>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
112
|
+
<p class="text-xs">
|
|
113
|
+
<code>
|
|
114
|
+
<el-time-picker is-range v-model="value" start-placeholder="Start time" end-placeholder="End
|
|
115
|
+
time"></el-time-picker>
|
|
116
|
+
</code>
|
|
117
|
+
</p>
|
|
118
|
+
</div>
|
|
119
|
+
</section>
|
|
120
|
+
</div>
|
|
121
|
+
</template>
|
|
122
|
+
<script>
|
|
123
|
+
import Vue from 'vue';
|
|
124
|
+
|
|
125
|
+
export default Vue.extend({
|
|
126
|
+
name: 'TimusButtonSample',
|
|
127
|
+
data() {
|
|
128
|
+
return {
|
|
129
|
+
value: '',
|
|
130
|
+
value1: new Date(2016, 9, 10, 18, 40),
|
|
131
|
+
value2: new Date(2016, 9, 10, 18, 40),
|
|
132
|
+
startTime: '',
|
|
133
|
+
endTime: '',
|
|
134
|
+
};
|
|
135
|
+
},
|
|
136
|
+
methods: {
|
|
137
|
+
handleChange(value) {
|
|
138
|
+
console.log(value);
|
|
139
|
+
},
|
|
140
|
+
},
|
|
141
|
+
computed: {
|
|
142
|
+
gridSize() {
|
|
143
|
+
const grids = {
|
|
144
|
+
5: 'grid-cols-5',
|
|
145
|
+
6: 'grid-cols-6',
|
|
146
|
+
7: 'grid-cols-7',
|
|
147
|
+
8: 'grid-cols-8',
|
|
148
|
+
};
|
|
149
|
+
return grids;
|
|
150
|
+
},
|
|
151
|
+
},
|
|
152
|
+
});
|
|
153
|
+
</script>
|
|
@@ -4,11 +4,14 @@
|
|
|
4
4
|
<el-tab-pane label="Button" name="first"><ThemeButtons></ThemeButtons></el-tab-pane>
|
|
5
5
|
<el-tab-pane label="Typography" name="second"><ThemeTypo></ThemeTypo></el-tab-pane>
|
|
6
6
|
<el-tab-pane label="Inputs" name="third"><ThemeInputs></ThemeInputs></el-tab-pane>
|
|
7
|
-
<el-tab-pane label="
|
|
7
|
+
<el-tab-pane label="Numbers" name="fourth"><ThemeInputNumbers></ThemeInputNumbers></el-tab-pane>
|
|
8
|
+
<el-tab-pane label="TimePicker" name="five"><ThemeTimePicker></ThemeTimePicker></el-tab-pane>
|
|
9
|
+
<el-tab-pane label="Form" name="six"><ThemeForm></ThemeForm>></el-tab-pane>
|
|
8
10
|
</el-tabs>
|
|
9
11
|
</div>
|
|
10
12
|
</template>
|
|
11
13
|
<script>
|
|
14
|
+
import ThemeInputNumbers from './ThemeInputNumbers.vue';
|
|
12
15
|
import ThemeInputs from './ThemeInputs.vue';
|
|
13
16
|
|
|
14
17
|
export default {
|
|
@@ -22,6 +25,6 @@ export default {
|
|
|
22
25
|
console.log(tab, event);
|
|
23
26
|
},
|
|
24
27
|
},
|
|
25
|
-
components: { ThemeInputs },
|
|
28
|
+
components: { ThemeInputs, ThemeInputNumbers },
|
|
26
29
|
};
|
|
27
30
|
</script>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"Fill" stili butonlar, içeriği tamamen kaplayan renge sahip butonlardır. Bu butonlar, kullanıcının dikkatini çekmek ve önemli eylemleri
|
|
7
7
|
vurgulamak için idealdir.
|
|
8
8
|
</p>
|
|
9
|
-
<div class="grid grid-flow-col auto-cols-max">
|
|
9
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
10
10
|
<el-button :type="item" v-for="(item, index) in colors" :key="index">{{ item }}</el-button>
|
|
11
11
|
</div>
|
|
12
12
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<section>
|
|
21
21
|
<h1>Outline</h1>
|
|
22
22
|
<p class="p-lg my-6">Çevresi çizgili ve içi transparan olan 'outline' butonlarımız, daha hafif bir tasarım dili sunar.</p>
|
|
23
|
-
<div class="grid grid-flow-col auto-cols-max">
|
|
23
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
24
24
|
<el-button :type="item" v-for="(item, index) in colors" :key="index" class="outline" plain>{{ item }}</el-button>
|
|
25
25
|
</div>
|
|
26
26
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
<section>
|
|
35
35
|
<h1>Ghost</h1>
|
|
36
36
|
<p class="p-lg my-6">Hemen hemen şeffaf 'ghost' butonlarımız, minimalist tasarımlar için uygundur ve arka planla uyum sağlar.</p>
|
|
37
|
-
<div class="grid grid-flow-col auto-cols-max">
|
|
37
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
38
38
|
<el-button :type="item" v-for="(item, index) in colors" :key="index" class="ghost">{{ item }}</el-button>
|
|
39
39
|
</div>
|
|
40
40
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
<section>
|
|
49
49
|
<h1>Size</h1>
|
|
50
50
|
<p class="p-lg my-6">Farklı boyutlardaki butonlarımız, çeşitli arayüz ihtiyaçlarına yanıt vermek için tasarlanmıştır.</p>
|
|
51
|
-
<div class="grid grid-flow-col auto-cols-max items-center">
|
|
51
|
+
<div class="grid grid-flow-col auto-cols-max items-center gap-4">
|
|
52
52
|
<el-button :size="item" v-for="(item, index) in sizes" :key="index" type="primary">{{ item }}</el-button>
|
|
53
53
|
</div>
|
|
54
54
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
<section>
|
|
64
64
|
<h1>Disabled</h1>
|
|
65
65
|
<p class="p-lg my-6">Etkileşime kapalı 'disabled' butonlarımız, kullanılamaz durumları göstermek için kullanılır.</p>
|
|
66
|
-
<div class="grid grid-flow-col auto-cols-max">
|
|
66
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
67
67
|
<el-button :type="item" v-for="(item, index) in colors" :key="index" disabled>{{ item }}</el-button>
|
|
68
68
|
</div>
|
|
69
69
|
<div class="my-4 p-4 border-l-4 border-red-600 bg-red-100">
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
İkonlarla zenginleştirilmiş butonlarımız, görsel bir ipucu sunar ve kullanıcı deneyimini artırır. Tüm ikonlarımızın listesini görmek için
|
|
81
81
|
<nuxt-link to="/icons" class="text-blue-600 hover:underline">buraya tıklayın</nuxt-link>.
|
|
82
82
|
</p>
|
|
83
|
-
<div class="grid grid-flow-col auto-cols-max">
|
|
83
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
84
84
|
<el-button type="primary" class="isax-trash"></el-button>
|
|
85
85
|
<el-button type="primary" class="isax-chart"></el-button>
|
|
86
86
|
<el-button type="primary" class="isax-clipboard-text icon-right">icon-right</el-button>
|
|
@@ -97,15 +97,17 @@
|
|
|
97
97
|
<section>
|
|
98
98
|
<h1>Groups</h1>
|
|
99
99
|
<p class="p-lg my-6">Buton gruplarımız, ilgili işlemleri bir arada toplayarak kullanıcı arayüzünü düzenler.</p>
|
|
100
|
-
<
|
|
101
|
-
<el-button
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
<el-button
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
100
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
101
|
+
<el-button-group>
|
|
102
|
+
<el-button type="primary" class="isax-arrow-left">Previous Page</el-button>
|
|
103
|
+
<el-button type="primary" class="isax-arrow-right-1 icon-right">Next Page</el-button>
|
|
104
|
+
</el-button-group>
|
|
105
|
+
<el-button-group>
|
|
106
|
+
<el-button type="primary" icon="isax-textalign-justifyleft"></el-button>
|
|
107
|
+
<el-button type="primary" icon="isax-textalign-center"></el-button>
|
|
108
|
+
<el-button type="primary" icon="isax-textalign-justifyright"></el-button>
|
|
109
|
+
</el-button-group>
|
|
110
|
+
</div>
|
|
109
111
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
110
112
|
<p class="text-xs">Buton grupları için <code><el-button-group></code> kullanın.</p>
|
|
111
113
|
</div>
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Controls Position</h1>
|
|
5
|
+
<p class="p-lg my-6">Bu örnek, farklı boyutlarda ve konfigürasyonlarda bir sayı giriş bileşeni olan el-input-number'ı göstermektedir.</p>
|
|
6
|
+
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
7
|
+
<el-input-number v-model="input" controls-position="right" @change="handleChange" disabled></el-input-number>
|
|
8
|
+
<el-input-number v-model="input" size="large" controls-position="right" @change="handleChange"></el-input-number>
|
|
9
|
+
<el-input-number v-model="input" size="medium" controls-position="right" @change="handleChange"></el-input-number>
|
|
10
|
+
<el-input-number v-model="input" size="small" controls-position="right" @change="handleChange"></el-input-number>
|
|
11
|
+
<el-input-number v-model="input" size="mini" controls-position="right" @change="handleChange"></el-input-number>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
14
|
+
<p class="text-xs">
|
|
15
|
+
<code>
|
|
16
|
+
<el-input-number v-model="input" size="large" controls-position="right"
|
|
17
|
+
@change="handleChange"></el-input-number>
|
|
18
|
+
</code>
|
|
19
|
+
</p>
|
|
20
|
+
</div>
|
|
21
|
+
</section>
|
|
22
|
+
|
|
23
|
+
<section>
|
|
24
|
+
<h1>Basic usage</h1>
|
|
25
|
+
<p class="p-lg my-6">Bu örnek, minimum ve maksimum değerlerle sınırlı bir el-input-number bileşenini göstermektedir.</p>
|
|
26
|
+
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
27
|
+
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10000" disabled></el-input-number>
|
|
28
|
+
<el-input-number size="large" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
|
|
29
|
+
<el-input-number size="medium" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
|
|
30
|
+
<el-input-number size="small" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
|
|
31
|
+
<el-input-number size="mini" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
34
|
+
<p class="text-xs">
|
|
35
|
+
<code>
|
|
36
|
+
<el-input-number v-model="num" @change="handleChange" :min="1"
|
|
37
|
+
:max="10000"></el-input-number>
|
|
38
|
+
</code>
|
|
39
|
+
</p>
|
|
40
|
+
</div>
|
|
41
|
+
</section>
|
|
42
|
+
</div>
|
|
43
|
+
</template>
|
|
44
|
+
<script>
|
|
45
|
+
import Vue from 'vue';
|
|
46
|
+
|
|
47
|
+
export default Vue.extend({
|
|
48
|
+
name: 'TimusButtonSample',
|
|
49
|
+
data() {
|
|
50
|
+
return {
|
|
51
|
+
input: 3532,
|
|
52
|
+
num: 213,
|
|
53
|
+
};
|
|
54
|
+
},
|
|
55
|
+
methods: {
|
|
56
|
+
handleChange(value) {
|
|
57
|
+
console.log(value);
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
computed: {
|
|
61
|
+
gridSize() {
|
|
62
|
+
const grids = {
|
|
63
|
+
5: 'grid-cols-5',
|
|
64
|
+
6: 'grid-cols-6',
|
|
65
|
+
7: 'grid-cols-7',
|
|
66
|
+
8: 'grid-cols-8',
|
|
67
|
+
};
|
|
68
|
+
return grids;
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
});
|
|
72
|
+
</script>
|
|
@@ -12,7 +12,9 @@
|
|
|
12
12
|
start-placeholder="Start Date"
|
|
13
13
|
end-placeholder="End Date"
|
|
14
14
|
default-value="2010-10-01"
|
|
15
|
-
|
|
15
|
+
class="danger"
|
|
16
|
+
>
|
|
17
|
+
</el-date-picker>
|
|
16
18
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
17
19
|
<p class="text-xs">
|
|
18
20
|
<code
|
|
@@ -53,7 +55,7 @@
|
|
|
53
55
|
<h1>Basic</h1>
|
|
54
56
|
<p class="p-lg my-6">Standart metin girişi için temel <code>el-input</code> bileşenini kullanabilirsiniz.</p>
|
|
55
57
|
<div class="grid grid-flow-col auto-cols-max">
|
|
56
|
-
<el-input placeholder="Please input" v-model="input"></el-input>
|
|
58
|
+
<el-input placeholder="Please input" v-model="input" class="danger"></el-input>
|
|
57
59
|
</div>
|
|
58
60
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
59
61
|
<p class="text-xs">
|
|
@@ -150,19 +152,21 @@
|
|
|
150
152
|
<h1>Mixed input</h1>
|
|
151
153
|
<p class="p-lg my-6">Ön ek veya son ek içeren giriş bileşenleri, giriş alanlarına ekstra içerik ekleyerek daha açıklayıcı olabilir.</p>
|
|
152
154
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
153
|
-
<el-input placeholder="Please input" v-model="input1">
|
|
155
|
+
<el-input placeholder="Please input" v-model="input1" type="success">
|
|
154
156
|
<template slot="prepend">Http://</template>
|
|
155
157
|
</el-input>
|
|
158
|
+
|
|
156
159
|
<el-input placeholder="Please input" v-model="input2">
|
|
157
160
|
<template slot="append">.com</template>
|
|
158
161
|
</el-input>
|
|
162
|
+
|
|
159
163
|
<el-input placeholder="Please input" v-model="input3" class="input-with-select">
|
|
160
|
-
<el-select v-model="select" slot="
|
|
164
|
+
<el-select v-model="select" slot="append" placeholder="Select">
|
|
161
165
|
<el-option label="Restaurant" value="1"></el-option>
|
|
162
166
|
<el-option label="Order No." value="2"></el-option>
|
|
163
167
|
<el-option label="Tel" value="3"></el-option>
|
|
164
168
|
</el-select>
|
|
165
|
-
<el-button slot="
|
|
169
|
+
<el-button slot="prepend" icon="el-icon-search"></el-button>
|
|
166
170
|
</el-input>
|
|
167
171
|
</div>
|
|
168
172
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
@@ -194,13 +198,8 @@
|
|
|
194
198
|
<h1>Autocomplete</h1>
|
|
195
199
|
<p class="p-lg my-6">Otomatik tamamlama bileşeni, kullanıcıların yazarken öneriler almasını sağlar ve verimliliği artırır.</p>
|
|
196
200
|
<div class="grid grid-flow-col auto-cols-max items-center gap-4">
|
|
197
|
-
<el-autocomplete
|
|
198
|
-
|
|
199
|
-
v-model="state1"
|
|
200
|
-
:fetch-suggestions="querySearch"
|
|
201
|
-
placeholder="Please Input"
|
|
202
|
-
@select="handleSelect"
|
|
203
|
-
></el-autocomplete>
|
|
201
|
+
<el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="Please Input" @select="handleSelect">
|
|
202
|
+
</el-autocomplete>
|
|
204
203
|
<el-autocomplete
|
|
205
204
|
class="inline-input"
|
|
206
205
|
v-model="state2"
|
|
@@ -208,7 +207,8 @@
|
|
|
208
207
|
placeholder="Please Input"
|
|
209
208
|
:trigger-on-focus="false"
|
|
210
209
|
@select="handleSelect"
|
|
211
|
-
|
|
210
|
+
>
|
|
211
|
+
</el-autocomplete>
|
|
212
212
|
</div>
|
|
213
213
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
214
214
|
<p class="text-xs">
|