+{"index.ts":"{{ripple}}/**\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('//ej2.syncfusion.com/demos/src/accordion/ajax-content.html', 'GET', true);\n ajax.send().then();\n ajax.onSuccess = (data: string): void => {\n //Initialize Accordion component\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 //Render initialized Accordion component\n acrdnObj.appendTo('#Accordion_Nested');\n };\n\n//Expanding Event function for Accordion component.\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 //Initialize Nested Accordion component\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 //Render initialized Nested Accordion component\n nestAcrdn.appendTo('#nested_Acc');\n }\n}\n","index.html":"<html><head><link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"../node_modules/@syncfusion/ej2/{{theme}}.css\" rel=\"stylesheet\"><style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\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 & 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:  \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\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</div></body></html>"}
0 commit comments