Modello con riquadri di testo (pagina di destinazione) (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Definisce un elemento che rappresenta un riquadro. L'elemento contiene una sezione con testo più grande in grassetto e una con testo più piccolo. Questo modello è destinato all'uso con un ListView con layout griglia. Per ulteriori modelli, vedi Modelli di elementi per layout griglia e Modelli di elementi per layout elenco.
Per usare il modello
Per usare il modello, copia il codice HTML e gli stili CSS nel tuo progetto. Il codice HTML include un elemento ListView progettato per l'uso con questo modello. Dopo aver copiato il codice HTML, imposta la proprietà itemDataSource del controllo ListView sull'origine dati dell'app e aggiorna gli attributi data-win-bind del modello in modo che funzionino con i dati.
HTML
<!-- Item template -->
<div id="textTileLandingTemplate"
data-win-control="WinJS.Binding.Template">
<div class="textTileLanding">
<h2 class="textTileLandingTextStrong"
data-win-bind="innerText: largeText">
</h2>
<h6 class="textTileLandingTextLight"
data-win-bind="innerText: smallText">
</h6>
</div>
</div>
<!-- ListView -->
<div id="textTileLanding"
style="position: relative; left: -1px; top: 139px; border: none"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: list.dataSource,
itemTemplate: select('#textTileLandingTemplate'),
layout: { type: WinJS.UI.GridLayout } }">
</div>
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;
}
}