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
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 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
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.
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
margin: 5px;
}
L’aspetto della singola miniatura è controllato con il seguente selettore di classe CSS:
.s7ecatalogsearchviewer .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.
La miniatura supporta state
selettore di attributi, 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.
.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
Proprietà CSS |
Descrizione |
---|---|
font-family |
Nome carattere. |
font-size |
Dimensione del carattere. |
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
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.
.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
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.
.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
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 . |
Il pollice supporta state
selettore di attributi, 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.
.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
, bottom
e right
proprietà. 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 . |
Questi pulsanti supportano state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse ai diversi stati del pulsante up
, down
, over
e disabled
.
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);
}