Telerik UI for Windows 8 HTML

RadSlideHubTile is the tile to use when some kind of information needs to be associated with one image or you need to alternate between two content templates. For that purpose RadSlideHubTile exposes two properties: topContentTemplate and bottomContentTemplate. Both can be either a template (HTML string or DOM element) or an image URL. If an image is specified, its size will be scaled to fit the tile width/height.

Using RadSlideHubTile

Here is how RadSlideHubTile is used in HTML:

RadSlideHubTile Copy imageCopy
<div id="slideHubTile" style="background-color: saddlebrown" data-win-control="Telerik.UI.RadSlideHubTile" data-win-options="{
            topContentTemplate:'<h2>Chocolate</h2>', 
            bottomContentTemplate:'/images/food/3.jpg'
        }">
</div>
Slide tile

To see all available configuration options, go to RadSlideHubTile

Important

When using RadSlideHubTile in a WinJS.Binding.Template or any other scenario, in which the control is added to the DOM after it is already initialized, you must specify inline width and height for the host element. This is so because RadSlideHubTile needs its parent element to have non-zero size when it is initialized.