Skip to content

Instantly share code, notes, and snippets.

@gist-master
Created January 7, 2017 15:55
Show Gist options
  • Save gist-master/61cf21637a127d78578caa77b55165c7 to your computer and use it in GitHub Desktop.
Save gist-master/61cf21637a127d78578caa77b55165c7 to your computer and use it in GitHub Desktop.
Panel Bar: Loading with AJAX
.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;
}
<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>
<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>
<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>
<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>
<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>
export class Ajax {
contentUrls = [
'ajaxContent1.html',
'ajaxContent2.html',
'ajaxContent3.html',
'ajaxContent4.html'
];
}
<!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>
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