Skip to content

Commit e2231bd

Browse files
Integrated latest changes at 12-18-2024 7:03:51 PM
1 parent 2090003 commit e2231bd

File tree

29 files changed

+287
-53
lines changed

29 files changed

+287
-53
lines changed

ej2-vue-toc.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1085,7 +1085,7 @@
10851085
<li><a href="/ej2-vue/drop-down-button/popup-items">Popup Items</a></li>
10861086
<li><a href="/ej2-vue/drop-down-button/accessibility">Accessibility</a></li>
10871087
<li><a href="/ej2-vue/drop-down-button/style-and-appearance">Styles and Appearances</a></li>
1088-
<li><a href="/ej2-vue/drop-down-button/item-template">Item template</a></li>
1088+
<li><a href="/ej2-vue/drop-down-button/item-template">Item Template</a></li>
10891089
<li><a href="/ej2-vue/drop-down-button/animation">Animation</a></li>
10901090
<li>How To
10911091
<ul>
@@ -1815,7 +1815,7 @@
18151815
<li><a href="/ej2-vue/menu/how-to/set-title">Set title for Menu items</a></li>
18161816
<li><a href="/ej2-vue/menu/how-to/rounded-corner">Menu with rounded corner</a></li>
18171817
<li><a href="/ej2-vue/menu/how-to/menu-item-click">Open menu and sub menu on click only</a></li>
1818-
<li><a href="/ej2-vue/menu/how-to/custom-attributes-menu-items">Set custom attributes for Menu items</a></li>
1818+
<li><a href="/ej2-vue/menu/how-to/custom-attributes-menu-items">Customize HTML attributes for Menu items</a></li>
18191819
</ul>
18201820
</li>
18211821
</ul>
@@ -3126,7 +3126,7 @@
31263126
</ul>
31273127
</li> <li>Release Notes
31283128
<ul>
3129-
<li>2024 Volume 4 - 28.*<ul><li><a href="/ej2-vue/release-notes/28.1.33">28.1.33 Main Release</a></li></ul></li><li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/27.2.5">27.2.5</a></li><li><a href="/ej2-vue/release-notes/27.2.4">27.2.4</a></li><li><a href="/ej2-vue/release-notes/27.2.3">27.2.3</a></li><li><a href="/ej2-vue/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-vue/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-vue/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-vue/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-vue/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-vue/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-vue/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-vue/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-vue/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-vue/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-vue/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-vue/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-vue/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-vue/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-vue/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-vue/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-vue/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-vue/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-vue/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-vue/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-vue/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-vue/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-vue/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-vue/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-vue/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-vue/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-vue/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-vue/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-vue/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-vue/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-vue/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-vue/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-vue/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
3129+
<li>2024 Volume 4 - 28.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/28.1.35">28.1.35</a></li></ul></li><li><a href="/ej2-vue/release-notes/28.1.33">28.1.33 Main Release</a></li></ul></li><li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/27.2.5">27.2.5</a></li><li><a href="/ej2-vue/release-notes/27.2.4">27.2.4</a></li><li><a href="/ej2-vue/release-notes/27.2.3">27.2.3</a></li><li><a href="/ej2-vue/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-vue/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-vue/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-vue/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-vue/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-vue/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-vue/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-vue/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-vue/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-vue/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-vue/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-vue/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-vue/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-vue/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-vue/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-vue/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-vue/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-vue/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-vue/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-vue/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-vue/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-vue/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-vue/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-vue/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-vue/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-vue/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-vue/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-vue/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-vue/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-vue/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-vue/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-vue/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-vue/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
31303130
<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-vue/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-vue/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-vue/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-vue/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-vue/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-vue/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-vue/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-vue/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-vue/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-vue/release-notes/24.1.43">24.1.43</a></li></ul></li><li><a href="/ej2-vue/release-notes/24.2.3">24.2.3 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
31313131
<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-vue/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-vue/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-vue/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-vue/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-vue/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-vue/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-vue/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-vue/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-vue/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-vue/release-notes/23.1.38">23.1.38</a></li></ul></li><li><a href="/ej2-vue/release-notes/23.2.4">23.2.4 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/23.1.36">23.1.36 Main Release</a></li></ul></li>
31323132
<li>2023 Volume 2 - 22.*

ej2-vue/Release-notes/28.1.35.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Essential Studio for Vue Weekly Release Release Notes
3+
description: Essential Studio for Vue Weekly Release Release Notes
4+
platform: ej2-vue
5+
documentation: ug
6+
---
7+
8+
# Essential Studio for Vue Release Notes
9+
10+
{% include release-info.html date="December 19, 2024" version="v28.1.35" %}
11+
12+
{% directory path: _includes/release-notes/v28.1.35 %}
13+
14+
{% include {{file.url}} %}
15+
16+
{% enddirectory %}

ej2-vue/chips/customization.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,4 +108,19 @@ Outline chip has the border with the background transparent. It can be set using
108108
{% endhighlight %}
109109
{% endtabs %}
110110

111-
{% previewsample "page.domainurl/code-snippet/chips/default-cs7" %}
111+
{% previewsample "page.domainurl/code-snippet/chips/default-cs7" %}
112+
113+
## Template
114+
115+
The [`template`](https://helpej2.syncfusion.com/vue/documentation/api/chips/#template) property of the Chips component allows users to fully customize the layout and design of each chip. By using the `template` property, users can include custom HTML elements, such as links, icons, or additional content.
116+
117+
{% tabs %}
118+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
119+
{% include code-snippet/chips/default-cs14/app-composition.vue %}
120+
{% endhighlight %}
121+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
122+
{% include code-snippet/chips/default-cs14/app.vue %}
123+
{% endhighlight %}
124+
{% endtabs %}
125+
126+
{% previewsample "page.domainurl/code-snippet/chips/default-cs14" %}
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<ejs-chiplist id="chip">
3+
<e-chips>
4+
<e-chip leadingIconCss="trendingIcon"
5+
template='<a href="https://timesofindia.indiatimes.com/news" target="_blank" class="anchorElement">#BreakingNews</a><span class="textElement">125k posts</span>'></e-chip>
6+
<e-chip leadingIconCss="cameraIcon"
7+
template='<a href="https://blog.google/products/photos/" target="_blank" class="anchorElement">#PhotoOfTheDay</a>'></e-chip>
8+
<e-chip leadingIconCss="trendingIcon"
9+
template='<a href="https://indianexpress.com/section/technology/" target="_blank" class="anchorElement">#TechNews</a><span class="textElement">107k posts</span>'></e-chip>
10+
</e-chips>
11+
</ejs-chiplist>
12+
</template>
13+
14+
<script setup>
15+
import { ChipListComponent as EjsChiplist, ChipsDirective as EChips, ChipDirective as EChip } from '@syncfusion/ej2-vue-buttons';
16+
</script>
17+
18+
<style>
19+
#chip .e-chip .trendingIcon {
20+
margin: 4px 0 4px 6px;
21+
width: 16px;
22+
height: 16px;
23+
background-image: url('data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCI+PHBhdGggZD0ibTMyIDEyIDQuNTkgNC41OS05Ljc2IDkuNzUtOC04TDQgMzMuMTcgNi44MyAzNmwxMi0xMiA4IDggMTIuNTgtMTIuNTlMNDQgMjRWMTJ6Ii8+PHBhdGggZD0iTTAgMGg0OHY0OEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==');
24+
}
25+
26+
#chip .e-chip .cameraIcon {
27+
margin: 4px 0 4px 6px;
28+
width: 16px;
29+
height: 16px;
30+
background-image: url('data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5LDYuNUgxNy43MmwtLjMyLTFhMywzLDAsMCwwLTIuODQtMkg5LjQ0QTMsMywwLDAsMCw2LjYsNS41NWwtLjMyLDFINWEzLDMsMCwwLDAtMywzdjhhMywzLDAsMCwwLDMsM0gxOWEzLDMsMCwwLDAsMy0zdi04QTMsMywwLDAsMCwxOSw2LjVabTEsMTFhMSwxLDAsMCwxLTEsMUg1YTEsMSwwLDAsMS0xLTF2LThhMSwxLDAsMCwxLDEtMUg3YTEsMSwwLDAsMCwxLS42OGwuNTQtMS42NGExLDEsMCwwLDEsLjk1LS42OGg1LjEyYTEsMSwwLDAsMSwuOTUuNjhsLjU0LDEuNjRBMSwxLDAsMCwwLDE3LDguNWgyYTEsMSwwLDAsMSwxLDFabS04LTlhNCw0LDAsMSwwLDQsNEE0LDQsMCwwLDAsMTIsOC41Wm0wLDZhMiwyLDAsMSwxLDItMkEyLDIsMCwwLDEsMTIsMTQuNVoiLz48L3N2Zz4=');
31+
}
32+
33+
#chip .e-chip .anchorElement {
34+
margin: 0 4px;
35+
font-weight: 600;
36+
height: 16px;
37+
line-height: 16px;
38+
font-size: 12px;
39+
color: #0f6cbd;
40+
text-decoration: none;
41+
}
42+
43+
#chip .e-chip .textElement {
44+
font-weight: 400;
45+
height: 14px;
46+
line-height: 14px;
47+
font-size: 10px;
48+
margin-right: 6px;
49+
}
50+
</style>
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<template>
2+
<ejs-chiplist id="chip">
3+
<e-chips>
4+
<e-chip leadingIconCss="trendingIcon"
5+
template='<a href="https://timesofindia.indiatimes.com/news" target="_blank" class="anchorElement">#BreakingNews</a><span class="textElement">125k posts</span>'></e-chip>
6+
<e-chip leadingIconCss="cameraIcon"
7+
template='<a href="https://blog.google/products/photos/" target="_blank" class="anchorElement">#PhotoOfTheDay</a>'></e-chip>
8+
<e-chip leadingIconCss="trendingIcon"
9+
template='<a href="https://indianexpress.com/section/technology/" target="_blank" class="anchorElement">#TechNews</a><span class="textElement">107k posts</span>'></e-chip>
10+
</e-chips>
11+
</ejs-chiplist>
12+
</template>
13+
14+
<script>
15+
16+
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-vue-buttons';
17+
18+
export default {
19+
name: "App",
20+
components: {
21+
"ejs-chiplist":ChipListComponent,
22+
"e-chips":ChipsDirective,
23+
"e-chip":ChipDirective
24+
}
25+
}
26+
</script>
27+
28+
<style>
29+
#chip .e-chip .trendingIcon {
30+
margin: 4px 0 4px 6px;
31+
width: 16px;
32+
height: 16px;
33+
background-image: url('data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCI+PHBhdGggZD0ibTMyIDEyIDQuNTkgNC41OS05Ljc2IDkuNzUtOC04TDQgMzMuMTcgNi44MyAzNmwxMi0xMiA4IDggMTIuNTgtMTIuNTlMNDQgMjRWMTJ6Ii8+PHBhdGggZD0iTTAgMGg0OHY0OEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==');
34+
}
35+
36+
#chip .e-chip .cameraIcon {
37+
margin: 4px 0 4px 6px;
38+
width: 16px;
39+
height: 16px;
40+
background-image: url('data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5LDYuNUgxNy43MmwtLjMyLTFhMywzLDAsMCwwLTIuODQtMkg5LjQ0QTMsMywwLDAsMCw2LjYsNS41NWwtLjMyLDFINWEzLDMsMCwwLDAtMywzdjhhMywzLDAsMCwwLDMsM0gxOWEzLDMsMCwwLDAsMy0zdi04QTMsMywwLDAsMCwxOSw2LjVabTEsMTFhMSwxLDAsMCwxLTEsMUg1YTEsMSwwLDAsMS0xLTF2LThhMSwxLDAsMCwxLDEtMUg3YTEsMSwwLDAsMCwxLS42OGwuNTQtMS42NGExLDEsMCwwLDEsLjk1LS42OGg1LjEyYTEsMSwwLDAsMSwuOTUuNjhsLjU0LDEuNjRBMSwxLDAsMCwwLDE3LDguNWgyYTEsMSwwLDAsMSwxLDFabS04LTlhNCw0LDAsMSwwLDQsNEE0LDQsMCwwLDAsMTIsOC41Wm0wLDZhMiwyLDAsMSwxLDItMkEyLDIsMCwwLDEsMTIsMTQuNVoiLz48L3N2Zz4=');
41+
}
42+
43+
#chip .e-chip .anchorElement {
44+
margin: 0 4px;
45+
font-weight: 600;
46+
height: 16px;
47+
line-height: 16px;
48+
font-size: 12px;
49+
color: #0f6cbd;
50+
text-decoration: none;
51+
}
52+
53+
#chip .e-chip .textElement {
54+
font-weight: 400;
55+
height: 14px;
56+
line-height: 14px;
57+
font-size: 10px;
58+
margin-right: 6px;
59+
}
60+
</style>
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
#chip .e-chip .trendingIcon {
2+
margin: 4px 0 4px 6px;
3+
width: 16px;
4+
height: 16px;
5+
background-image: url('data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCI+PHBhdGggZD0ibTMyIDEyIDQuNTkgNC41OS05Ljc2IDkuNzUtOC04TDQgMzMuMTcgNi44MyAzNmwxMi0xMiA4IDggMTIuNTgtMTIuNTlMNDQgMjRWMTJ6Ii8+PHBhdGggZD0iTTAgMGg0OHY0OEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==');
6+
}
7+
8+
#chip .e-chip .cameraIcon {
9+
margin: 4px 0 4px 6px;
10+
width: 16px;
11+
height: 16px;
12+
background-image: url('data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5LDYuNUgxNy43MmwtLjMyLTFhMywzLDAsMCwwLTIuODQtMkg5LjQ0QTMsMywwLDAsMCw2LjYsNS41NWwtLjMyLDFINWEzLDMsMCwwLDAtMywzdjhhMywzLDAsMCwwLDMsM0gxOWEzLDMsMCwwLDAsMy0zdi04QTMsMywwLDAsMCwxOSw2LjVabTEsMTFhMSwxLDAsMCwxLTEsMUg1YTEsMSwwLDAsMS0xLTF2LThhMSwxLDAsMCwxLDEtMUg3YTEsMSwwLDAsMCwxLS42OGwuNTQtMS42NGExLDEsMCwwLDEsLjk1LS42OGg1LjEyYTEsMSwwLDAsMSwuOTUuNjhsLjU0LDEuNjRBMSwxLDAsMCwwLDE3LDguNWgyYTEsMSwwLDAsMSwxLDFabS04LTlhNCw0LDAsMSwwLDQsNEE0LDQsMCwwLDAsMTIsOC41Wm0wLDZhMiwyLDAsMSwxLDItMkEyLDIsMCwwLDEsMTIsMTQuNVoiLz48L3N2Zz4=');
13+
}
14+
15+
#chip .e-chip .anchorElement {
16+
margin: 0 4px;
17+
font-weight: 600;
18+
height: 16px;
19+
line-height: 16px;
20+
font-size: 12px;
21+
color: #0f6cbd;
22+
text-decoration: none;
23+
}
24+
25+
#chip .e-chip .textElement {
26+
font-weight: 400;
27+
height: 14px;
28+
line-height: 14px;
29+
font-size: 10px;
30+
margin-right: 6px;
31+
}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
7+
<title>EJ2 Vue Sample</title>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<meta name="description" content="Typescript UI Controls" />
11+
<meta name="author" content="Syncfusion" />
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
14+
<link href="index.css" rel="stylesheet" />
15+
<script src="systemjs.config.js"></script>
16+
</head>
17+
18+
<body>
19+
<div id='app'>Loading....</div>
20+
</body>
21+
22+
</html>
23+
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
import Vue from 'vue';
3+
import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';
4+
5+
Vue.use(ChipListPlugin);
6+
7+
8+
new Vue({
9+
el: '#app',
10+
template: `
11+
<ejs-chiplist id="chip">
12+
<e-chips>
13+
<e-chip leadingIconCss="trendingIcon"
14+
template='<a href="https://timesofindia.indiatimes.com/news" target="_blank" class="anchorElement">#BreakingNews</a><span class="textElement">125k posts</span>'></e-chip>
15+
<e-chip leadingIconCss="cameraIcon"
16+
template='<a href="https://blog.google/products/photos/" target="_blank" class="anchorElement">#PhotoOfTheDay</a>'></e-chip>
17+
<e-chip leadingIconCss="trendingIcon"
18+
template='<a href="https://indianexpress.com/section/technology/" target="_blank" class="anchorElement">#TechNews</a><span class="textElement">107k posts</span>'></e-chip>
19+
</e-chips>
20+
</ejs-chiplist>
21+
`,
22+
23+
24+
25+
});
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
14+
},
15+
map: {
16+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
17+
vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
20+
"@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
21+
"@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
22+
}
23+
});
24+
25+
System.import('index.js');

ej2-vue/code-snippet/spreadsheet/custom-header-cs1/app-composition.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { SpreadsheetComponent as EjsSpreadsheet } from "@syncfusion/ej2-vue-spre
88
const openUrl = "https://services.syncfusion.com/vue/production/api/spreadsheet/open";
99
1010
const beforeOpen = function (args) {
11-
args.requestData["headers"] = {
11+
args.requestData = {
1212
...args.requestData,
1313
headers: { Authorization: "YOUR TEXT" }
1414
};

ej2-vue/code-snippet/spreadsheet/custom-header-cs1/app.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default {
1818
},
1919
methods: {
2020
beforeOpen: function (args) {
21-
args.requestData["headers"] = {
21+
args.requestData = {
2222
...args.requestData,
2323
headers: { Authorization: "YOUR TEXT" },
2424
};

ej2-vue/code-snippet/spreadsheet/custom-header-cs1/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ new Vue({
2222
},
2323
methods: {
2424
beforeOpen: function (args) {
25-
args.requestData["headers"] = {
25+
args.requestData = {
2626
...args.requestData,
2727
headers: { Authorization: "YOUR TEXT" },
2828
};

0 commit comments

Comments
 (0)