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

Plantilla de lista de imagen y texto (archivo de lista) (aplicaciones de la Tienda Windows con JavaScript y HTML)

Define un elemento que representa un archivo: un icono, el nombre, una fecha y su tamaño. 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 tu proyecto. El HTML incluye una ListView que se diseñó para usarla con la plantilla. Después de copiar el HTML, establece el atributo itemDataSource del control de ListView en el origen de datos de tu aplicación y actualiza los atributos data-win-bind de la plantilla para que funcionen con tus datos.

HTML


<!-- Item template -->
<div id="imageTextListFileTemplate" 
     data-win-control="WinJS.Binding.Template">
  <div class="imageTextListFile">
    <img class="imageTextListFileImage" data-win-bind="src: icon"/>
    <div class="imageTextListFileTextArea">
      <h3 class="imageTextListFileTextName" 
          data-win-bind="innerText: textName">        
      </h3>
      <h6 class="imageTextListFileTextDate" 
          data-win-bind="innerText: textDate">
      </h6>
      <h6 class="imageTextListFileTextSize" 
          data-win-bind="innerText: textSize">        
      </h6>
    </div>
  </div>
</div>

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

CSS


/* overall list dimensions */
#imageTextListFile {
    width: 1366px;
    height: 578px;
}

    /*-------------------------------------------------------------------------------------------*/
    /* imageText-listFile - used in Picker list */
    /*-------------------------------------------------------------------------------------------*/
    /*starting margin */
    #imageTextListFile .win-horizontal.win-viewport .win-surface {
        margin: 0px 100px;
    }

    #imageTextListFile .win-horizontal.win-viewport .win-container {
        margin: 5px 10px;
    }

/*individual item dimensions */
.imageTextListFile {
    display: -ms-grid;
    width: 290px;
    height: 60px;
    overflow: hidden;
    padding: 5px;
}

    /* image */
    .imageTextListFile img.imageTextListFileImage {
        -ms-grid-column: 1;
        margin: 5px;
        width: 40px;
        height: 40px;
    }

    .imageTextListFile .imageTextListFileTextArea {
        -ms-grid-column: 2;
        margin: 0px 5px 0px 5px;
    }

        /* text line 1 */
        .imageTextListFile .imageTextListFileTextArea .imageTextListFileTextName {
            width: 230px;
            white-space: nowrap;
        }

        /* text line 2 */
        .imageTextListFile .imageTextListFileTextArea .imageTextListFileTextDate {
            width: 230px;
            overflow: hidden;
        }

        /* text line 3 */
        .imageTextListFile .imageTextListFileTextArea .imageTextListFileTextSize {
            width: 230px;
            overflow: hidden;
        }


Temas relacionados

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

 

 

Mostrar:
© 2018 Microsoft