Language: HTML | XAML

Image and text list (landing snap) template (HTML)

Applies to Windows only

Defines an item in a snapped view that contains an icon and text. This template is for use with a ListView that has a list layout. For additional templates, see Item templates for grid layouts and Item templates for list layouts.

To use the template

To use the template, copy the HTML and the CSS styles into your project. The HTML includes a ListView that's designed to be used with the template. After you copy the HTML, set the ListView control's itemDataSource to your app's data source and update the template's data-win-bind attributes so they work with your data.

For the template to work properly, assign the win-selectionstylefilled class to your ListView.

HTML


<!-- Item template -->
<div id="imageTextListLandingTemplate" 
     data-win-control="WinJS.Binding.Template">
  <div class="imageTextListLandingSnap">
    <img class="imageTextListLandingSnapImage" 
         data-win-bind="src: icon"/>
    <div class="imageTextListLandingSnapText" 
         data-win-bind="innerText: largeText"></div>
  </div>
</div>

<!-- ListView -->
<div id="imageTextListLandingSnap"  
    class="win-selectionstylefilled"
    style="position: relative; left: -1px; top: 129px; border: none"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource: list.dataSource, 
        itemTemplate: select('#imageTextListLandingTemplate'), 
        layout: { type: WinJS.UI.ListLayout } }">
</div>

CSS


/* overall list dimensions */
#imageTextListLandingSnap {
    margin-left: 110px;
    width: 323px; /* +31 px to account for margins applied by ListView */
    height: 633px;
}

/*-------------------------------------------------------------------------------------------*/
/* imageTextList-landingSnap - used in app template landing page snap view                   */
/*-------------------------------------------------------------------------------------------*/

/* style the background color of the filled-selection style items */
.win-selectionstylefilled :not(.win-footprint).win-container {
    background-color: transparent;
}

.win-selectionstylefilled .win-container.win-swipe:hover {
    background-color: transparent;
}

/* margins between items */
#imageTextListLandingSnap .win-container {
    margin-top: 0px;
    margin-bottom: 0px;
}

    /* hide the hover outline for edge-to-edge items */
    #imageTextListLandingSnap .win-container:hover {
        outline: none;
    }

/* individual item dimensions */
.imageTextListLandingSnap {
    display: -ms-flexbox;
    padding: 5px;
    width: 282px;
    height: 50px;
}

    /* image: icon */
    .imageTextListLandingSnap img.imageTextListLandingSnapImage {
        width: 40px;
        height: 40px;
        margin: 5px;
    }

    /* Text line 1 */
    .imageTextListLandingSnap .imageTextListLandingSnapText {
        -ms-flex: 1;
        height: 40px;
        margin: 4px 5px 5px 5px;
        overflow: hidden;
    }

/* style the focus visual for edge-to-edge items */
#imageTextListLandingSnap .win-focusedoutline {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    left: 2px;
    top: 2px;
    z-index: 5;
}


Related topics

Item templates for grid layouts
Item templates for list layouts

 

 

Show:
© 2014 Microsoft