Sommario

Il sommario è un pulsante situato nella barra di controllo principale. Quando attivato, viene visualizzato un pannello a discesa con un elenco di indici ed etichette di pagina.

In base alla configurazione, l’elenco può contenere tutte le pagine presenti nel catalogo o solo quelle che hanno etichette esplicite definite. Nei sistemi desktop, se l’elenco è più lungo dello spazio disponibile sullo schermo, viene visualizzata una barra di scorrimento a destra.

La posizione e le dimensioni del pulsante del sommario nell’interfaccia utente del visualizzatore vengono controllate con il seguente selettore di classe CSS:

.s7ecatalogviewer .s7tableofcontents

Proprietà CSS del sommario

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio: impostare un pulsante sommario posizionato a 4 pixel dal basso e a 43 pixel dalla sinistra della barra di controllo principale; le dimensioni sono di 28 x 28 pixel e per ciascuno dei quattro stati del pulsante viene visualizzata un’immagine diversa:

.s7ecatalogviewer .s7tableofcontents { 
margin-top: 4px; 
margin-left: 10px; width: 28px; 
 height: 28px; 
} 
.s7ecatalogviewer .s7tableofcontents[state='up'] { 
background-image:url(images/v2/TableOfContents_dark_up.png); 
} 
.s7ecatalogviewer .s7tableofcontents[state='over'] { 
background-image:url(images/v2/TableOfContents_dark_over.png); 
} 
.s7ecatalogviewer .s7tableofcontents[state='down'] { 
background-image:url(images/v2/TableOfContents_dark_down.png); 
} 
.s7ecatalogviewer .s7tableofcontents[state='disabled'] { 
background-image:url(images/v2/TableOfContents_dark_disabled.png); 
}

L’aspetto del pannello a discesa è controllato con il seguente selettore di classe CSS:

 .s7ecatalogviewer .s7tableofcontents .s7panel

Proprietà CSS del pannello a discesa

Esempio : configura un pannello a discesa con sfondo nero semitrasparente, un margine di 5 pixel intorno al contenuto e un’ombra esterna:

.s7ecatalogviewer .s7tableofcontents .s7panel { 
 background-color: rgba(0, 0, 0, 0.5); 
 margin: 5px; 
 box-shadow: 2px 2px 3px #c0c0c0; 
}

L’aspetto e l’aspetto dei singoli elementi sono controllati dal seguente selettore di classi CSS:

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7item

Proprietà CSS dell’elemento

Esempio: imposta un elemento a discesa con un carattere Helvetica da 14 pixel e un'altezza di 19 pixel. Quando è selezionato, un elemento presenta uno sfondo grigio scuro al passaggio del mouse e uno sfondo grigio chiaro:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7item { 
font-family: Helvetica,sans-serif; 
font-size: 14px; 
height: 19px; 
} 
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="over"] { 
background-color: rgb(102, 102, 102); 
} 
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="selected"] { 
background-color: rgb(178, 178, 178); 
}

Un elemento che mostra l’indice della pagina è controllato con il seguente selettore di classe CSS:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index

Proprietà CSS dell’indice della pagina

Esempio 1: imposta un indice di pagina con una larghezza minima di 40 pixel, una larghezza massima di 70 pixel e un margine di 5 pixel sul lato destro:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index { 
max-width: 70px; 
min-width: 40px; 
padding-right: 5px; 
}

Esempio 2 - Nascondi indice pagina:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index { 
display: none; 
}

L’etichetta della pagina è controllata con il seguente selettore di classe CSS:

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7label

Proprietà CSS dell’etichetta di pagina

Esempio: imposta un indice di pagina con una larghezza minima di 40 pixel e una larghezza massima di 240 pixel:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7label { 
min-width: 40px; 
max-width: 240px; 
}

Nel caso in cui siano presenti più elementi di quelli che possono essere inseriti verticalmente nel pannello a discesa e il sistema sia un desktop, il componente esegue il rendering di una barra di scorrimento verticale sul lato destro del pannello. L’aspetto dell’area della barra di scorrimento è controllato con il seguente selettore di classe CSS:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar

Proprietà CSS della barra di scorrimento

Esempio: imposta una barra di scorrimento larga 28 pixel e priva di un margine per l’area superiore, destra o inferiore del pannello:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar { 
 top:0px; 
 bottom:0px; 
 right:0px; 
 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 .s7tableofcontents .s7scrollbar .s7scrolltrack

Proprietà CSS della traccia di scorrimento

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

.s7ecatalogviewer .s7tableofcontents .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 è controllata dalla logica del componente. Tuttavia, l’altezza della miniatura non cambia dinamicamente a seconda della quantità di contenuto. Puoi configurare l’altezza del pollice e altri aspetti con il seguente selettore di classe CSS:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

Proprietà CSS della barra di scorrimento

Esempio: imposta un pollice della barra di scorrimento di 28 x 45 pixel, presenta 10 margini pixel in alto e in basso e presenta immagini diverse per ogni stato:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb { 
 width:28px; 
 background-repeat:no-repeat; 
 background-position:center; 
 height:45px; 
 padding-top:10px; 
 padding-bottom:10px; 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png); 
} 
.s7ecatalogviewer .s7tableofcontents .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 .s7tableofcontents .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

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

Proprietà CSS del pulsante di scorrimento verso l’alto e verso il basso

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

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

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