Skip to content

Commit 8ab9e63

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-23-2024 4:30:07 AM
1 parent 2d9309e commit 8ab9e63

File tree

346 files changed

+30314
-34582
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

346 files changed

+30314
-34582
lines changed

‎ej2-vue/accordion/how-to/set-the-nested-accordion.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
1010

1111
# Set the nested accordion in Vue Accordion component
1212

13-
Accordion supports to render `nested` level of Accordion by using content property. You can give nested Accordion content inside the parent Accordion content property by using `id` of nested element. The nested Accordion can be rendered with the use of provided events, such as `clicked` and `expanding`.
13+
Accordion supports to render `nested` level of Accordion by using content property. You can give nested Accordion content inside the parent Accordion content property by using [`v-slot`](https://ej2.syncfusion.com/vue/documentation/common/template#slot-template) template. In the Vue component, the v-slot directive is used to define a slot template in the component’s template where users can insert custom content.
1414

1515
{% tabs %}
1616
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

‎ej2-vue/code-snippet/accordion/how-to/nestedaccordion-cs1/app-composition.vue

Lines changed: 37 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,49 @@
11
<template>
22
<div id="app">
3-
<ejs-accordion ref="Accordion_Nested" :expanding="expanding">
3+
<ejs-accordion>
44
<e-accordionitems>
5-
<e-accordionitem expanded='true' header='Video' content='<div id="nested_video"></div>'>
6-
</e-accordionitem>
7-
<e-accordionitem header='Music' content='<div id="nested_music"></div>'></e-accordionitem>
8-
<e-accordionitem header='Images' content='<div id="nested_images"></div>'></e-accordionitem>
5+
<e-accordionitem expanded='true' header='Video' :content="'NestedVideo'"></e-accordionitem>
6+
<template v-slot:NestedVideo>
7+
<ejs-accordion>
8+
<e-accordionitems>
9+
<e-accordionitem header='Video Track1' ></e-accordionitem>
10+
<e-accordionitem header='Video Track2' ></e-accordionitem>
11+
</e-accordionitems>
12+
</ejs-accordion>
13+
</template>
14+
<e-accordionitem header='Music' :content="'NestedMusic'"></e-accordionitem>
15+
<template v-slot:NestedMusic>
16+
<ejs-accordion>
17+
<e-accordionitems>
18+
<e-accordionitem header='Music Track1' ></e-accordionitem>
19+
<e-accordionitem header='Music Track2' ></e-accordionitem>
20+
<e-accordionitem header='Music New' :content="'NestedMusicNew'"></e-accordionitem>
21+
<template v-slot:NestedMusicNew>
22+
<ejs-accordion>
23+
<e-accordionitems>
24+
<e-accordionitem header='New Track1' ></e-accordionitem>
25+
<e-accordionitem header='New Track2' ></e-accordionitem>
26+
</e-accordionitems>
27+
</ejs-accordion>
28+
</template>
29+
</e-accordionitems>
30+
</ejs-accordion>
31+
</template>
32+
<e-accordionitem header='Images' :content="'NestedImages'"></e-accordionitem>
33+
<template v-slot:NestedImages>
34+
<ejs-accordion>
35+
<e-accordionitems>
36+
<e-accordionitem header='Image Track1' ></e-accordionitem>
37+
<e-accordionitem header='Image Track2' ></e-accordionitem>
38+
</e-accordionitems>
39+
</ejs-accordion>
40+
</template>
941
</e-accordionitems>
1042
</ejs-accordion>
1143
</div>
1244
</template>
1345
<script setup>
14-
import { ref } from 'vue';
1546
import { AccordionComponent as EjsAccordion, AccordionItemDirective as EAccordionitem, AccordionItemsDirective as EAccordionitems } from "@syncfusion/ej2-vue-navigations";
16-
import { Accordion } from '@syncfusion/ej2-vue-navigations';
17-
18-
const Accordion_Nested = ref(null);
19-
const clicked = (e) => {
20-
var ele = e.originalEvent.target;
21-
if (ele.querySelectorAll('.e-accordion').length > 0) {
22-
return;
23-
}
24-
new Accordion({
25-
items: [{
26-
header: 'New Track1'
27-
},
28-
{
29-
header: 'New Track2'
30-
}
31-
]
32-
}, '#nested_musicNew');
33-
};
34-
35-
const expanding = (e) => {
36-
var obj = Accordion_Nested.value.ej2Instances;
37-
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 0) {
38-
if (e.element.querySelectorAll('.e-accordion').length > 0) {
39-
return;
40-
}
41-
new Accordion({
42-
items: [{
43-
header: 'Video Track1'
44-
},
45-
{
46-
header: 'Video Track2'
47-
}
48-
]
49-
}, '#nested_video');
50-
}
51-
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 1) {
52-
if (e.element.querySelectorAll('.e-accordion').length > 0) {
53-
return;
54-
}
55-
new Accordion({
56-
clicked: clicked,
57-
items: [{
58-
header: 'Music Track1'
59-
},
60-
{
61-
header: 'Music Track2'
62-
},
63-
{
64-
header: 'Music New',
65-
content: '<div id="nested_musicNew"></div>'
66-
}
67-
]
68-
}, '#nested_music');
69-
}
70-
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 2) {
71-
if (e.element.querySelectorAll('.e-accordion').length > 0) {
72-
return;
73-
}
74-
new Accordion({
75-
items: [{
76-
header: 'Track1'
77-
},
78-
{
79-
header: 'Track2'
80-
},
81-
]
82-
}, '#nested_images');
83-
}
84-
};
8547
</script>
8648
<style>
8749
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";

‎ej2-vue/code-snippet/accordion/how-to/nestedaccordion-cs1/app.vue

Lines changed: 37 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,50 @@
11
<template>
22
<div id="app">
3-
<ejs-accordion ref="Accordion_Nested" :expanding="expanding">
3+
<ejs-accordion>
44
<e-accordionitems>
5-
<e-accordionitem expanded='true' header='Video' content='<div id="nested_video"></div>'>
6-
</e-accordionitem>
7-
<e-accordionitem header='Music' content='<div id="nested_music"></div>'></e-accordionitem>
8-
<e-accordionitem header='Images' content='<div id="nested_images"></div>'></e-accordionitem>
5+
<e-accordionitem expanded='true' header='Video' :content="'NestedVideo'"></e-accordionitem>
6+
<template v-slot:NestedVideo>
7+
<ejs-accordion>
8+
<e-accordionitems>
9+
<e-accordionitem header='Video Track1' ></e-accordionitem>
10+
<e-accordionitem header='Video Track2' ></e-accordionitem>
11+
</e-accordionitems>
12+
</ejs-accordion>
13+
</template>
14+
<e-accordionitem header='Music' :content="'NestedMusic'"></e-accordionitem>
15+
<template v-slot:NestedMusic>
16+
<ejs-accordion>
17+
<e-accordionitems>
18+
<e-accordionitem header='Music Track1' ></e-accordionitem>
19+
<e-accordionitem header='Music Track2' ></e-accordionitem>
20+
<e-accordionitem header='Music New' :content="'NestedMusicNew'"></e-accordionitem>
21+
<template v-slot:NestedMusicNew>
22+
<ejs-accordion>
23+
<e-accordionitems>
24+
<e-accordionitem header='New Track1' ></e-accordionitem>
25+
<e-accordionitem header='New Track2' ></e-accordionitem>
26+
</e-accordionitems>
27+
</ejs-accordion>
28+
</template>
29+
</e-accordionitems>
30+
</ejs-accordion>
31+
</template>
32+
<e-accordionitem header='Images' :content="'NestedImages'"></e-accordionitem>
33+
<template v-slot:NestedImages>
34+
<ejs-accordion>
35+
<e-accordionitems>
36+
<e-accordionitem header='Image Track1' ></e-accordionitem>
37+
<e-accordionitem header='Image Track2' ></e-accordionitem>
38+
</e-accordionitems>
39+
</ejs-accordion>
40+
</template>
941
</e-accordionitems>
1042
</ejs-accordion>
1143
</div>
1244
</template>
1345
<script>
1446
1547
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from "@syncfusion/ej2-vue-navigations";
16-
import { Accordion } from '@syncfusion/ej2-navigations';
1748
1849
export default {
1950
name: "App",
@@ -22,73 +53,6 @@ export default {
2253
"e-accordionitems": AccordionItemsDirective,
2354
"e-accordionitem": AccordionItemDirective
2455
},
25-
methods: {
26-
clicked: function (e) {
27-
var ele = e.originalEvent.target;
28-
if (ele.querySelectorAll('.e-accordion').length > 0) {
29-
return;
30-
}
31-
new Accordion({
32-
items: [{
33-
header: 'New Track1'
34-
},
35-
{
36-
header: 'New Track2'
37-
}
38-
]
39-
}, '#nested_musicNew');
40-
},
41-
expanding: function (e) {
42-
var obj = this.$refs.Accordion_Nested.ej2Instances
43-
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 0) {
44-
if (e.element.querySelectorAll('.e-accordion').length > 0) {
45-
return;
46-
}
47-
new Accordion({
48-
items: [{
49-
header: 'Video Track1'
50-
},
51-
{
52-
header: 'Video Track2'
53-
}
54-
]
55-
}, '#nested_video');
56-
}
57-
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 1) {
58-
if (e.element.querySelectorAll('.e-accordion').length > 0) {
59-
return;
60-
}
61-
new Accordion({
62-
clicked: this.clicked,
63-
items: [{
64-
header: 'Music Track1'
65-
},
66-
{
67-
header: 'Music Track2'
68-
},
69-
{
70-
header: 'Music New',
71-
content: '<div id="nested_musicNew"></div>'
72-
}
73-
]
74-
}, '#nested_music');
75-
}
76-
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 2) {
77-
if (e.element.querySelectorAll('.e-accordion').length > 0) {
78-
return;
79-
}
80-
new Accordion({
81-
items: [{
82-
header: 'Track1'
83-
},
84-
{
85-
header: 'Track2'
86-
},
87-
]
88-
}, '#nested_images');
89-
}
90-
}
91-
}
9256
}
9357
</script>
9458
<style>

‎ej2-vue/code-snippet/accordion/how-to/nestedaccordion-cs1/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<meta name="description" content="Typescript UI Controls" />
1111
<meta name="author" content="Syncfusion" />
1212
<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" />
13+
<link href="https://cdn.syncfusion.com/ej2/26.1.35/bootstrap5.css" rel="stylesheet" />
1414
<link href="index.css" rel="stylesheet" />
1515
<script src="systemjs.config.js"></script>
1616
</head>

0 commit comments

Comments
 (0)