Skip to content

Commit 1e99e18

Browse files
author
pipeline
committed
feature(EJ2-420): Accordion component angular samples.
1 parent 59808ab commit 1e99e18

17 files changed

+618
-0
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/accordion.component.css

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
@font-face {
2+
font-family: 'acrdn-icons';
3+
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSSYAAAEoAAAAVmNtYXDnn+g2AAAB5AAAAGRnbHlmslgPRQAAAnwAABvMaGVhZA6+wXwAAADQAAAANmhoZWEHfAOBAAAArAAAACRobXR4YcP/xgAAAYAAAABkbG9jYU2IVXoAAAJIAAAANG1heHABLwC3AAABCAAAACBuYW1lNl/OpQAAHkgAAAKFcG9zdBxr6o4AACDQAAABawABAAADUv9qAFoEAP/i//0D6wABAAAAAAAAAAAAAAAAAAAAGQABAAAAAQAAxGQXJ18PPPUACwPoAAAAANXpvlcAAAAA1em+V//iAAAD6wPpAAAACAACAAAAAAAAAAEAAAAZAKsADAAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPpAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnFwNS/2oAWgPpAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+j/9wPo//AD6AAAA+gAAAPo/+ID6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6P/9A+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAUAAAAAQABAABAADnF///AADnAP//AAAAAQAEAAAAAQACAAMABAAFAAYABwAIAAkACgALAAwADQAOAA8AEAARABIAEwAUABUAFgAXABgAAAAAAFgAqgFGAkACjAL0A0AEGASOBPgFjgZeBrIHiggWCMIJOAoUCpILWgwUDI4NXA3mAAIAAAAAA3sD5wANADcAAAEeARcWNicuAScmJw4BBRc3FxEUDwEOAR8BHgE/ATUfARY7ATI2LwImPQEzMjY3NS4BIyEnNycBxQUnHDNDBwUnGwkJLTf+Qha70geWBQMDMwQMBtZ5HgQLYAgIAStpBc8HCAEBCAf+O5OsFgL/HCkGCEEzHCgGAgEBP+4WutP+3AgFYgQMBk4FAwSMi3KJDAsHxGIFBs0IBz4HCZOsFgAABAAAAAADhwPoAAMAFAAdAC8AADcXNy8BHgEHNzEXBzYWFx4BNwEGFiUOASImNDYyFiUGBwE+ATc+AScuAjEmBw4BAVjxVyMCAwUjgyIKGA4lTyj+rgcDAjkBK0ArK0Ar/gkkCgFfGjEYRaNML1M2NzRekOJY8lg5DxkII4QjAwECBwIGAVInUFQgKytAKyuDMjH+oQYWEizNfkJQJyUCB4cAAAAFAAAAAAPpA+cACwAXACMAWABhAAAlDgEHLgEnPgE3HgElDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEDBg8BDgEfARYPASYGBw4BFx4BNz4BPwE+AS8BJjY/AjYWHwEeATczJy4BIwciLwEuASciNx4BMjY0JiIGAUICSjk4SwEBSzg5SgJ3AUs4OEsCAks4OEv+xwJmTk1nAgJnTU5mhRENfCESEkEGCD9EsTQUARMzsEUaHQF4EwYOPwQEBkwECBAFIw83IpgBASIaSQ0GKRA7IhIGATFJMDBJMcY4SwEBSzg4SwEBS0k5SgICSjk4SwEBSzhOZwICZ05NZwICZwGbBgpeGk4mhQsLU0EXWCZXJ1kaQBlCJJ4aQB5/Bw4FOgIEBQlHHiIBQBoiAQtSHiUBWyQxMUkwMAAEAAAAAAPiA+cAaAB1AJ4AqgAAEyIHDgEHFT4BNx4BMjY3HgEyNjceATI2Nx4BMjY3HgEyNjceARc1LgEnJiM1ByIHFAYHLgE1JiM1ByIHFAYHLgEnJiMnFSIHFAYHLgE1JiMnFSIHFAYHLgE1JiMnFSIHFAYHLgE1JiM1AQYWFxY+ASYnJiMOAQUeAR8BHgEzPgE1FBYXPgE1FBYXPgE3LgEnLgEvAS4BJzc2NycmJw4BEx4BFz4BNy4BJw4BUggEASIiHigLCyk+KQsLKT4pCwsqPSoKCyo9KgsLKT0qCwspHiIjAQQIAQcFJCIjJAQIAQcFJCIjIwEECAEIBCQiIyQECAEIBCQjIiQECAEIBCQjIiQFCAElDTA0NE4fJzMTEylC/t0NfB4LCh0TKikqKikqKSoaJAoMaxMOTCpQMHQFBgYBCS0fECg4ATosLDoBATosLDoBGgYDIwMrARkMDRgYDQ0YGA0NGBgNDRgYDQ0YGA0MGQErAyIEBgEBBgMkAgIkAwYBAQYDJAICIwQGAQEGAyQCAiQDBgEBBgMkAgIkAwYBAQYDJAICJAMGAQGCNFkRDTZnVBAFATGUHII2JgkMAyoDAyoDAyoDAyoDARULDmkNBg8GDA5SBTo2MgEFHzOPAScsOgEBOiwsOgEBOgAAAAMAAAAAA+ID5wALABcAKQAAARY2NxY2Ny4BJxYGAx4BFz4BNy4BJw4BBQclFwUWNjcWNjceATcWNjcBAsgqYQQgUxksRBwCOtABQzIyQwEBQzIyQ/3ADwE6Lv66G2wkI10eGF8oJ1kb/sACgjYaBhUHJwMTHwhNAQYyQwEBQzIyQwEBQzU7SjukSQIuNAwrKhI8OxUgAWsAAv/3AAADEgPnAAwAQQAAAQYWFxY2NzYmJyYOASUGFhcWNjcXAwYfAgcGFB8BFjY/ARcHBhY7ATY/ASc2LwE3FRQWOwEyNjURNCclLgEnJgYCQBYXJylTGRYXJxs6MP28Fis3NmYaYJQDAgNlfAQFRgYMBHECHQEJB18MAykBAgVJQAkGPgcJCP6kFlssIDMDhihUGBYWKChUGA8BHBgpYSEeCSU3/wAGBwZ1jwUMBT0EAQSCArUHCwEM+AQGBlVvdAYJCQYBGQkFySc0AQEYAAL/8AAAAxID5wADACoAACUXJScBJgYXPgEXHgEjLgEHIgYXHgEXJScuAQcmNjceARc3NgInLgEnJgYBI2MBjWb+EA2eCgaHOQMBIAJcQwguOQaTQAFIA2uNAg8KAXt9EGAHGn8BcWIgR9vWtNMCOgOVxgcNVQIaCUkqVU8GdCSbBpU7BwQaAQuoNS8OATyABUsGARAAAAAABAAAAAADtwPnAEwAUACJAJIAABMGJxU2Nz4BFzYXHgEzByYPAQ4BFBYXFjI/AT4BJz8BNhc2FjI3PgEzNhYyNz4BMzYXHgEzNSImJyYHJgYiJy4BIyYGIicmIgYiJgciAQcjPwEvASYHBg8BFSEVMjY3NjcyFhcWMjc2MhceATMyNzYyFxYzMjc2NxY2Nz4BNzUnITcXFjY3Nic3JyUeATI2NCYiBkscGxscDh4OHxsKFw1GJiFMCgkJCRItEVAOBAlfExsfHDc3HA4eDhw3NxwOHg4gGw81EBA1DxsgGzc4Gw4fDh82OBsXQDc3NiAbAgN/GTGhyBAlHSAIOv7oERcLICUSJRAULxghTCILFQsUGCFNIRQYExggJQsTBww1Ezr+lXkMEhsFBAxcF/6NAS9ILy9ILwFzDQFZAQ4HBgEBDQUHShcgVgcVFxYHEhJTDiMTYgkNAQEbDgcFARsOBwUBDQcKWQcHDQEBGg0HBQEaDQ0aGgEBH4asFk4JChMSINcHeQQFDwEHCQkJDw8FBAkPDwkJDwEBBwkEDgszAXwFCRINFhFeE1kkLy9ILy8ABAAAAAAD4gPnAAMABwA8AEkAACUzNSMFMzUjAQcxBxUnJgYPAQYWHwIHBg8BDgEfAR4BPwE2PwEXFh8BFj8BNiYvASYvAQM3PgEvASYjIiUOARceATc+AScuAgMou7v82bq6ApGt15UHCgIPAgcG7z5NBQOABQEEQgQNBX8EBIqLBgafCwYtAwYHkgYEQpmsBgMDHwUJBP49JxYWGFQoKBYWDzE5JJycnALgZHwBJgEGBjwHCwE9aiACA2sEDQVTBQIEZgMCOGAEASICC2MHDAIpAQMxAQhkBAwFNgg3GVMpJxcWGVMpGhwBAAAF/+IAAAPrA+cACAARAC0APwBHAAABDgEiJjQ2MhY3FAYiJjQ2MhYlFTMyFhQGKwEVFAYiJj0BIyImNDY7ATU0NjIWBxYXFjY3Mx4BNzY3NiYnIQ4BARUzNS4BIgYC5QETHhMTHhN0FB0UFB0U/ZBGCg0NCkYNEw5FCg0NCkUOEw3GFyd4vxR3Fb54JxdBe3v94nx7Aec+AREbEQHtDxMTHhQUZQ8UFB4TFBRFDRQNRQoNDQpFDRQNRQoNDfAnFjxjbW1jPBYngsgFBcgBr8PDCw4OAAYAAAAAA+ID5wALABcAIwAvAFQAXQAAAQ4BBy4BJz4BNx4BBQ4BBy4BJz4BNx4BFx4BFz4BNy4BJw4BBR4BFz4BNy4BJw4BAQcGFRQWHwEVHgE3PgE9ATYmLwE3Fx4BOwE2NCcjJzQmJyMiBjceATI2NCYiBgOrAlU+QVMBAVU/QFP9ugJVPkBUAQJVPj5V6AJ1VlhzAgN0VlZ1/bYCc1hYcwICdVZYcwGXqhASD60BIBgQFAIHHGJpNAgRCJMiIoFXGhsDBhxkASxBLCxBLAF2QVMBAVU/QFMCAlNAQVMBAVU/QFMCAlNAWHMCAnVWWHMCAnNYVnMEAnVWWHMCAnMBjp4UGBIeCFqnFhgDAxkRyAIlETRpTwoJAzcEfwIYAgcyISwsQSwsAAAAAAUAAAAAA+ID5wBBAEwAVQCEAI0AADcyFhceARcxMzE+ATc+ATczMTIWFx4BFz4BNz4BMhYXHgEXNSImJy4BJw4BBw4BIiYnLgEnIzUOAQcOASImJy4BJxMGFh8BNycmByIGJR4BMjY0JiIGJQcOAQcGFj8BFwcGDwEjIgYUFhchMjY/AhcWFzM+ATQmJyMvASYxLwEzJyYnIhceATI2NCYiBgESGBETPDAfMTwTDxgPBBMaERQ/NDRAExIZJRoRFEA0FhwSEz0xMT0UER0qHBITOi4HMj8UEx0pHRMTPzMGBw8UziXOCgoOGQM+ASk/Kio/Kf45lQ8YAgIkGn9IeAcEPtUUGhoUAQMNFgZYgFQOEqAUGhoUg24pAQMFAn0OEAbKASo+Kio+KqMQEhUpAgIpFREQARESFSkCAigWEhAQEhUpAmISEhQoAQEnFRISEhIUJgMBAigWEhISEhYpAQHNEyQJUlxSBAEQWyApKT8qKlsdBBgQGyAEGTd4BwqbGigaAQ4MeIBLDAEBGigaAXMiAQIDYgoBGR8qKj8pKQAAAwAAAAADCQPnAAQACQAxAAABFgIHEQMmAj8CNSMVJgADPgEXBzEhHgEXIT4BNyE1PgEXEAInNRY2JwYmNT4BJwYmAZ5bRhwfHFtxBh8fGf6xAwfZghb+qA9gSwGUTWsC/o4Fqmn7HTsqARobJhECKTkDZav+qS0CNf1VMAGh0QlqEHcC/rf+nBNxhwM/XR4mjAh2FoubASkBCQYnCCsEGggCFCMBJwoABgAAAAAD4gPnACQARwBTAF0AfACWAAATBiMVMjYyFjI2MhYyNjIWMjYyFjM1IiYiBiImIgYiJiIGIiYiEwYiJyYnFRYXFjI2MhYyNjIWMjYzMhc1JiMiBiImIgYiJiIFFBYXPgE3LgEnDgElFBYXPgE0JiIGJQUOAR8CBRYXFjI2MhYyNjIWFzI3Azc+ATUuASciJQcOAR8CBxUWFxYyNjIWMzI3Jzc+ATQmIz4cISE5RDpCOUQ5QjlEOkE6RDkhITlEOkE6RDlCOUQ5QjpEARIpEgcHBwcSKSQqJCkkKiQpJBYPDg4PFiQpJCokKSQqAm9BNTJDAQFDMjJD/fYoIh8qKj8qAlP+nhUfDQNc/qUODB1COUQ5QjlEOSEYFsXlGiABJhwE/dfdDRMHAjpHDgwSKSMrJBQPDnuPEBQYEgEWDV0bGxsbGxsbG10bGxsbGxsbAUsICAMCOgIDCBERERERBToFEREREU4zQwICQzMzQwICQ7kgKgEBKkAqKkNBBTAjB6nBBAUNGhoaGgEIAWcrBSQaHSYBbikDHhYEaidQAgUIEREE4RoEFiMYAAAAAwAAAAADCAPnABIATQBbAAATDwIGFh8BFj8DNi8BJiMiEwYxBwYWHwEWNj8BFwMGHwEHBhYfARY2PwE2JyYvATcXMDEXFjY/ATYmLwEmBg8BJyImLwEiMSYjJwY3BhYXFjY3NiYnJiMiBpc9AlQEAwdUCwhhAigECEgFBgkuAUMCBAY5BgwDLCRzBAi1PwMFBlUGDAJqAwUBAlNaLDAFDQSCBQIFMAUMBFE+AQICxAEDA4gJyRQkMDFcFxQkMBgYJT4Ba4oEawYOBCQFCoMDWwsHQgQBpgGXBgwDGQIEBmUD/vwLCKiPBwsDJQMEB+8IBwMCTc0lKAQBBZwFDQQoBAEFYTUBAVcCDAF7MVwXFCQwMVwXCiYAAAMAAAAAA8MD5wBRAFoAcAAANw4BBxUyNjc+ATM2Fx4BMj4CMzYXHgEzFjc+ATM2Fx4BMxY3PgEzNhceATM1IicuASMmBw4BByInLgEjJgcOAQciJy4BIyYHDgEHIicuASIGEx4BMjY0JiIGAQMHBgcDBh4BNj8BJTY3EzYmJy4BBjwOHRAQHAwOHxEhHQ0dIRwcIBAhHQ4dEB8cDh8RIRwOHRAgGw4gECEdDh0QIBsOIBAhHQ4dEB8cDh8QIhwOHRAgGw4gECEdDhwRIBcOICEfggEuQy8vQy4Cf6XyEgq6CQghIwqDAR4SCsMMDBUOHRtsBQcBWQcFBQcBDQUHBwoHAQ0FBwENBQcBDQUHAQ0FBwENBQdZDQUHAQ0FBwENBQcBDQUHAQ0FBwENBQcBDQUHBwGLIS4uQy4uAa3+6ZIJE/69ESMUCRDjsQkTAU8WLAwFAQ4AAAAAAwAAAAAD4gPnACQAMABOAAATBiMVMjYyFjI2MhYyNjIWMjYyFjM1IiYiBiImIgYiJiIGIiYiARQWFz4BNy4BJw4BEwUOAR8CBRYXFjI+ARYyPgEWFzI3Azc+ATUuASc+HCEhOUQ6QjlEOUI5RDlCOUU5ISE5RTlCOUQ5QjlEOUI6RAKCQTUyQwEBQzIyQ0n+nhUfDQNc/qUODB1COUQ5QjlEOSEYFsXlGiABJhwBhA1dGxsbGxsbGxtdGxsbGxsbGwEGM0MCAkMzM0MCAkMBHEEFMCMHqcEDBg0aARsaARsBCAFnKwUkGh0mAQAEAAAAAAONA+cAEABQAGUAkQAAJQcxBgcGHgI/ATY0LwEmIjcHFzcXBxc3FwcXNxcHFzc2JiMuAQcOAQcnNz4BMzYmIyYGBw4BByc3PgEXNiYjJgYVDgEXByc+ATM2JjUmBgcBHgEHDgEHDgEnLgE3PgE3PgE3MhYFDgEHBhcPAicmIg8BBhQfARYyPwE2NC8BPwEWMzI2Nz4BNzYmJy4BIyIGAZMfBAIPBiguECUDA00ECVdDDgkMCwsPCg8NEQsSDJALAgEMJAIiIwMLCBQrAhUEAgshAh8cAwkBEC0CEAICDRcoFgEBCw8vAgEJCQsDATQXEwUFKSJGoDUXEwUFKSIpXi0eNf7NKTIHCiYLCLoFChkJjwkJJAoZCY8JCQXAMjI9OnQyKTIHBx0hHUsqOXbgHQIDDi8qCg4iAwkDVAOVkBAUDREMDgsODgsLCg06Bg4MAQEKJgUMBBoUFRAFCAEMKAgKAh8eARYQBAcBFjACAQwnIgwXAQ0BBAIGF0InKk8hRBgxF0InKk8iKCkBFBIpYjRTPiUWuwUJCY8JGQokCQmPChgKBb8SHTIyKWE0NlwiHRwyAAUAAAAAA+ID6QADAAcACwATAEwAADchNSEnITUhJyE1ISUOAQcXNQYmAQYWFwUeARcFDgEfAR4BPwEVDgEHLgE3PgE3NhYXNzUuAScOAQceARc+ATc1NzMWNxElLgEHIgY3fQEY/ug+ARj+6D4BN/7JA3gEFgKGKzv93zIfBgE7WmAT/uwPDQUDBhkPbgU+LTFAAQEfGCY/GmcDZz1efAMDfF5dfwpBCS8i/ssjOQ8FBwK9Hx8fHx85J0MCCnkIBAJFFjgDriRiK0sFGRANEBAEHworOAEBQjEcMA8WDBMeCAZVBgN9XV19AgJ9XRMdAQ4Bfis7JAICAgAAAAYAAAAAA+ID5wAoAFEAWgBjAHcAiwAAExYXHgMyPgIyHgIyPgI3NjQnDgMiLgIiDgIiLgInBicWFzIeAjI+AjIeAjI+AjM2NCciDgIiLgIiDgIiLgIjBiUeATI2NCYiBgUeATI2NCYiBiUHBh8BFjMyNz4BLwE3NiYnJiMGJQcGHwEWMzI3PgEvATc2JicmIyIBAQsqNSs6XTksNFU0LDpdOSw0KwsLLzorNFU0LDpdOSw0VTQsOS8LAQELKjUrOl05LDRVNCw6XTksNCsLCy86KzRVNCw6XTksNFU0LDkvCwLYAS1DLSxELf31ATBILy9IMAGwUAkKUgwTCgkNBwhHRgcIDQkJFP3lVgoLWAwVCgoOBwhMSwcJDgkJFgG4CwEBEBcSEhcQEBcSEhcQAQEWAQESFxAQFxISFxAQFxIBAWkLARAXEhIXEBAXEhIXEAEWARIXEBAXEhIXEBAXEgF5IS0tQy0tHSMwMEcwMOSVEhKHEQUJHA11gg4cBwUBBJ4TE5ASBQkeDn2KDx0JBAAGAAAAAAOBA+cADwAoAD8AUgBiAHUAAAEGBw4BBx4BMz4BNy4BJwYlBgcGByMiJiMeARc+ATc+ATcmJy4BJw4BExQXHgEXHgEXFhc+ATU0Jy4BJy4BJyIFFBYXNTIWPwEuAScmNz4BNw4BJQYHPgEXHgEXFhcuAScOAScOAhYXPgE3JicmNjc+ATcOAQI6UGkuUSAzcD12wD0ZOR0z/q5HUBcWJxUgCxVNMhdvRk+nNSonLkIOH0pWIRBCLCJBG0IuGRwID0EuJmtBM/4LBggBVEIZERUHDAQCCARGUAHDBQEqVywoUig4Ii7PiAUT+gIPChMnMWgwGQgEAgUEEQdCcwEQMR0MDwMcHwFpWSI0FUx2GAcCAQNBbCoBDxQUXFEcEBUWAhclARFWVQQXFBEjFS43L2o5KywLIxIPFwG+GTEVCAUFAyBEKEtXIjwXP6vGISoIAgUEEQ8VFXygDA1QFQ5XfJ5JCiYhRFAmTygwSxMCJQACAAAAAANUA+cACABOAAATHgEyNjQmIgYlASc+ATUuAScOAR0BIgYHBhQfARYyPwI2PwEWHwEWHwEOAQcRHgEyNjc1NwEeATc+AS8BNzYmLwEmLwI3NjQnLgEjInsBNlE2NlE2AZf+kCkMDwEbFhIaDBQHDw9tESkQBgMEBUwJEjUBBT4JIgIBGigaARcBAA0iDxQCEfQMHwckgQcIDgaqEBAHEwkSAz8pNjZRNzdx/o4nBhYQFB0BARYQBgYJECkRbQ8PCQMBBU0SETMEBUYRPAb+7RQaHhX7JP8ADQQKDzAS8wwjWCF4BwUJA60QJw8HCAAAB//9AAAD6APnABYAJQAzAEIAUQB2AIIAADcGBw4BBxUFLgEnLgUnLgEjJgYBMhceAQcOAScuATc+ATcHBhYXFjY3NiYnJiMOASUWFx4BBw4BJy4BNz4BNycOAQcGFhcWNjc2JicmIyUHBgcGFh8BBwYeATY/AT4BLwE3Fx4BHwEWNi8CNCYvASYiBjcGHgE+ASYnJiMiBpY3PQwUAQPfCLFGP0YBJkNCHxg7Ix9DAlkPDz4/DQ9mPT4/DQ1OM8URWFRXiRURWFQXF0du/oAPDj1ADBBlPT8+DA1PMgNHaRERVlVXihURWVMXFwFGvRMGBAoMiiUEEiUdBS4CAhdQdyAFDgiIIAwfeTMSGAMDDxNVBiA9Mg4gHgcIGirKIBMDBwN8BgVEBAImBBcQGQ8LEQEQARMDEGQ/Pj8NEGU9NT4BaFaKFRFYVFeJFQUBVqABAw9kPz4/DBBlPTU+AjgDVUhUihcRWFRWihUF3XgPFxMhCnukExwJEhPOASQVRUtTCw0BHwQzCxuOAh0HAQEEIR4zDiA9MwgBHwAAAAwAAAAAA8MD5wADAAcACwAPABMAFwAbAB8AIwAnAEoAVwAAJTM1IwczNSMHMzUjBzM1IwczNSMHMzUjBTM1IwUzNSMFMzUjBTM1IwEHBhYXFhcWMyUXFj4BJi8BBzcXNRU3PgEuAQ8BLwEmIyYGNwYWFxY2NzYmJyYOAQNIHx9eHx/ZHx9dHx/aICBdHx8DCT4+/ug+Pv7KPj7+yT4+ARiBGRktGxwJCAFnpR0zFBoc3r1DZKcbIAMkGoPdBBMTGSt9FhcnKVMZFhcnGzowJD8/Pz9BQUFBQUFBQZycnJycnJwCJN4vXxwPAQEZOAkZOjMLSw11HwEBCgIlNCEBB0MBCAEYtilTGRYXJylTGQ8CGwAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEADwABAAEAAAAAAAIABwAQAAEAAAAAAAMADwAXAAEAAAAAAAQADwAmAAEAAAAAAAUACwA1AAEAAAAAAAYADwBAAAEAAAAAAAoALABPAAEAAAAAAAsAEgB7AAMAAQQJAAAAAgCNAAMAAQQJAAEAHgCPAAMAAQQJAAIADgCtAAMAAQQJAAMAHgC7AAMAAQQJAAQAHgDZAAMAAQQJAAUAFgD3AAMAAQQJAAYAHgENAAMAAQQJAAoAWAErAAMAAQQJAAsAJAGDIEFjY29yZGlvbl9JY29uc1JlZ3VsYXJBY2NvcmRpb25fSWNvbnNBY2NvcmRpb25fSWNvbnNWZXJzaW9uIDEuMEFjY29yZGlvbl9JY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQQBjAGMAbwByAGQAaQBvAG4AXwBJAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgBBAGMAYwBvAHIAZABpAG8AbgBfAEkAYwBvAG4AcwBBAGMAYwBvAHIAZABpAG8AbgBfAEkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAQQBjAGMAbwByAGQAaQBvAG4AXwBJAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGQECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERARIBEwEUARUBFgEXARgBGQEaAA1KYXZlbGluX1Rocm93DFRhYmxlX1Rlbm5pcwtDeWNsaW5nX0JNWApXYXRlcl9Qb2xvCFN3aW1taW5nDERpc2N1c19UaHJvdwZCb3hpbmcGUm93aW5nCUhpZ2hfSnVtcAxJbmRvb3JfR2FtZXMKQ3ljbGVfUmFjZQtXYXRlcl9HYW1lcwdTYWlsaW5nEU1hcmF0aG9uX1N3aW1taW5nCE1hcmF0aG9uBkRpdmluZwlTd2ltbWluZzEJQmFkbWludG9uBlJhY2luZxVTeW5jaHJvbml6ZWRfU3dpbW1pbmcLVm9sbGV5X0JhbGwJQXRobGV0aWNzFEN5Y2xpbmdfTW91bnRhaW5CaWtlCUxvbmdfSnVtcAAAAA==) format('truetype');
4+
font-weight: normal;
5+
font-style: normal;
6+
}
7+
8+
.e-acrdn-icons {
9+
font-family: 'acrdn-icons';
10+
font-size: 16px;
11+
}
12+
13+
.cycle_BMX::before {
14+
content: "\e702"
15+
}
16+
17+
.javelin::before {
18+
content: "\e700";
19+
}
20+
21+
.marathon::before {
22+
content: "\e70e";
23+
}
24+
25+
.tennis::before {
26+
content: "\e701";
27+
}
28+
29+
.waterpolo::before {
30+
content: "\e703";
31+
}
32+
33+
.swimming::before {
34+
content: "\e704";
35+
position: relative;
36+
top: 5px;
37+
}
38+
39+
.discus::before {
40+
content: "\e705";
41+
}
42+
43+
.boxing::before {
44+
content: "\e706";
45+
}
46+
47+
.rowing::before {
48+
content: "\e707";
49+
}
50+
51+
.highjump::before {
52+
content: "\e708";
53+
}
54+
55+
.cycle::before {
56+
content: "\e70a";
57+
}
58+
59+
.sailing::before {
60+
content: "\e70c";
61+
}
62+
63+
.marathan_swim::before {
64+
content: "\e70d";
65+
}
66+
67+
.boxing::before {
68+
content: "\e706";
69+
}
70+
71+
.dive::before {
72+
content: "\e70f";
73+
}
74+
75+
.swimming_In::before {
76+
content: "\e710";
77+
position: relative;
78+
top: 2px;
79+
}
80+
81+
.badminton::before {
82+
content: "\e711";
83+
}
84+
85+
.sync_swim::before {
86+
content: "\e713";
87+
position: relative;
88+
top: 3px;
89+
}
90+
91+
.volleyball::before {
92+
content: "\e714";
93+
}
94+
95+
.cycle_Mountain::before {
96+
content: "\e716";
97+
}
98+
99+
.longjump::before {
100+
content: "\e717";
101+
}
102+
103+
.e-athletics::before {
104+
content: "\e715";
105+
}
106+
107+
.e-water-game::before {
108+
content: "\e70b";
109+
}
110+
111+
.e-racing-games::before {
112+
content: "\e712";
113+
}
114+
115+
.e-indoor-games::before {
116+
content: "\e709";
117+
}
118+
119+
.e-acrdn-icons:not(.e-icons) {
120+
padding: 0 16px 0 0;
121+
vertical-align: middle;
122+
}
123+
124+
.e-rtl .e-acrdn-icons:not(.e-icons) {
125+
padding: 0 0 0 16px;
126+
vertical-align: middle;
127+
}
128+
129+
#athletics li,
130+
#racing_games li,
131+
#water_games li,
132+
#indoor_games li {
133+
line-height: 36px;
134+
list-style-type: none;
135+
text-indent: 16px;
136+
}
137+
138+
@-moz-document url-prefix() {
139+
.e-accordion .e-content table {
140+
border-collapse: initial;
141+
}
142+
}
143+
144+
.e-accordion table {
145+
border-collapse: collapse;
146+
border-spacing: 0;
147+
width: 100%;
148+
}
149+
150+
.accordion-control-section {
151+
margin: 0 10% 0 10%;
152+
}
153+
#source_link {
154+
float: right;
155+
margin-right: 30px;
156+
}
157+
@media screen and (max-width: 768px) {
158+
.accordion-control-section,
159+
#source_link {
160+
margin: 0;
161+
}
162+
}
163+
164+
.e-accordion table th,
165+
.e-accordion table td {
166+
font-weight: normal;
167+
padding: 5px;
168+
text-align: left;
169+
border: 1px solid #ddd
170+
}
171+
172+
.product_title {
173+
text-align: center;
174+
margin: 20px 0;
175+
padding: 10px 0;
176+
text-overflow: ellipsis;
177+
font-weight: bold;
178+
font-size: 16px;
179+
}

src/accordion/accordion.module.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2+
import { RouterModule } from '@angular/router';
3+
4+
import { AccordionModule } from '@syncfusion/ej2-ng-navigations';
5+
6+
import { DefaultAccordionComponent } from './default.component';
7+
import { AjaxAccordionComponent } from './ajax.component';
8+
import { IconAccordionComponent } from './icon.component';
9+
import { RtlAccordionComponent } from './rtl.component';
10+
11+
12+
import { SharedModule } from '../common/shared.module';
13+
export const accordionAppRoutes: Object[] = [
14+
{ path: ':theme/accordion/default', component: DefaultAccordionComponent, name: 'Default Functionalities', category: 'Accordion' },
15+
{ path: ':theme/accordion/ajax', component: AjaxAccordionComponent, name: 'Ajax Content', category: 'Accordion' },
16+
{ path: ':theme/accordion/icon', component: IconAccordionComponent, name: 'Icons', category: 'Accordion' },
17+
{ path: ':theme/accordion/rtl', component: RtlAccordionComponent, name: 'RTL', category: 'Accordion' },
18+
];
19+
20+
export const accordionRouter: ModuleWithProviders = RouterModule.forChild(accordionAppRoutes);
21+
22+
@NgModule({
23+
imports: [accordionRouter, AccordionModule, SharedModule],
24+
declarations: [
25+
DefaultAccordionComponent,
26+
AjaxAccordionComponent,
27+
IconAccordionComponent,
28+
RtlAccordionComponent,
29+
],
30+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
31+
})
32+
export class AccordionSampleModule {
33+
}

src/accordion/ajax-plnkr.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

src/accordion/ajax.component.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Component, OnInit, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
2+
import { Ajax} from '@syncfusion/ej2-base';
3+
import { ExpandEventArgs, Accordion} from '@syncfusion/ej2-navigations';
4+
import { AccordionComponent } from '@syncfusion/ej2-ng-navigations';
5+
6+
/**
7+
* Accordion Ajax Sample
8+
*/
9+
@Component({
10+
selector: 'control-content',
11+
templateUrl: 'ajax.html',
12+
styleUrls: ['accordion.component.css'],
13+
encapsulation: ViewEncapsulation.None
14+
})
15+
export class AjaxAccordionComponent implements OnInit {
16+
@ViewChild('accordion')
17+
public acrdn: AccordionComponent;
18+
public ajaxData: string;
19+
ngOnInit(): void {
20+
let ajax: Ajax = new Ajax('./src/accordion/Ajax_content.html', 'GET', true);
21+
ajax.send().then();
22+
ajax.onSuccess = (data: string): void => {
23+
this.acrdn.items[0].content = data;
24+
this.acrdn.refresh();
25+
};
26+
}
27+
public content: string = this.ajaxData;
28+
expand(e: ExpandEventArgs): void {
29+
if (e.isExpanded && [].indexOf.call(this.acrdn.items, e.item) === 1) {
30+
if (e.element.querySelectorAll('.e-accordion').length > 0) {
31+
return;
32+
}
33+
let nestAcrdn: Accordion = new Accordion({
34+
expandMode: 'Single',
35+
items: [
36+
{ header: 'Sensor', content: '#Sensor_features' },
37+
{ header: 'Camera', content: '#Camera_features' },
38+
{ header: 'Video Recording', content: '#Video_Rec_features' },
39+
]
40+
});
41+
nestAcrdn.appendTo('#nested_Acc');
42+
}
43+
}
44+
constructor( @Inject('sourceFiles') private sourceFiles: any) {
45+
sourceFiles.files = ['accordion.component.css'];
46+
}
47+
}

0 commit comments

Comments
 (0)