Plantilla de icono de texto (lista de carpetas) (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
Define un elemento que representa un icono. El elemento contiene un encabezado. Esta plantilla se usa con una ListView que tenga un diseño de cuadrícula. Para plantillas adicionales, consulte el tema sobre plantillas de elementos para diseños de cuadrícula y plantillas de elementos para diseños de listas.
Para usar la plantilla
Para usar la plantilla, copia el HTML y los estilos CSS en el proyecto. El HTML incluye un ListView que está diseñado para usarse con la plantilla. Después de copiar el HTML, establece la propiedad itemDataSource del control ListView en el origen de datos de la aplicación y actualiza los atributos data-win-bind de la plantilla para que funcionen con los datos.
HTML
<!-- Item template -->
<div id="textTileListFolderTemplate"
data-win-control="WinJS.Binding.Template">
<div class="textTileListFolder">
<h6 data-win-bind="innerText: largeText"></h6>
</div>
</div>
<!-- ListView -->
<div id="textTileListFolder"
style="position: relative; left: -1px; top: 134px; border: none"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: list.dataSource,
itemTemplate: select('#textTileListFolderTemplate'),
layout: { type: WinJS.UI.GridLayout } }">
</div>
CSS
/* overall list dimensions */
#textTileListFolder {
width: 1366px;
height: 578px;
position: absolute;
top: -5px;
}
/*-------------------------------------------------------------------------------------------*/
/* textTile-listFolder - used in Picker list view */
/*-------------------------------------------------------------------------------------------*/
/* starting margin */
#textTileListFolder .win-horizontal.win-viewport .win-surface {
margin: 0px 100px;
}
#textTileListFolder .win-horizontal.win-viewport .win-container {
margin: 5px 20px;
}
/* individual item dimensions */
.textTileListFolder {
width: 270px;
height: 60px;
overflow: hidden;
padding: 5px 15px;
background-color: #333333;
display: -ms-flexbox;
-ms-flex-pack: end;
-ms-flex-direction: column;
color: rgba(255,255,255,0.8);
}
/* High Contrast */
@media (-ms-high-contrast) {
/* add a border to the item */
.textTileListFolder {
padding: 3px 13px;
color: WindowText;
background-color: Window;
border: 2px solid WindowText;
}
}