Language: HTML | XAML

Textkachelvorlage (Angebot) (HTML)

Applies to Windows only

Definiert ein Element, das eine Kachel darstellt. Das Element enthält einen Abschnitt mit größerem, fett formatiertem Text und einen Abschnitt mit kleinerem Text. Diese Vorlage ist für ein ListView-Steuerelement mit Rasterlayout gedacht. Weitere Vorlagen finden Sie unter Elementvorlagen für Rasterlayouts und Elementvorlagen für Listenlayouts.

So verwenden Sie die Vorlage

Um die Vorlage zu verwenden, kopieren Sie den HTML-Code und die CSS-Formatvorlage in Ihr Projekt. Der HTML-Code enthält ein ListView-Steuerelement, das zusammen mit der Vorlage verwendet werden kann. Nachdem Sie den HTML-Code kopiert haben, legen Sie die itemDataSource-Eigenschaft des ListView-Steuerelements auf die Datenquelle Ihrer App fest, und aktualisieren Sie die data-win-bind-Attribute der Vorlage entsprechend Ihren Daten.

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;
        }
}


Verwandte Themen

Elementvorlagen für Rasterlayouts
Elementvorlagen für Listenlayouts

 

 

Anzeigen:
© 2015 Microsoft