Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Plantilla de zoom de fecha (aplicaciones de la Tienda Windows con JavaScript y HTML)

Define un elemento en un objeto ListView que proporciona la lista de fechas reducida para un objeto SemanticZoom. Esta plantilla se usa con un objeto 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 tu proyecto. El HTML incluye una ListView que se diseñó para usarla con la plantilla.

HTML


<!-- Item template -->
<div id="semanticZoomDateTemplate" data-win-control="WinJS.Binding.Template">
    <div class="semanticZoomDate">
        <div class="semanticZoomDateText">
            <h2 class="semanticZoomDateDayMonth" data-win-bind="innerText: dayMonth"></h2>
            <h2 class="semanticZoomDateYear" data-win-bind="innerText: year"></h2>
        </div>
    </div>
</div>

<!-- ListView -->
<div id="semanticZoomDate" style="position: relative; left: -1px; border: none"
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ itemTemplate: select('#semanticZoomDateTemplate'), layout: { type: WinJS.UI.GridLayout } }">
</div>

CSS


/* overall grid dimensions */
#semanticZoomDate {
    position: absolute;
    top: calc(50% - 70px);
    width: 1366px;
    height: 158px;
}

    /*-------------------------------------------------------------------------------------------*/
    /* semantic zoom date template */
    /*-------------------------------------------------------------------------------------------*/
    /* starting margin */
    #semanticZoomDate .win-horizontal.win-viewport .win-surface {
        margin: 0px 115px;
    }

/* individual item */
.semanticZoomDate {
    color: white;
    width: 170px;
    height: 110px;
    padding: 10px;
    overflow: hidden;
    display: -ms-flexbox;
    -ms-flex-pack: end;
    -ms-flex-direction: column;
    background-color: rgba(70,23,180,1.0);
}

    /* Text line 1: month */
    .semanticZoomDate .semanticZoomDateDayMonth {
        width: 170px;
        white-space: nowrap;
    }

    /* Text line 2: year */
    .semanticZoomDate .semanticZoomDateYear {
        width: 170px;
        white-space: nowrap;
    }

/* High Contrast */
@media (-ms-high-contrast) {
    /* add a border to the item */
    .semanticZoomDate {
        padding: 8px;
        color: ButtonText;
        background-color: ButtonFace;
        border: 2px solid ButtonText;
    }

    /* outline shown on mouse hover */
    #semanticZoomDate .win-container:hover {
        outline: 3px solid Highlight;
    }

    /* use high contrast colors for hover state */
    .semanticZoomDate:hover {
        background-color: Highlight;
        color: HighlightText;
        border-color: HighlightText;
    }

    /* style the focus visual for edge-to-edge items */
    #semanticZoomDate .win-focusedoutline {
        outline-color: WindowText;
    }
}


Temas relacionados

Plantillas de elemento para diseños de cuadrícula
Plantillas de elemento para diseños de lista

 

 

Mostrar:
© 2018 Microsoft