Created
January 7, 2017 15:52
-
-
Save gist-master/9541f8c0348ead8abaa1461882cf944a to your computer and use it in GitHub Desktop.
Panel Bar: Loading with AJAX
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .wrapper { | |
| height: 320px; | |
| margin: 20px auto; | |
| padding: 20px 0 0; | |
| background: url('https://demos.telerik.com/kendo-ui/content/web/panelbar/astonmartin.png') no-repeat center 50px transparent; | |
| } | |
| #panelbar { | |
| width: 250px; | |
| float: right; | |
| margin-bottom: 20px; | |
| } | |
| #panelbar p { | |
| padding: 1em; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p>Two-seat, two-door coupe</p> | |
| <p>Carbon fibre monocoque structure</p> | |
| <p>Hand crafted aluminium body panels</p> | |
| <p>Single bi-xenon headlamps with integrated LED side lights and direction indicators</p> | |
| <p>Carbon fibre front splitters</p> | |
| <p>Carbon fibre rear diffuser with integrated transaxle cooler</p> | |
| <p>LED rear lamps (fog and reverse)</p> | |
| <p>Active aerodynamics with deployable spoiler</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p>Alloy quad overhead camshaft, 48-valve, 7312 cc V12</p> | |
| <p>Front mid-mounted engine, rear-wheel drive</p> | |
| <p>Fully catalysed stainless steel lightweight sports exhaust system with active bypass valves</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p>Rear mid-mounted, six-speed automated manual gearbox with auto shift manual/select shift manual (ASM/SSM) electric hydraulic control system</p> | |
| <p>Magnesium alloy torque tube with carbon fibre propeller shaft</p> | |
| <p>Limited-slip differential</p> | |
| <p>Final drive ratio 3.538</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p>Compression ratio 10.9:1</p> | |
| <p>Max power 559 kW (750 bhp/760 PS)</p> | |
| <p>Max torque 750 Nm</p> | |
| <p>Acceleration 0 - 100 km/h (62 mph) in under 3.7 seconds</p> | |
| <p>Maximum speed over 354 km/h (220 mph)</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="./ajax.css!css"></require> | |
| <require from="aurelia-kendoui-bridge/panelbar/panelbar"></require> | |
| <div id="example"> | |
| <div class="wrapper"> | |
| <ak-panel-bar k-content-urls.bind="contentUrls" k-expand-mode="single"> | |
| <ul id="panelbar"> | |
| <li> | |
| BODY | |
| <div></div> | |
| </li> | |
| <li> | |
| ENGINE | |
| <div></div> | |
| </li> | |
| <li> | |
| TRANSMISSION | |
| <div></div> | |
| </li> | |
| <li> | |
| PERFORMANCE | |
| <div></div> | |
| </li> | |
| </ul> | |
| </ak-panel-bar> | |
| </div> | |
| </div> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class Ajax { | |
| contentUrls = [ | |
| 'ajaxContent1.html', | |
| 'ajaxContent2.html', | |
| 'ajaxContent3.html', | |
| 'ajaxContent4.html' | |
| ]; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia KendoUI bridge</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script> | |
| <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script> | |
| <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script> | |
| <script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> | |
| </head> | |
| <body aurelia-app="main"> | |
| <h1>Loading...</h1> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.0.0-beta.1.0.6/config2.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-kendoui-bridge'); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment