@timus-networks/theme 1.0.35 → 1.0.37
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.
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
3
|
<h1>Popover</h1>
|
|
4
4
|
<section>
|
|
5
|
-
<h2>
|
|
5
|
+
<h2>Dropdown</h2>
|
|
6
6
|
<p class="p-md-c my-6">Hover on the dropdown menu to unfold it for more actions.</p>
|
|
7
7
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
8
8
|
<el-dropdown trigger="click">
|
|
@@ -39,14 +39,33 @@
|
|
|
39
39
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
40
40
|
<p class="text-xs">
|
|
41
41
|
<code>
|
|
42
|
-
<el-
|
|
43
|
-
|
|
42
|
+
<el-dropdown trigger="click"> <span> Dropdown List </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item
|
|
43
|
+
/> </el-dropdown-menu> </el-popover>
|
|
44
44
|
</code>
|
|
45
45
|
</p>
|
|
46
46
|
</div>
|
|
47
47
|
</section>
|
|
48
48
|
|
|
49
|
-
<
|
|
49
|
+
<section>
|
|
50
|
+
<h2>Popover with Table</h2>
|
|
51
|
+
<p class="p-md-c my-6">Displays tables with popover content</p>
|
|
52
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
53
|
+
<el-popover placement="right" width="400" trigger="click">
|
|
54
|
+
<el-table :data="gridData">
|
|
55
|
+
<el-table-column width="150" property="date" label="date"></el-table-column>
|
|
56
|
+
<el-table-column width="100" property="name" label="name"></el-table-column>
|
|
57
|
+
<el-table-column width="300" property="address" label="address"></el-table-column>
|
|
58
|
+
</el-table>
|
|
59
|
+
<el-button slot="reference" type="primary" size="small">Click to activate</el-button>
|
|
60
|
+
</el-popover>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
63
|
+
<p class="text-xs">
|
|
64
|
+
<code> <el-popover placement="right" width="400" trigger="click"> <el-table /> </el-popover> </code>
|
|
65
|
+
</p>
|
|
66
|
+
</div>
|
|
67
|
+
</section>
|
|
68
|
+
|
|
50
69
|
<section>
|
|
51
70
|
<h2>Temel Kullanım</h2>
|
|
52
71
|
<p class="p-md-c my-6">
|
|
@@ -333,6 +352,28 @@ export default Vue.extend({
|
|
|
333
352
|
name: 'TimusButtonSample',
|
|
334
353
|
data() {
|
|
335
354
|
return {
|
|
355
|
+
gridData: [
|
|
356
|
+
{
|
|
357
|
+
date: '2016-05-02',
|
|
358
|
+
name: 'Jack',
|
|
359
|
+
address: 'New York City',
|
|
360
|
+
},
|
|
361
|
+
{
|
|
362
|
+
date: '2016-05-04',
|
|
363
|
+
name: 'Jack',
|
|
364
|
+
address: 'New York City',
|
|
365
|
+
},
|
|
366
|
+
{
|
|
367
|
+
date: '2016-05-01',
|
|
368
|
+
name: 'Jack',
|
|
369
|
+
address: 'New York City',
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
date: '2016-05-03',
|
|
373
|
+
name: 'Jack',
|
|
374
|
+
address: 'New York City',
|
|
375
|
+
},
|
|
376
|
+
],
|
|
336
377
|
value: '',
|
|
337
378
|
value1: new Date(2016, 9, 10, 18, 40),
|
|
338
379
|
value2: new Date(2016, 9, 10, 18, 40),
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<el-tab-pane label="Checkbox" name="fourth"><ThemeCheckbox></ThemeCheckbox></el-tab-pane>
|
|
8
8
|
<el-tab-pane label="Radio" name="five"><ThemeRadio></ThemeRadio></el-tab-pane>
|
|
9
9
|
<el-tab-pane label="Number" name="six"><ThemeInputNumbers></ThemeInputNumbers></el-tab-pane>
|
|
10
|
-
<el-tab-pane label="
|
|
10
|
+
<el-tab-pane label="Popover & Dropdown" name="seven"><ThemePopover></ThemePopover></el-tab-pane>
|
|
11
11
|
<el-tab-pane label="Select" name="eight"><ThemeSelect></ThemeSelect></el-tab-pane>
|
|
12
12
|
<el-tab-pane label="Form" name="nine"><ThemeForm></ThemeForm></el-tab-pane>
|
|
13
13
|
<el-tab-pane label="Link" name="ten"><ThemeLink></ThemeLink></el-tab-pane>
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
<script>
|
|
29
29
|
import ThemeInputNumbers from './ThemeInputNumbers.vue';
|
|
30
30
|
import ThemeInputs from './ThemeInputs.vue';
|
|
31
|
+
import ThemePopover from './ThemePopover.vue';
|
|
31
32
|
|
|
32
33
|
export default {
|
|
33
34
|
data() {
|
|
@@ -40,6 +41,6 @@ export default {
|
|
|
40
41
|
console.log(tab, event);
|
|
41
42
|
},
|
|
42
43
|
},
|
|
43
|
-
components: { ThemeInputs, ThemeInputNumbers },
|
|
44
|
+
components: { ThemeInputs, ThemeInputNumbers, ThemePopover },
|
|
44
45
|
};
|
|
45
46
|
</script>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
3
|
<h1>Popover</h1>
|
|
4
4
|
<section>
|
|
5
|
-
<h2>
|
|
5
|
+
<h2>Dropdown</h2>
|
|
6
6
|
<p class="p-md-c my-6">Hover on the dropdown menu to unfold it for more actions.</p>
|
|
7
7
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
8
8
|
<el-dropdown trigger="click">
|
|
@@ -39,14 +39,33 @@
|
|
|
39
39
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
40
40
|
<p class="text-xs">
|
|
41
41
|
<code>
|
|
42
|
-
<el-
|
|
43
|
-
|
|
42
|
+
<el-dropdown trigger="click"> <span> Dropdown List </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item
|
|
43
|
+
/> </el-dropdown-menu> </el-popover>
|
|
44
44
|
</code>
|
|
45
45
|
</p>
|
|
46
46
|
</div>
|
|
47
47
|
</section>
|
|
48
48
|
|
|
49
|
-
<
|
|
49
|
+
<section>
|
|
50
|
+
<h2>Popover with Table</h2>
|
|
51
|
+
<p class="p-md-c my-6">Displays tables with popover content</p>
|
|
52
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
53
|
+
<el-popover placement="right" width="400" trigger="click">
|
|
54
|
+
<el-table :data="gridData">
|
|
55
|
+
<el-table-column width="150" property="date" label="date"></el-table-column>
|
|
56
|
+
<el-table-column width="100" property="name" label="name"></el-table-column>
|
|
57
|
+
<el-table-column width="300" property="address" label="address"></el-table-column>
|
|
58
|
+
</el-table>
|
|
59
|
+
<el-button slot="reference" type="primary" size="small">Click to activate</el-button>
|
|
60
|
+
</el-popover>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
63
|
+
<p class="text-xs">
|
|
64
|
+
<code> <el-popover placement="right" width="400" trigger="click"> <el-table /> </el-popover> </code>
|
|
65
|
+
</p>
|
|
66
|
+
</div>
|
|
67
|
+
</section>
|
|
68
|
+
|
|
50
69
|
<section>
|
|
51
70
|
<h2>Temel Kullanım</h2>
|
|
52
71
|
<p class="p-md-c my-6">
|
|
@@ -333,6 +352,28 @@ export default Vue.extend({
|
|
|
333
352
|
name: 'TimusButtonSample',
|
|
334
353
|
data() {
|
|
335
354
|
return {
|
|
355
|
+
gridData: [
|
|
356
|
+
{
|
|
357
|
+
date: '2016-05-02',
|
|
358
|
+
name: 'Jack',
|
|
359
|
+
address: 'New York City',
|
|
360
|
+
},
|
|
361
|
+
{
|
|
362
|
+
date: '2016-05-04',
|
|
363
|
+
name: 'Jack',
|
|
364
|
+
address: 'New York City',
|
|
365
|
+
},
|
|
366
|
+
{
|
|
367
|
+
date: '2016-05-01',
|
|
368
|
+
name: 'Jack',
|
|
369
|
+
address: 'New York City',
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
date: '2016-05-03',
|
|
373
|
+
name: 'Jack',
|
|
374
|
+
address: 'New York City',
|
|
375
|
+
},
|
|
376
|
+
],
|
|
336
377
|
value: '',
|
|
337
378
|
value1: new Date(2016, 9, 10, 18, 40),
|
|
338
379
|
value2: new Date(2016, 9, 10, 18, 40),
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<el-tab-pane label="Checkbox" name="fourth"><ThemeCheckbox></ThemeCheckbox></el-tab-pane>
|
|
8
8
|
<el-tab-pane label="Radio" name="five"><ThemeRadio></ThemeRadio></el-tab-pane>
|
|
9
9
|
<el-tab-pane label="Number" name="six"><ThemeInputNumbers></ThemeInputNumbers></el-tab-pane>
|
|
10
|
-
<el-tab-pane label="
|
|
10
|
+
<el-tab-pane label="Popover & Dropdown" name="seven"><ThemePopover></ThemePopover></el-tab-pane>
|
|
11
11
|
<el-tab-pane label="Select" name="eight"><ThemeSelect></ThemeSelect></el-tab-pane>
|
|
12
12
|
<el-tab-pane label="Form" name="nine"><ThemeForm></ThemeForm></el-tab-pane>
|
|
13
13
|
<el-tab-pane label="Link" name="ten"><ThemeLink></ThemeLink></el-tab-pane>
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
<script>
|
|
29
29
|
import ThemeInputNumbers from './ThemeInputNumbers.vue';
|
|
30
30
|
import ThemeInputs from './ThemeInputs.vue';
|
|
31
|
+
import ThemePopover from './ThemePopover.vue';
|
|
31
32
|
|
|
32
33
|
export default {
|
|
33
34
|
data() {
|
|
@@ -40,6 +41,6 @@ export default {
|
|
|
40
41
|
console.log(tab, event);
|
|
41
42
|
},
|
|
42
43
|
},
|
|
43
|
-
components: { ThemeInputs, ThemeInputNumbers },
|
|
44
|
+
components: { ThemeInputs, ThemeInputNumbers, ThemePopover },
|
|
44
45
|
};
|
|
45
46
|
</script>
|