@timus-networks/theme 1.0.15 → 1.0.17
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/ThemeForm.vue +40 -0
- package/components-ts/ThemeForm.vue +40 -0
- package/output/main.css +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Checkbox</h1>
|
|
5
|
+
<p class="p-lg my-6">
|
|
6
|
+
Tarih aralığı seçici, kullanıcının bir başlangıç ve bitiş tarihi seçmesine olanak tanır, bu da planlama ve raporlama işlemleri için idealdir.
|
|
7
|
+
</p>
|
|
8
|
+
<el-checkbox-group v-model="checkList" class="mb-6">
|
|
9
|
+
<el-checkbox label="Option A"></el-checkbox>
|
|
10
|
+
<el-checkbox label="Option B"></el-checkbox>
|
|
11
|
+
<el-checkbox label="Option C"></el-checkbox>
|
|
12
|
+
<el-checkbox label="disabled" disabled></el-checkbox>
|
|
13
|
+
<el-checkbox label="selected and disabled" disabled></el-checkbox>
|
|
14
|
+
</el-checkbox-group>
|
|
15
|
+
|
|
16
|
+
<el-checkbox-group v-model="checkboxGroup1">
|
|
17
|
+
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
|
|
18
|
+
</el-checkbox-group>
|
|
19
|
+
|
|
20
|
+
<el-checkbox-group v-model="checkboxGroup1" size="mini" disabled>
|
|
21
|
+
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
|
|
22
|
+
</el-checkbox-group>
|
|
23
|
+
|
|
24
|
+
<el-checkbox-group v-model="checkboxGroup1" size="small">
|
|
25
|
+
<el-checkbox label="Option1" border></el-checkbox>
|
|
26
|
+
<el-checkbox label="Option2" border disabled></el-checkbox>
|
|
27
|
+
</el-checkbox-group>
|
|
28
|
+
|
|
29
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
30
|
+
<p class="text-xs">
|
|
31
|
+
<code
|
|
32
|
+
><el-date-picker v-model="input" type="daterange" align="left" start-placeholder="Start" end-placeholder="End"
|
|
33
|
+
default-value=""></el-date-picker></code
|
|
34
|
+
>
|
|
35
|
+
</p>
|
|
36
|
+
</div>
|
|
37
|
+
</section>
|
|
38
|
+
|
|
3
39
|
<el-time-select
|
|
4
40
|
v-model="time"
|
|
5
41
|
:picker-options="{
|
|
@@ -115,9 +151,13 @@
|
|
|
115
151
|
</div>
|
|
116
152
|
</template>
|
|
117
153
|
<script>import Vue from 'vue';
|
|
154
|
+
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
|
118
155
|
export default Vue.extend({
|
|
119
156
|
data() {
|
|
120
157
|
return {
|
|
158
|
+
checkboxGroup1: ['Shanghai'],
|
|
159
|
+
cities: cityOptions,
|
|
160
|
+
checkList: ['selected and disabled', 'Option A'],
|
|
121
161
|
time: '',
|
|
122
162
|
sizeForm: {
|
|
123
163
|
name: '',
|
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Checkbox</h1>
|
|
5
|
+
<p class="p-lg my-6">
|
|
6
|
+
Tarih aralığı seçici, kullanıcının bir başlangıç ve bitiş tarihi seçmesine olanak tanır, bu da planlama ve raporlama işlemleri için idealdir.
|
|
7
|
+
</p>
|
|
8
|
+
<el-checkbox-group v-model="checkList" class="mb-6">
|
|
9
|
+
<el-checkbox label="Option A"></el-checkbox>
|
|
10
|
+
<el-checkbox label="Option B"></el-checkbox>
|
|
11
|
+
<el-checkbox label="Option C"></el-checkbox>
|
|
12
|
+
<el-checkbox label="disabled" disabled></el-checkbox>
|
|
13
|
+
<el-checkbox label="selected and disabled" disabled></el-checkbox>
|
|
14
|
+
</el-checkbox-group>
|
|
15
|
+
|
|
16
|
+
<el-checkbox-group v-model="checkboxGroup1">
|
|
17
|
+
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
|
|
18
|
+
</el-checkbox-group>
|
|
19
|
+
|
|
20
|
+
<el-checkbox-group v-model="checkboxGroup1" size="mini" disabled>
|
|
21
|
+
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
|
|
22
|
+
</el-checkbox-group>
|
|
23
|
+
|
|
24
|
+
<el-checkbox-group v-model="checkboxGroup1" size="small">
|
|
25
|
+
<el-checkbox label="Option1" border></el-checkbox>
|
|
26
|
+
<el-checkbox label="Option2" border disabled></el-checkbox>
|
|
27
|
+
</el-checkbox-group>
|
|
28
|
+
|
|
29
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
30
|
+
<p class="text-xs">
|
|
31
|
+
<code
|
|
32
|
+
><el-date-picker v-model="input" type="daterange" align="left" start-placeholder="Start" end-placeholder="End"
|
|
33
|
+
default-value=""></el-date-picker></code
|
|
34
|
+
>
|
|
35
|
+
</p>
|
|
36
|
+
</div>
|
|
37
|
+
</section>
|
|
38
|
+
|
|
3
39
|
<el-time-select
|
|
4
40
|
v-model="time"
|
|
5
41
|
:picker-options="{
|
|
@@ -116,10 +152,14 @@
|
|
|
116
152
|
</template>
|
|
117
153
|
<script lang="ts">
|
|
118
154
|
import Vue from 'vue';
|
|
155
|
+
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
|
119
156
|
|
|
120
157
|
export default Vue.extend({
|
|
121
158
|
data() {
|
|
122
159
|
return {
|
|
160
|
+
checkboxGroup1: ['Shanghai'],
|
|
161
|
+
cities: cityOptions,
|
|
162
|
+
checkList: ['selected and disabled', 'Option A'],
|
|
123
163
|
time: '',
|
|
124
164
|
sizeForm: {
|
|
125
165
|
name: '',
|