日期html模板,日期缩放模板 (HTML)

日期缩放模板 (HTML)

03/04/2016

本文内容

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

在 ListView 中定义一个为 SemanticZoom 提供缩小的日期列表的项目。 此模板可以与具有网格布局的 ListView 结合使用。有关更多模板，请参阅网格布局的项模板和列表布局的项模板。

要使用该模板

要使用该模板，需将 HTML 和 CSS 样式复制到你的项目中。HTML 包含专用于该模板的 ListView。

HTML

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;

}

}

相关主题