Modèle de zoom sur les dates (HTML)
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Définit l’élément d’un objet ListView qui fournit la liste de dates en affichage zoom arrière pour appliquer un zoom SemanticZoom. Ce modèle doit être utilisé avec un objet ListView ayant une disposition en grille. Pour obtenir des modèles supplémentaires, voir Modèles d’éléments pour les dispositions en grille et Modèles d’éléments pour les dispositions en liste.
Pour utiliser le modèle
Pour utiliser le modèle, copiez le code HTML et les styles CSS dans votre projet. Le code HTML inclut un élément ListView conçu pour être utilisé avec le modèle.
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;
}
}