Datumszoomvorlage (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]
Definiert ein Element in einer ListView für die verkleinerte Auflistung nach Datum für einen SemanticZoom. Diese Vorlage wird mit einer ListView mit Rasterlayout verwendet. Weitere Vorlagen finden Sie unter Elementvorlagen für Rasterlayouts und Elementvorlagen für Listenlayouts.
So verwenden Sie die Vorlage
Um die Vorlage zu verwenden, kopieren Sie den HTML-Code und die CSS-Formatvorlage in Ihr Projekt. Der HTML-Code enthält ein ListView-Steuerelement, das zusammen mit der Vorlage verwendet werden kann.
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;
}
}