Skip to content

DOCINFRA-2341_merged_using_automation #394

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 23, 2024
Merged

DOCINFRA-2341_merged_using_automation #394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
2 changes: 1 addition & 1 deletion ej2-vue/accordion/how-to/set-the-nested-accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Set the nested accordion in Vue Accordion component

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`.
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.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand Down
112 changes: 37 additions & 75 deletions ej2-vue/code-snippet/accordion/how-to/nestedaccordion-cs1/app-composition.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,87 +1,49 @@
<template>
<div id="app">
<ejs-accordion ref="Accordion_Nested" :expanding="expanding">
<ejs-accordion>
<e-accordionitems>
<e-accordionitem expanded='true' header='Video' content='<div id="nested_video"></div>'>
</e-accordionitem>
<e-accordionitem header='Music' content='<div id="nested_music"></div>'></e-accordionitem>
<e-accordionitem header='Images' content='<div id="nested_images"></div>'></e-accordionitem>
<e-accordionitem expanded='true' header='Video' :content="'NestedVideo'"></e-accordionitem>
<template v-slot:NestedVideo>
<ejs-accordion>
<e-accordionitems>
<e-accordionitem header='Video Track1' ></e-accordionitem>
<e-accordionitem header='Video Track2' ></e-accordionitem>
</e-accordionitems>
</ejs-accordion>
</template>
<e-accordionitem header='Music' :content="'NestedMusic'"></e-accordionitem>
<template v-slot:NestedMusic>
<ejs-accordion>
<e-accordionitems>
<e-accordionitem header='Music Track1' ></e-accordionitem>
<e-accordionitem header='Music Track2' ></e-accordionitem>
<e-accordionitem header='Music New' :content="'NestedMusicNew'"></e-accordionitem>
<template v-slot:NestedMusicNew>
<ejs-accordion>
<e-accordionitems>
<e-accordionitem header='New Track1' ></e-accordionitem>
<e-accordionitem header='New Track2' ></e-accordionitem>
</e-accordionitems>
</ejs-accordion>
</template>
</e-accordionitems>
</ejs-accordion>
</template>
<e-accordionitem header='Images' :content="'NestedImages'"></e-accordionitem>
<template v-slot:NestedImages>
<ejs-accordion>
<e-accordionitems>
<e-accordionitem header='Image Track1' ></e-accordionitem>
<e-accordionitem header='Image Track2' ></e-accordionitem>
</e-accordionitems>
</ejs-accordion>
</template>
</e-accordionitems>
</ejs-accordion>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AccordionComponent as EjsAccordion, AccordionItemDirective as EAccordionitem, AccordionItemsDirective as EAccordionitems } from "@syncfusion/ej2-vue-navigations";
import { Accordion } from '@syncfusion/ej2-vue-navigations';

const Accordion_Nested = ref(null);
const clicked = (e) => {
var ele = e.originalEvent.target;
if (ele.querySelectorAll('.e-accordion').length > 0) {
return;
}
new Accordion({
items: [{
header: 'New Track1'
},
{
header: 'New Track2'
}
]
}, '#nested_musicNew');
};

const expanding = (e) => {
var obj = Accordion_Nested.value.ej2Instances;
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 0) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
new Accordion({
items: [{
header: 'Video Track1'
},
{
header: 'Video Track2'
}
]
}, '#nested_video');
}
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 1) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
new Accordion({
clicked: clicked,
items: [{
header: 'Music Track1'
},
{
header: 'Music Track2'
},
{
header: 'Music New',
content: '<div id="nested_musicNew"></div>'
}
]
}, '#nested_music');
}
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 2) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
new Accordion({
items: [{
header: 'Track1'
},
{
header: 'Track2'
},
]
}, '#nested_images');
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
Expand Down
110 changes: 37 additions & 73 deletions ej2-vue/code-snippet/accordion/how-to/nestedaccordion-cs1/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,50 @@
<template>
<div id="app">
<ejs-accordion ref="Accordion_Nested" :expanding="expanding">
<ejs-accordion>
<e-accordionitems>
<e-accordionitem expanded='true' header='Video' content='<div id="nested_video"></div>'>
</e-accordionitem>
<e-accordionitem header='Music' content='<div id="nested_music"></div>'></e-accordionitem>
<e-accordionitem header='Images' content='<div id="nested_images"></div>'></e-accordionitem>
<e-accordionitem expanded='true' header='Video' :content="'NestedVideo'"></e-accordionitem>
<template v-slot:NestedVideo>
<ejs-accordion>
<e-accordionitems>
<e-accordionitem header='Video Track1' ></e-accordionitem>
<e-accordionitem header='Video Track2' ></e-accordionitem>
</e-accordionitems>
</ejs-accordion>
</template>
<e-accordionitem header='Music' :content="'NestedMusic'"></e-accordionitem>
<template v-slot:NestedMusic>
<ejs-accordion>
<e-accordionitems>
<e-accordionitem header='Music Track1' ></e-accordionitem>
<e-accordionitem header='Music Track2' ></e-accordionitem>
<e-accordionitem header='Music New' :content="'NestedMusicNew'"></e-accordionitem>
<template v-slot:NestedMusicNew>
<ejs-accordion>
<e-accordionitems>
<e-accordionitem header='New Track1' ></e-accordionitem>
<e-accordionitem header='New Track2' ></e-accordionitem>
</e-accordionitems>
</ejs-accordion>
</template>
</e-accordionitems>
</ejs-accordion>
</template>
<e-accordionitem header='Images' :content="'NestedImages'"></e-accordionitem>
<template v-slot:NestedImages>
<ejs-accordion>
<e-accordionitems>
<e-accordionitem header='Image Track1' ></e-accordionitem>
<e-accordionitem header='Image Track2' ></e-accordionitem>
</e-accordionitems>
</ejs-accordion>
</template>
</e-accordionitems>
</ejs-accordion>
</div>
</template>
<script>

import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from "@syncfusion/ej2-vue-navigations";
import { Accordion } from '@syncfusion/ej2-navigations';

export default {
name: "App",
Expand All @@ -22,73 +53,6 @@ export default {
"e-accordionitems": AccordionItemsDirective,
"e-accordionitem": AccordionItemDirective
},
methods: {
clicked: function (e) {
var ele = e.originalEvent.target;
if (ele.querySelectorAll('.e-accordion').length > 0) {
return;
}
new Accordion({
items: [{
header: 'New Track1'
},
{
header: 'New Track2'
}
]
}, '#nested_musicNew');
},
expanding: function (e) {
var obj = this.$refs.Accordion_Nested.ej2Instances
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 0) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
new Accordion({
items: [{
header: 'Video Track1'
},
{
header: 'Video Track2'
}
]
}, '#nested_video');
}
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 1) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
new Accordion({
clicked: this.clicked,
items: [{
header: 'Music Track1'
},
{
header: 'Music Track2'
},
{
header: 'Music New',
content: '<div id="nested_musicNew"></div>'
}
]
}, '#nested_music');
}
if (e.isExpanded && [].indexOf.call(obj.items, e.item) === 2) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
new Accordion({
items: [{
header: 'Track1'
},
{
header: 'Track2'
},
]
}, '#nested_images');
}
}
}
}
</script>
<style>
Expand Down
2 changes: 1 addition & 1 deletion ej2-vue/code-snippet/accordion/how-to/nestedaccordion-cs1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.1.35/bootstrap5.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
</head>
Expand Down
Loading