-
-
Save JeroenVinke/ec67b51213dd76b9cb0c25ab6aefbfab to your computer and use it in GitHub Desktop.
Tooltip: content 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
| <template> | |
| <require from="./content-template.css!css"></require> | |
| <require from="aurelia-kendoui-bridge/tooltip/tooltip"></require> | |
| <require from="./reusable-tooltip"></require> | |
| <div id="example"> | |
| <div class="demo-section k-content wide"> | |
| <ul id="products" | |
| class="dairy-photos" | |
| ak-tooltip="k-filter: a; k-content.call: reusableTooltip.getTemplate(); k-width.bind: 400; k-height.bind: 200; k-position: top"> | |
| <li> | |
| <a href="#" data-id="11" title="A cheese made in the artisan tradition by rural dairy farmers in the north of Spain"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/11.jpg" /> Queso de Cabrales</a> | |
| </li><li> | |
| <a href="#" data-id="12" title="A cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/12.jpg" /> Queso<br /> Manchego</a> | |
| </li><li> | |
| <a href="#" data-id="31" title="A veined Italian blue cheese, made from unskimmed cow's milk"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/31.jpg" /> Gorgonzola Telino</a> | |
| </li><li> | |
| <a href="#" data-id="32" title="An Italian cheese made from cream"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/32.jpg" /> Mascarpone Fabioli</a> | |
| </li><li> | |
| <a href="#" data-id="33" title="A white cheese made from goat milk"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/33.jpg" /> Geitost</a> | |
| </li><li> | |
| <a href="#" data-id="59" title="A semi-firm, cow's milk cheese"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/59.jpg" /> Raclette Courdavault</a> | |
| </li><li> | |
| <a href="#" data-id="60" title="A soft, creamy, surface-ripened cow's milk cheese"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/60.jpg" /> Camembert Pierrott</a> | |
| </li><li> | |
| <a href="#" data-id="72" title="A fresh cheese, originally from southern Italy, made from either buffalo's or cow's milk by the pasta filata method"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/72.jpg" /> Mozzarella di Giovanni</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <span ak-barcode="k-value: 2346722; k-type: ean8; k-width.bind: 280; k-height.bind: 100"></span> | |
| </div> | |
| <reusable-tooltip view-model.ref="reusableTooltip"></reusable-tooltip> | |
| </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 ContentTemplate { | |
| } |
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
| dairy-photos { | |
| list-style-type: none; | |
| margin: 15px 0 15px 10px; | |
| padding: 0; | |
| } | |
| .dairy-photos li { | |
| display: inline-block; | |
| margin: 5px; | |
| padding: 0; | |
| vertical-align: top; | |
| } | |
| .dairy-photos a { | |
| display: block; | |
| width: 100px; | |
| height: 155px; | |
| padding: 0 0 0 10px; | |
| font-size: .9em; | |
| line-height: 1.2em; | |
| text-transform: uppercase; | |
| color: #777; | |
| background-color: rgba(255,255,255,0.8); | |
| -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); | |
| -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); | |
| box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); | |
| } | |
| .dairy-photos a:hover { | |
| color: #fff; | |
| background-color: #000; | |
| } | |
| .dairy-photos a img { | |
| margin: 0 0 5px -10px; | |
| } | |
| .k-tooltip-content { | |
| vertical-align: middle; | |
| } | |
| .k-tooltip-content img, | |
| .k-tooltip-content p { | |
| float: left; | |
| } | |
| .k-tooltip-content p { | |
| font-size: 1.4em; | |
| padding: 20px; | |
| width: 160px; | |
| text-align: left; | |
| } |
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.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 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()); | |
| } |
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="aurelia-kendoui-bridge/common/template"></require> | |
| <require from="aurelia-kendoui-bridge/barcode/barcode"></require> | |
| <ak-template view-model.ref="template"> | |
| <span ak-barcode="k-value: 2346722; k-type: ean8; k-width.bind: 280; k-height.bind: 100"></span> | |
| </ak-template> | |
| </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 ReusableTooltipCustomElement { | |
| getTemplate(e) { | |
| return () => { | |
| console.log(this.template.template); | |
| return this.template.template; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment