Miniature thumbnails

Le miniature sono costituite da una griglia di miniature con una barra di scorrimento opzionale sul lato destro per consentire lo scorrimento verticale.

Per attivare o disattivare le miniature, fai clic sul pulsante delle miniature nella barra di controllo principale. Quando le miniature sono attive, vengono visualizzate in modalità modale sovrapposte all'interfaccia utente del visualizzatore. La logica visualizzatore ridimensiona automaticamente il contenitore delle miniature nell'intera area visualizzatore.

L'aspetto del contenitore delle miniature è controllato con la seguente classe CSS selettore:

.s7ecatalogviewer .s7thumbnailgridview

Esempio: per impostare le miniature in modo che abbiano uno scostamento di 32 pixel dall'alto, margini di 5 pixel a sinistra e a destra e margine di 8 pixel in basso, con 0xDDDDDD sfondo.

.s7ecatalogviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

La spaziatura tra le miniature è controllata con la seguente classe CSS selettore:

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell

Esempio: per impostare uno spazio di 10 pixel sia verticalmente che orizzontalmente.

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

L'aspetto delle singole miniature è controllato con la seguente classe CSS selettore:

.s7ecatalogviewer .s7thumbnailgridview .s7thumb

Sui dispositivi touch, quando ruota in modalità verticale, il visualizzatore può ridimensionare le miniature alla metà di quanto configurato nel caso in cui decida di suddividere il catalogo distribuito in singole pagine.

Esempio: per impostare miniature di 120 x 85 pixel con sfondo bianco, bordo standard grigio chiaro e bordo selezionata in grigio scuro.

.s7ecatalogviewer .s7thumbnailgridview .s7thumb {
 width:120px;
 height:85px;
 background-color: rgb(255, 255, 255);
 border: solid 1px #999999;
}
.s7ecatalogviewer .s7thumbnailgridview .s7thumb[state="selected"]{
 border: solid 2px #666666;
}

L'aspetto dell'etichetta della miniatura è controllato con i seguenti selettore di classe CSS:

.s7ecatalogviewer .s7thumbnailgridview .s7label

Esempio - per impostare le etichette per l'utilizzo di 14 pixel Helvetica® font.

.s7ecatalogviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

Se sono presenti più miniature di quelle che possono essere inserite verticalmente nella visualizzazione, le miniature eseguono il rendering della barra di scorrimento verticale sul lato destro. L'aspetto dell'area della barra di scorrimento è controllato con la seguente classe CSS selettore:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar

Esempio: per impostare una barra di scorrimento larga 28 pixel con un margine di 8 pixel dalla parte superiore, destra e inferiore dell'area delle miniature.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

La traccia della barra di scorrimento è l'area compresa tra i pulsanti di scorrimento superiore e inferiore. Il componente imposta automaticamente la posizione e l'altezza della traccia. La traccia è controllata con la seguente classe CSS selettore:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Esempio: per impostare una traccia della barra di scorrimento larga 28 pixel e con uno sfondo grigio semitrasparente.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

Il pollice della barra di scorrimento si sposta verticalmente all'interno dell'area della traccia di scorrimento. La sua posizione verticale è completamente controllata dalla logica del componente, tuttavia, l'altezza del pollice non cambia dinamicamente a seconda della quantità di contenuto. L'altezza del pollice e altri aspetti sono controllati con la seguente classe CSS selettore:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Esempio: per impostare un pollice della barra di scorrimento di 28 x 45 pixel, con margini di 10 pixel in alto e in basso e con una grafica diversa per ogni stato.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

L'aspetto dei pulsanti di scorrimento superiore e inferiore è controllato con i seguenti selettori di classe CSS:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Non è possibile posizionare i pulsanti di scorrimento utilizzando CSS top, left, bottom, e right proprietà. Al contrario, la logica visualizzatore li posiziona automaticamente.

Il suggerimento strumento pulsante può essere localizzato. Per ulteriori informazioni, consulta Localizzazione di utente elementi dell'interfaccia.

Esempio - per impostare pulsanti di scorrimento che sono 28 x 32 pixel e hanno grafica diversa per ogni stato.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}