Miniature

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

Le miniature vengono attivate facendo 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 del visualizzatore ridimensiona automaticamente il contenitore miniature all’intera area del visualizzatore.

L’aspetto del contenitore miniature è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview

Esempio: per impostare le miniature in modo che lo scostamento di 32 pixel dall’alto, di 5 pixel a sinistra e a destra e di 8 pixel al margine inferiore, con 0xDDDDDD background.

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

La spaziatura tra le miniature è controllata dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

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

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

L’aspetto della singola miniatura è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

Sui dispositivi touch, quando viene ruotato in modalità verticale, il visualizzatore può ridimensionare le miniature a metà di ciò che è configurato nel caso in cui decida di dividere il catalogo distribuito in singole pagine.

Esempio : per impostare miniature con 120 x 85 pixel, sono disponibili uno sfondo bianco, un bordo standard grigio chiaro e un bordo selezionato grigio scuro.

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

L’aspetto dell’etichetta miniatura è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

Esempio: per impostare le etichette in modo da utilizzare il font Helvetica® a 14 pixel.

.s7ecatalogsearchviewer .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 riproducono la barra di scorrimento verticale sul lato destro. L’aspetto dell’area della barra di scorrimento è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

Esempio: per impostare una barra di scorrimento larga 28 pixel e con un margine di 8 pixel rispetto all’area delle miniature in alto, a destra e in basso.

.s7ecatalogsearchviewer .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 del brano. La traccia viene controllata con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

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

.s7ecatalogsearchviewer .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 della colonna non cambia dinamicamente a seconda della quantità di contenuto. L’altezza del pollice e altri aspetti sono controllati con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

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

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

L’aspetto dei pulsanti di scorrimento in alto e in basso è controllato con i seguenti selettori di classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

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

La descrizione comando del pulsante può essere localizzata. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio : per impostare pulsanti di scorrimento con 28 x 32 pixel e immagini diverse per ogni stato.

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