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 sovrapposta all’interfaccia utente del visualizzatore. La logica di visualizzazione ridimensiona automaticamente il contenitore delle miniature sull’intera area di visualizzazione.

L’aspetto del contenitore delle miniature è controllato dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7thumbnailgridview

Proprietà CSS
Descrizione
top
Offset verticale del contenitore delle miniature dalla parte superiore del visualizzatore.
margin-top
Il margine superiore.
margin-left
Il margine sinistro.
margine destro
Il margine destro.
margin-bottom
Il margine inferiore.
background-color
Colore di sfondo dell'area miniature.

Esempio: per impostare le miniature in modo che abbiano una distanza di 32 pixel dalla parte superiore, 5 margini pixel a sinistra e a destra e 8 margini pixel nella parte inferiore, 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 dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell

Proprietà CSS
Descrizione
margine
Dimensione del margine orizzontale e verticale intorno a ciascuna miniatura. La spaziatura effettiva delle miniature orizzontale è uguale alla somma del margine sinistro e destro impostato per .s7thumbcell . La spaziatura verticale delle miniature è uguale alla somma dei margini superiore e inferiore.

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

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

L’aspetto di una singola miniatura viene controllato con il seguente selettore di classe CSS:

.s7ecatalogviewer .s7thumbnailgridview .s7thumb

Proprietà CSS
Descrizione
width
Larghezza della miniatura.
height
Altezza della miniatura.
bordo
Bordo della miniatura.
background-color
Colore di sfondo della miniatura.

Sui dispositivi touch, quando viene ruotato in modalità verticale, lo spettatore può ridimensionare le miniature alla metà di quanto configurato nel caso decida di dividere la visualizzazione del catalogo in singole pagine.

NOTE
La miniatura supporta state selettore di attributi, che può essere utilizzato per applicare skin diversi a stati di miniature diversi. In particolare: state="selected" corrisponde alla miniatura dell'immagine attualmente visualizzata nella visualizzazione principale, state="default" corrisponde al resto delle miniature, e state="over" al passaggio del mouse.

Esempio: per impostare miniature di 120 x 85 pixel con sfondo bianco, bordo standard grigio chiaro e bordo selezionato 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 delle miniature è controllato dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7thumbnailgridview .s7label

Proprietà CSS
Descrizione
font-family
Nome font.
font-size
Dimensione font.

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

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

Se sono presenti più miniature di quelle che possono rientrare verticalmente nella visualizzazione, la barra di scorrimento verticale viene visualizzata sul lato destro. L’aspetto dell’area della barra di scorrimento è controllato dal seguente selettore di classe CSS:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar

Proprietà CSS
Descrizione
width
Larghezza della barra di scorrimento.
top
La barra di scorrimento verticale si sposta dalla parte superiore dell'area delle miniature.
bottom
La barra di scorrimento verticale si sposta dalla parte inferiore dell'area delle miniature.
destra
La barra di scorrimento orizzontale si sposta dal bordo destro dell'area delle miniature.

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. Il brano è controllato con il seguente selettore di classe CSS:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Proprietà CSS
Descrizione
width
Larghezza del brano della barra di scorrimento.
background-color
Colore di sfondo del brano della barra di scorrimento.

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

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Proprietà CSS
Descrizione
width
Larghezza del pollice della barra di scorrimento.
height
Altezza della miniatura della barra di scorrimento.
riempimento superiore
Spaziatura verticale tra la parte superiore del brano della barra di scorrimento.
padding-bottom
Spaziatura verticale tra la parte inferiore della traccia della barra di scorrimento.
background-image
Immagine visualizzata per un determinato stato del pollice.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Vedi anche Spunti CSS.

NOTE
Il miniatura supporta state selettore di attributi, che può essere utilizzato per applicare skin diversi agli stati dei pollici up, down, over, e disabled.

Esempio: per impostare una barra di scorrimento di 28 x 45 pixel, con margini di 10 pixel in alto e in basso e un disegno diverso 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 dai seguenti selettori di classi 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 di visualizzazione li posiziona automaticamente.

Proprietà CSS
Descrizione
width
Larghezza del pulsante.
height
Altezza del pulsante.
background-image
Immagine visualizzata per un determinato stato del pollice.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Vedi anche Spunti CSS.

NOTE
Questi pulsanti supportano state selettore di attributi, che può essere utilizzato per applicare interfacce diverse ai diversi stati dei pulsanti up, down, over, e disabled.

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

Esempio: per impostare pulsanti di scorrimento di 28 x 32 pixel con 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8