Modelo de lista de texto (pasta de email) (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]
Define um item que representa uma pasta de email em uma lista de pastas de email. Este modelo deve ser usado com um ListView que tenha layout de lista. Para obter mais modelos, veja Modelos de item para layouts de grade e Modelos de item para layouts de lista.
Usar o modelo
Para usar o modelo, copie o código HTML e os estilos CSS em seu projeto. O HTML inclui um ListView que foi criado para ser usado com o modelo. Depois de copiar o HTML, defina os itemDataSource do controle ListView em suas fontes de dados de aplicativo e atualize os atributos data-win-bind do modelo para que eles funcionem com seus dados.
Para que o modelo funcione corretamente, atribua a classe win-selectionstylefilled ao seu ListView.
HTML
<!-- Item template -->
<div id="textListMailFolderTemplate"
data-win-control="WinJS.Binding.Template">
<div class="textListMailFolder">
<h2 data-win-bind="innerText: text"></h2>
</div>
</div>
<!-- ListView -->
<div id="textListMailFolder"
class="win-selectionstylefilled"
style="position: relative; left: -1px; top: 129px; border: none"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: list.dataSource,
itemTemplate: select('#textListMailFolderTemplate'),
layout: { type: WinJS.UI.ListLayout } }">
</div>
CSS
/* overall list dimensions */
#textListMailFolder {
margin-left: 110px;
width: 308px; /*+18 px to account for scrollbar*/
height: 632px;
}
/*-------------------------------------------------------------------------------------------*/
/* textList-mailFolder - used for Mail folder*/
/*-------------------------------------------------------------------------------------------*/
/* style the background color of the filled-selection style items */
.win-selectionstylefilled :not(.win-footprint).win-container {
background-color: transparent;
}
.win-selectionstylefilled .win-container.win-swipe:hover {
background-color: transparent;
}
/* individual item dimensions */
.textListMailFolder {
width: 100%;
height: 40px;
padding: 4px 10px;
overflow: hidden;
}