Skip to content

Commit ba06b76

Browse files
author
pipeline
committed
feature(EJ2-420): Accordion component typescript samples.
1 parent a9430fb commit ba06b76

File tree

16 files changed

+736
-2
lines changed

16 files changed

+736
-2
lines changed

‎src/accordion/Ajax_content.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<style>
2+
.e-accordion table {
3+
border-collapse: collapse;
4+
border-spacing: 0;
5+
width: 100%;
6+
}
7+
8+
.e-accordion table th,
9+
.e-accordion table td {
10+
font-weight: normal;
11+
padding: 5px;
12+
text-align: left;
13+
border: 1px solid #ddd
14+
}
15+
</style>
16+
<div>
17+
<table>
18+
19+
<tr>
20+
<th rowspan="2">CELLULAR</th>
21+
<td class='e-bold'>Technology</td>
22+
<td>GSM / CDMA / HSPA / EV-DO / LTE</td>
23+
</tr>
24+
<tr>
25+
<td class='e-bold'>Edge</td>
26+
<td>Yes</td>
27+
</tr>
28+
29+
<tr>
30+
<th rowspan="3">WIRELESS</th>
31+
<td class='e-bold'>Wi-Fi</td>
32+
<td>Yes ( 802.11 a/b/g/n/ac )</td>
33+
</tr>
34+
<tr>
35+
<td class='e-bold'>Bluetooth</td>
36+
<td>Yes ( v 5.0 )</td>
37+
</tr>
38+
<tr>
39+
<td class='e-bold'>NFC</td>
40+
<td>Yes</td>
41+
</tr>
42+
</table>
43+
</div>

‎src/accordion/ajax-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"src/accordion/Ajax_content.html":"<style>\n .e-accordion table {\n border-collapse: collapse;\n border-spacing: 0;\n width: 100%;\n }\n\n .e-accordion table th,\n .e-accordion table td {\n font-weight: normal;\n padding: 5px;\n text-align: left;\n border: 1px solid #ddd\n }\n</style>\n<div>\n<table>\n\n <tr>\n <th rowspan=\"2\">CELLULAR</th>\n <td class='e-bold'>Technology</td>\n <td>GSM / CDMA / HSPA / EV-DO / LTE</td>\n </tr>\n <tr>\n <td class='e-bold'>Edge</td>\n <td>Yes</td>\n </tr>\n\n <tr>\n <th rowspan=\"3\">WIRELESS</th>\n <td class='e-bold'>Wi-Fi</td>\n <td>Yes ( 802.11 a/b/g/n/ac )</td>\n </tr>\n <tr>\n <td class='e-bold'>Bluetooth</td>\n <td>Yes ( v 5.0 )</td>\n </tr>\n <tr>\n <td class='e-bold'>NFC</td>\n <td>Yes</td>\n </tr>\n</table>\n</div>","index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\n/**\n * Accordion Ajax Sample\n */\nimport { Accordion, ExpandEventArgs } from '@syncfusion/ej2-navigations';\nimport { Ajax } from '@syncfusion/ej2-base';\n\nlet acrdnObj: Accordion;\nlet nestAcrdn: Accordion;\n\n\n let ajax: Ajax = new Ajax('./src/accordion/Ajax_content.html', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = (data: string): void => {\n acrdnObj = new Accordion({\n expandMode: 'Single',\n expanding: expand,\n items: [\n { header: 'Network & Connectivity', content: data, expanded: true },\n { header: 'Feature', content: '<div id=\"nested_Acc\"></div>' },\n { header: 'Hardware & Software', content: '#Hard_Soft_features' }\n ]\n });\n acrdnObj.appendTo('#Accordion_Nested');\n };\n\nfunction expand(e: ExpandEventArgs): void {\n if (e.isExpanded && [].indexOf.call(this.items, e.item) === 1) {\n if (e.element.querySelectorAll('.e-accordion').length > 0) {\n return;\n }\n nestAcrdn = new Accordion({\n expandMode: 'Single',\n items: [\n { header: 'Sensor', content: '#Sensor_features' },\n { header: 'Camera', content: '#Camera_features' },\n { header: 'Video Recording', content: '#Video_Rec_features' },\n ]\n });\n nestAcrdn.appendTo('#nested_Acc');\n }\n}\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<style>\n\n @-moz-document url-prefix() {\n .e-accordion .e-content table {\n border-collapse: initial;\n }\n }\n\n .e-accordion table {\n border-collapse: collapse;\n border-spacing: 0;\n width: 100%;\n }\n\n .e-accordion table th,\n .e-accordion table td {\n font-weight: normal;\n padding: 5px;\n text-align: left;\n border: 1px solid #ddd\n }\n\n .product_title {\n text-align: center;\n margin: 20px 0;\n padding: 10px 0;\n text-overflow: ellipsis;\n font-weight: bold;\n font-size: 16px;\n }\n\n .accordion-control-section {\n margin: 0 10% 0 10%;\n padding-bottom: 25px;\n }\n #source_link {\n float: right;\n margin-right: 10px;\n }\n @media screen and (max-width: 768px) {\n .accordion-control-section {\n margin: 0;\n margin-bottom: 20px;\n }\n #source_link {\n margin-top: -25px;\n margin-right: 0px; \n }\n }\n</style>\n\n<div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div class=\"product_title\"> iPhone X Product Specification </div>\n <div id=\"Accordion_Nested\"></div>\n </div>\n\n <div id=\"Sensor_features\" style=\"display:none\">\n <table>\n <tbody><tr>\n <td class=\"e-bold\">Proximity sensor</td>\n <td>Yes</td>\n </tr>\n <tr>\n <td class=\"e-bold\">Face ID</td>\n <td>Yes</td>\n </tr>\n <tr>\n <td class=\"e-bold\">Accelerometer</td>\n <td>Yes</td>\n </tr>\n </tbody></table>\n </div>\n <div id=\"Hard_Soft_features\" style=\"display:none\">\n <table>\n <tbody><tr>\n <th rowspan=\"3\"> Hardware</th>\n <td class=\"e-bold\" rowspan=\"2 \">Chip</td>\n <td>Apple A11 Bionic chip with 64-bit architecture</td>\n </tr>\n <tr>\n <td>Embedded M11 motion coprocessor</td>\n </tr>\n <tr>\n <td class=\"e-bold\">Capacity</td>\n <td>64GB/256GB</td>\n </tr>\n <tr>\n <th> Software</th>\n <td class=\"e-bold\" rowspan=\"2 \">Operating System</td>\n <td>iOS 11</td>\n </tr>\n </tbody></table>\n </div>\n <div id=\"Video_Rec_features\" style=\"display:none\">\n <table>\n <tbody><tr>\n <th class=\"e-bold\" rowspan=\"9\">Video Recording</th>\n </tr>\n <tr>\n <td class=\"e-bold\">4K video recording</td>\n </tr>\n <tr>\n <td class=\"e-bold\">1080p &amp; 720p HD video recording</td>\n </tr>\n <tr>\n <td class=\"e-bold\">Optical zoom, 6x digital zoom</td>\n </tr>\n <tr>\n <td class=\"e-bold\">Slow motion video support</td>\n </tr>\n <tr>\n <td class=\"e-bold\">Take 8MP still photos while recording 4K video</td>\n </tr>\n <tr>\n <td class=\"e-bold\">Noise reduction</td>\n </tr>\n\n </tbody></table>\n </div>\n <div id=\"Camera_features\" style=\"display:none\">\n <table>\n <tbody><tr>\n <th class=\"e-bold\" rowspan=\"3\">Camera</th>\n <td class=\"e-bold\"> 12MP wide-angle</td>\n </tr>\n <tr>\n <td class=\"e-bold\">Live Photos with stabilization</td>\n </tr>\n <tr>\n <td class=\"e-bold\">Body and face detection</td>\n </tr>\n <tr>\n <th class=\"e-bold\" rowspan=\"4\">TrueDepth Camera</th>\n <td class=\"e-bold\"> 7MP camera</td>\n </tr>\n <tr>\n <td class=\"e-bold\"> Animoji</td>\n </tr>\n <tr>\n <td class=\"e-bold\"> Face detection</td>\n </tr>\n </tbody></table>\n </div>\n <div id=\"source_link\">Source: &#xA0;\n <a href=\"https://www.apple.com/iphone-x/specs/\" target=\"_blank\">www.apple.com/iphone-x/specs/</a>\n </div>\n</div>\n\n<style>\n\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

‎src/accordion/ajax.html‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<style>
2+
3+
@-moz-document url-prefix() {
4+
.e-accordion .e-content table {
5+
border-collapse: initial;
6+
}
7+
}
8+
9+
.e-accordion table {
10+
border-collapse: collapse;
11+
border-spacing: 0;
12+
width: 100%;
13+
}
14+
15+
.e-accordion table th,
16+
.e-accordion table td {
17+
font-weight: normal;
18+
padding: 5px;
19+
text-align: left;
20+
border: 1px solid #ddd
21+
}
22+
23+
.product_title {
24+
text-align: center;
25+
margin: 20px 0;
26+
padding: 10px 0;
27+
text-overflow: ellipsis;
28+
font-weight: bold;
29+
font-size: 16px;
30+
}
31+
32+
.accordion-control-section {
33+
margin: 0 10% 0 10%;
34+
padding-bottom: 25px;
35+
}
36+
#source_link {
37+
float: right;
38+
margin-right: 10px;
39+
}
40+
@media screen and (max-width: 768px) {
41+
.accordion-control-section {
42+
margin: 0;
43+
margin-bottom: 20px;
44+
}
45+
#source_link {
46+
margin-top: -25px;
47+
margin-right: 0px;
48+
}
49+
}
50+
</style>
51+
52+
<div class="control-section">
53+
<div class="control_wrapper accordion-control-section">
54+
<div class='product_title'> iPhone X Product Specification </div>
55+
<div id='Accordion_Nested'></div>
56+
</div>
57+
58+
<div id='Sensor_features' style="display:none">
59+
<table>
60+
<tr>
61+
<td class='e-bold'>Proximity sensor</td>
62+
<td>Yes</td>
63+
</tr>
64+
<tr>
65+
<td class='e-bold'>Face ID</td>
66+
<td>Yes</td>
67+
</tr>
68+
<tr>
69+
<td class='e-bold'>Accelerometer</td>
70+
<td>Yes</td>
71+
</tr>
72+
</table>
73+
</div>
74+
<div id='Hard_Soft_features' style="display:none">
75+
<table>
76+
<tr>
77+
<th rowspan="3"> Hardware</th>
78+
<td class='e-bold' rowspan="2 ">Chip</td>
79+
<td>Apple A11 Bionic chip with 64-bit architecture</td>
80+
</tr>
81+
<tr>
82+
<td>Embedded M11 motion coprocessor</td>
83+
</tr>
84+
<tr>
85+
<td class='e-bold'>Capacity</td>
86+
<td>64GB/256GB</td>
87+
</tr>
88+
<tr>
89+
<th> Software</th>
90+
<td class='e-bold' rowspan="2 ">Operating System</td>
91+
<td>iOS 11</td>
92+
</tr>
93+
</table>
94+
</div>
95+
<div id='Video_Rec_features' style="display:none">
96+
<table>
97+
<tr>
98+
<th class='e-bold' rowspan='9'>Video Recording</th>
99+
</tr>
100+
<tr>
101+
<td class='e-bold'>4K video recording</td>
102+
</tr>
103+
<tr>
104+
<td class='e-bold'>1080p & 720p HD video recording</td>
105+
</tr>
106+
<tr>
107+
<td class='e-bold'>Optical zoom, 6x digital zoom</td>
108+
</tr>
109+
<tr>
110+
<td class='e-bold'>Slow motion video support</td>
111+
</tr>
112+
<tr>
113+
<td class='e-bold'>Take 8MP still photos while recording 4K video</td>
114+
</tr>
115+
<tr>
116+
<td class='e-bold'>Noise reduction</td>
117+
</tr>
118+
119+
</table>
120+
</div>
121+
<div id='Camera_features' style="display:none">
122+
<table>
123+
<tr>
124+
<th class='e-bold' rowspan='3'>Camera</th>
125+
<td class='e-bold'> 12MP wide-angle</td>
126+
</tr>
127+
<tr>
128+
<td class='e-bold'>Live Photos with stabilization</td>
129+
</tr>
130+
<tr>
131+
<td class='e-bold'>Body and face detection</td>
132+
</tr>
133+
<tr>
134+
<th class='e-bold' rowspan='4'>TrueDepth Camera</th>
135+
<td class='e-bold'> 7MP camera</td>
136+
</tr>
137+
<tr>
138+
<td class='e-bold'> Animoji</td>
139+
</tr>
140+
<tr>
141+
<td class='e-bold'> Face detection</td>
142+
</tr>
143+
</table>
144+
</div>
145+
<div id='source_link'>Source: &nbsp;
146+
<a href="https://www.apple.com/iphone-x/specs/" target='_blank'>www.apple.com/iphone-x/specs/</a>
147+
</div>
148+
</div>
149+
<div id="description">
150+
<p>
151+
This sample illustrates the external webpage content loaded inside the Accordion panel by using AJAX library.
152+
</p>
153+
<p>
154+
More information about Accordion can be found in this <a target="_blank" href="http://ej2.syncfusion.com/documentation/accordion/getting-started.html">
155+
documentation</a> section.
156+
</p>
157+
</div>
158+
<style>
159+
160+
</style>

‎src/accordion/ajax.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* Accordion Ajax Sample
3+
*/
4+
import { Accordion, ExpandEventArgs } from '@syncfusion/ej2-navigations';
5+
import { Ajax } from '@syncfusion/ej2-base';
6+
7+
let acrdnObj: Accordion;
8+
let nestAcrdn: Accordion;
9+
this.default = () => {
10+
11+
let ajax: Ajax = new Ajax('./src/accordion/Ajax_content.html', 'GET', true);
12+
ajax.send().then();
13+
ajax.onSuccess = (data: string): void => {
14+
acrdnObj = new Accordion({
15+
expandMode: 'Single',
16+
expanding: expand,
17+
items: [
18+
{ header: 'Network & Connectivity', content: data, expanded: true },
19+
{ header: 'Feature', content: '<div id="nested_Acc"></div>' },
20+
{ header: 'Hardware & Software', content: '#Hard_Soft_features' }
21+
]
22+
});
23+
acrdnObj.appendTo('#Accordion_Nested');
24+
};
25+
};
26+
function expand(e: ExpandEventArgs): void {
27+
if (e.isExpanded && [].indexOf.call(this.items, e.item) === 1) {
28+
if (e.element.querySelectorAll('.e-accordion').length > 0) {
29+
return;
30+
}
31+
nestAcrdn = new Accordion({
32+
expandMode: 'Single',
33+
items: [
34+
{ header: 'Sensor', content: '#Sensor_features' },
35+
{ header: 'Camera', content: '#Camera_features' },
36+
{ header: 'Video Recording', content: '#Video_Rec_features' },
37+
]
38+
});
39+
nestAcrdn.appendTo('#nested_Acc');
40+
}
41+
}

0 commit comments

Comments
 (0)