文本磁贴(登录)模板 (HTML)

03/04/2016

本文内容

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

定义一个表示磁贴的项，该项包含两部分，一部分是较大的粗体文本，另一部分是较小的文本。 此模板可以与具有网格布局的 ListView 结合使用。有关更多模板，请参阅网格布局的项模板和列表布局的项模板。

要使用该模板

要使用该模板，需将 HTML 和 CSS 样式复制到你的项目中。HTML 包含专用于该模板的 ListView。在你复制 HTML 之后，将 ListView 控件的 itemDataSource 设置为你的应用的数据源，并更新模板的 data-win-bind 属性以便它们能使用你的数据。

HTML

CSS

/* overall list dimensions */

#textTileLanding {

width: 1366px;

height: 538px;

}

/*-------------------------------------------------------------------------------------------*/

/* textTile-landing - used in app template landing page */

/*-------------------------------------------------------------------------------------------*/

/* starting margin */

#textTileLanding .win-horizontal.win-viewport .win-surface {

margin: 0px 115px;

}

/* individual item dimensions */

.textTileLanding {

display: -ms-flexbox;

-ms-flex-pack: end;

-ms-flex-direction: column;

width: 220px;

height: 220px;

padding: 15px;

overflow: hidden;

background-color: rgba(128,128,128,1.0);

}

/* text line 1 */

.textTileLanding .textTileLandingTextStrong {

display: -ms-flexbox;

-ms-flex-pack: end;

-ms-flex-direction: column;

overflow: hidden;

line-height: 24pt;

color: rgba(255,255,255,0.8);

}

/* text line 2 */

.textTileLanding .textTileLandingTextLight {

height: 15px;

white-space: nowrap;

color: rgba(255,255,255,0.49);

}

/* High Contrast */

@media (-ms-high-contrast) {

/* add a border to the item */

.textTileLanding {

padding: 13px;

background-color: Window;

border: 2px solid WindowText;

}

/* text line 1: use high contrast colors */

.textTileLanding .textTileLandingTextStrong {

color: WindowText;

}

/* text line 2: use high contrast colors */

.textTileLanding .textTileLandingTextLight {

color: WindowText;

}

}

相关主题