Date zoom template (HTML)

Applies to Windows only

Defines an item in a ListView that provides the zoomed out, date listing for a SemanticZoom. This template is for use with a ListView that has a grid 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.

HTML


<!-- Item template -->
<div id="semanticZoomDateTemplate" data-win-control="WinJS.Binding.Template">
    <div class="semanticZoomDate">
        <div class="semanticZoomDateText">
            <h2 class="semanticZoomDateDayMonth" data-win-bind="innerText: dayMonth"></h2>
            <h2 class="semanticZoomDateYear" data-win-bind="innerText: year"></h2>
        </div>
    </div>
</div>

<!-- ListView -->
<div id="semanticZoomDate" style="position: relative; left: -1px; border: none"
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ itemTemplate: select('#semanticZoomDateTemplate'), layout: { type: WinJS.UI.GridLayout } }">
</div>

CSS


/* overall grid dimensions */
#semanticZoomDate {
    position: absolute;
    top: calc(50% - 70px);
    width: 1366px;
    height: 158px;
}

    /*-------------------------------------------------------------------------------------------*/
    /* semantic zoom date template */
    /*-------------------------------------------------------------------------------------------*/
    /* starting margin */
    #semanticZoomDate .win-horizontal.win-viewport .win-surface {
        margin: 0px 115px;
    }

/* individual item */
.semanticZoomDate {
    color: white;
    width: 170px;
    height: 110px;
    padding: 10px;
    overflow: hidden;
    display: -ms-flexbox;
    -ms-flex-pack: end;
    -ms-flex-direction: column;
    background-color: rgba(70,23,180,1.0);
}

    /* Text line 1: month */
    .semanticZoomDate .semanticZoomDateDayMonth {
        width: 170px;
        white-space: nowrap;
    }

    /* Text line 2: year */
    .semanticZoomDate .semanticZoomDateYear {
        width: 170px;
        white-space: nowrap;
    }

/* High Contrast */
@media (-ms-high-contrast) {
    /* add a border to the item */
    .semanticZoomDate {
        padding: 8px;
        color: ButtonText;
        background-color: ButtonFace;
        border: 2px solid ButtonText;
    }

    /* outline shown on mouse hover */
    #semanticZoomDate .win-container:hover {
        outline: 3px solid Highlight;
    }

    /* use high contrast colors for hover state */
    .semanticZoomDate:hover {
        background-color: Highlight;
        color: HighlightText;
        border-color: HighlightText;
    }

    /* style the focus visual for edge-to-edge items */
    #semanticZoomDate .win-focusedoutline {
        outline-color: WindowText;
    }
}


Related topics

Item templates for grid layouts
Item templates for list layouts

 

 

Show:
© 2014 Microsoft