Skip to content

Instantly share code, notes, and snippets.

@JeroenVinke

JeroenVinke/app.html

Created May 4, 2017 21:21
Show Gist options
  • Save JeroenVinke/b31c5ee0049afef20e1d3cc391070136 to your computer and use it in GitHub Desktop.
Save JeroenVinke/b31c5ee0049afef20e1d3cc391070136 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia KendoUI component - problem report
Raw
app.html
<template>
<router-view></router-view>
<a route-href="route: about">go to page 2</a>
</template>
Raw
app.js
export class App {
configureRouter(config, router){
config.title = 'Aurelia';
config.map([
{ route: ['','home'], name: 'home',
moduleId: './page1', nav: true, title:'Home' },
{ route: 'about', name: 'about',
moduleId: './page2', nav: true, title:'About' }
]);
this.router = router;
}
}
Raw
index.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/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/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/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/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.5.2/config2.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-kendoui-bridge', kendo => kendo.pro());
aurelia.start().then(a => a.setRoot());
}
Raw
page1.html
<template>
<require from="aurelia-kendoui-bridge/tabstrip/tabstrip"></require>
<require from="aurelia-kendoui-bridge/dropdownlist/dropdownlist"></require>
<div id="tabstrip" ak-tabstrip="k-animation.bind: { open: { effects: 'fadeIn' } }">
<ul>
<li class="k-state-active">
Paris
</li>
<li>
New York
</li>
<li>
London
</li>
<li>
Moscow
</li>
</ul>
<div>
<ak-drop-down-list k-value.two-way="capSize">
<select style="width: 100%;">
<option>S - 6 3/4"</option>
<option>M - 7 1/4"</option>
<option>L - 7 1/8"</option>
<option>XL - 7 5/8"</option>
</select>
</ak-drop-down-list>
</div>
<div>
<span class="sunny">&nbsp;</span>
<div class="weather">
<h2>29<span>&ordm;C</span></h2>
<p>Sunny weather in New York.</p>
</div>
</div>
<div>
<span class="sunny">&nbsp;</span>
<div class="weather">
<h2>21<span>&ordm;C</span></h2>
<p>Sunny weather in London.</p>
</div>
</div>
<div>
<span class="cloudy">&nbsp;</span>
<div class="weather">
<h2>16<span>&ordm;C</span></h2>
<p>Cloudy weather in Moscow.</p>
</div>
</div>
</div>
</template>
Raw
page1.js
export class Page1 {}
Raw
page2.html
<template>
page 2
</template>
Raw
page2.js
export class Page2 {}
Raw
problem-details.md

Add any additional information here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment