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:

.s7ecatalogviewer .s7thumbnailgridview

Proprietà CSS

Descrizione

top

Offset verticale del contenitore miniature dalla parte superiore del visualizzatore.

margine superiore

Il margine superiore.

margine sinistro

Il margine sinistro.

margine destro

Il margine destro.

margine inferiore

Il margine inferiore.

colore di sfondo

Colore di sfondo dell'area miniature.

Esempio: per impostare le miniature in modo che siano offset 32 pixel dall’alto, i margini di 5 pixel a sinistra e a destra e il margine di 8 pixel sul fondo, 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 orizzontale effettiva delle miniature è uguale alla somma del margine sinistro e destro impostato per .s7thumbcell . La spaziatura verticale delle miniature è uguale alla somma del margine superiore e inferiore.

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

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

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

.s7ecatalogviewer .s7thumbnailgridview .s7thumb

Proprietà CSS

Descrizione

width

Larghezza della miniatura.

height

Altezza della miniatura.

border

Bordo della miniatura.

colore di sfondo

Colore di sfondo della miniatura.

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.

NOTA

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

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.

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

.s7ecatalogviewer .s7thumbnailgridview .s7label

Proprietà CSS

Descrizione

font-family

Nome carattere.

font-size

Dimensione del carattere.

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; 
}

Nel caso in cui siano 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:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar

Proprietà CSS

Descrizione

larghezza

Larghezza della barra di scorrimento.

top

Offset barra di scorrimento verticale dalla parte superiore dell'area miniature.

bottom

Offset barra di scorrimento verticale dal fondo dell'area miniature.

right

Offset della barra di scorrimento orizzontale dal bordo destro dell'area miniature.

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.

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

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Proprietà CSS

Descrizione

larghezza

Larghezza della traccia della barra di scorrimento.

colore di sfondo

Colore di sfondo della traccia della barra di scorrimento.

Esempio: per impostare una traccia della barra di scorrimento larga 28 pixel e con 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 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:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Proprietà CSS

Descrizione

larghezza

Larghezza del pollice della barra di scorrimento.

altezza

Altezza della miniatura della barra di scorrimento.

imbottitura superiore

Spaziatura verticale tra la parte superiore della traccia della barra di scorrimento.

imbottitura inferiore

Spaziatura verticale tra il fondo della traccia della barra di scorrimento.

immagine di sfondo

Immagine visualizzata per un dato stato pollice.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Vedi anche Sprite CSS .

NOTA

La funzione Thumb supporta il selettore di attributi state, che può essere utilizzato per applicare skin diversi agli stati della miniatura up, down, over e disabled.

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.

.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 in alto e in basso è controllato con i seguenti selettori di classe CSS:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

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

Proprietà CSS

Descrizione

larghezza

Larghezza del pulsante.

altezza

Altezza del pulsante.

immagine di sfondo

Immagine visualizzata per un dato stato pollice.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Vedi anche Sprite CSS .

NOTA

Questi pulsanti supportano il selettore di attributi state , 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. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio : per impostare pulsanti di scorrimento con 28 x 32 pixel e immagini diverse 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); 
}

In questa pagina