Last active
July 20, 2016 06:41
-
-
Save adriatic/09176e19cbf820af33aaa439c392daa8 to your computer and use it in GitHub Desktop.
Menu: basic usage
This file contains 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="./basic-use.css"></require> | |
<div id="megaStore"> | |
<ul ak-menu> | |
<li> | |
Products | |
<ul> | |
<li> | |
Furniture | |
<ul> <!-- moving the UL to the next line will cause an IE7 problem --> | |
<li>Tables & Chairs</li> | |
<li>Sofas</li> | |
<li>Occasional Furniture</li> | |
<li>Children's Furniture</li> | |
<li>Beds</li> | |
</ul> | |
</li> | |
<li> | |
Decor | |
<ul> <!-- moving the UL to the next line will cause an IE7 problem --> | |
<li>Bed Linen</li> | |
<li>Throws</li> | |
<li>Curtains & Blinds</li> | |
<li>Rugs</li> | |
<li>Carpets</li> | |
</ul> | |
</li> | |
<li> | |
Storage | |
<ul> <!-- moving the UL to the next line will cause an IE7 problem --> | |
<li>Wall Shelving</li> | |
<li>Kids Storage</li> | |
<li>Baskets</li> | |
<li>Multimedia Storage</li> | |
<li>Floor Shelving</li> | |
<li>Toilet Roll Holders</li> | |
<li>Storage Jars</li> | |
<li>Drawers</li> | |
<li>Boxes</li> | |
</ul> | |
</li> | |
<li> | |
Lights | |
<ul> <!-- moving the UL to the next line will cause an IE7 problem --> | |
<li>Ceiling</li> | |
<li>Table</li> | |
<li>Floor</li> | |
<li>Shades</li> | |
<li>Wall Lights</li> | |
<li>Spotlights</li> | |
<li>Push Light</li> | |
<li>String Lights</li> | |
</ul> | |
</li> | |
</ul> | |
</li> | |
<li> | |
Stores | |
<ul> | |
<li> | |
<div id="template" style="padding: 10px;"> | |
<h2>Around the Globe</h2> | |
<ol> | |
<li>United States</li> | |
<li>Europe</li> | |
<li>Canada</li> | |
<li>Australia</li> | |
</ol> | |
<img src="http://demos.telerik.com/kendo-ui/content/web/menu/map.png" alt="Stores Around the Globe" /> | |
<button class="k-button">See full list</button> | |
</div> | |
</li> | |
</ul> | |
</li> | |
<li> | |
Blog | |
</li> | |
<li> | |
Company | |
</li> | |
<li> | |
Events | |
</li> | |
<li disabled="disabled"> | |
News | |
</li> | |
</ul> | |
</div> | |
</template> |
This file contains 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 BasicUse {} |
This file contains 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
#megaStore { | |
max-width: 600px; | |
margin: 30px auto; | |
padding-top: 120px; | |
background: url('http://demos.telerik.com/kendo-ui/content/web/menu/header.jpg') no-repeat center 0; | |
} | |
#menu h2 { | |
font-size: 1em; | |
text-transform: uppercase; | |
padding: 5px 10px; | |
} | |
#template img { | |
margin: 5px 20px 0 0; | |
float: left; | |
} | |
#template { | |
width: 380px; | |
} | |
#template ol { | |
float: left; | |
margin: 0 0 0 30px; | |
padding: 10px 10px 0 10px; | |
} | |
#template:after { | |
content: "."; | |
display: block; | |
height: 0; | |
clear: both; | |
visibility: hidden; | |
} | |
#template .k-button { | |
float: left; | |
clear: left; | |
margin: 5px 0 5px 12px; | |
} |
This file contains 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.1.226/styles/kendo.common.min.css"> | |
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css"> | |
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css"> | |
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css"> | |
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.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/0.3.5/config2.js"></script> | |
<script> | |
System.import('aurelia-bootstrapper'); | |
</script> | |
</body> | |
</html> |
This file contains 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', kendo => kendo.pro()); | |
aurelia.start().then(a => a.setRoot()); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment