Repository navigation
Expand file tree
/
Copy pathtemplate.html
More file actions
136 lines (131 loc) · 4.28 KB
/
Copy pathtemplate.html
File metadata and controls
136 lines (131 loc) · 4.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<div class="control-section">
<div class="menu-control">
<ul id="menu"></ul>
</div>
<!-- Template to render Menu -->
<script id="menuTemplate" type="text/x-template">
${if(category)}
${category}
${else if (value)}
<div style="width:100%;display:flex;justify-content: space-between;">
${if(url)}
<img class="e-avatar e-avatar-small" src="./src/menu/images/${url}.png" />
${/if}
<span style="width:100%;">${value}</span>
${if(count)}
<span class="e-badge e-badge-success">${count}</span>
${/if}
</div>
${else}
<div tabindex="0" class="e-card">
<div class="e-card-header">
<div class="e-card-header-caption">
<div class="e-card-header-title">About Us</div>
</div>
</div>
<div class="e-card-content">
${about.value}
</div>
<div class="e-card-actions">
<button class="e-btn e-outline" style="pointer-events: auto;">
Read More
</button>
</div>
</div>
${/if}
</script>
</div>
<div id="action-description">
<p>
This sample demonstrates the template functionalities of the <code>menu</code> component. Interact with <code>menu</code>
using hover / click to display sub menu pop-up items with its customized templates.
</p>
</div>
<div id="description">
<p>
The menu component has an option to customize menu items using the <code>template</code> property, so that the
menu items can be rendered according to the requirement.
</p>
<p>
In this demo, the below customization are demonstrated.
<ul>
<li>Header menu items and the 'Products' sub menu items represents the customization of default rendering
of li elements i.e. <b>${category}</b> in template.</li>
<li>'Services' sub menu item represent the customization of li element with <code>badge</code> component.</li>
<li>'About Us' sub menu item showed with <code>card</code> component in a single li.</li>
</ul>
</p>
<p>
For more information, refer to the
<a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/menu/data-source-binding-and-custom-menu-items/#custom-menu-items">
templates</a> section in the documentation.
</p>
</div>
<!-- custom code start -->
<style>
.menu-control {
margin-top: 45px;
text-align: center;
}
</style>
<!-- custom code end -->
<style>
/**
* ej2 Menu template styles
*/
/* Common ul & li styles */
.e-bigger .e-menu-wrapper ul.e-ul,
.e-menu-wrapper ul.e-ul {
padding: 0;
}
.e-bigger .e-menu-wrapper ul.e-ul .e-menu-item,
.e-menu-wrapper ul.e-ul .e-menu-item {
display: flex;
padding: 0 10px;
outline-color: transparent;
}
/** Avatar customization */
.e-menu-wrapper ul .e-menu-item .e-avatar {
background-color: inherit;
font-size: 8px;
margin-right: 8px;
align-self: center;
width: auto;
overflow: visible;
}
.e-bigger .e-menu-wrapper ul .e-menu-item .e-avatar {
font-size: 10px;
}
/** Badge customization */
.e-menu-wrapper ul .e-menu-item .e-badge {
margin-left: 10px;
align-self: center;
overflow: visible;
}
/** Card customization */
.e-menu-wrapper ul.e-ul .e-menu-item .e-card {
width: 290px;
font-size: inherit;
background-color: inherit;
border-color: transparent;
}
.e-bigger .e-menu-wrapper ul.e-ul .e-menu-item .e-card {
width: 320px;
}
.e-menu-wrapper ul.e-ul .e-menu-item .e-card .e-card-content {
white-space: normal;
color: inherit;
padding-top: 0;
text-align: justify;
font-size: inherit;
}
.e-menu-wrapper ul.e-ul .e-menu-item#about {
height: auto;
padding: 0;
}
.e-menu-wrapper ul.e-ul .e-menu-item#about.e-focused {
background-color: transparent;
outline-color: transparent;
pointer-events: none;
}
</style>