Sommario table-of-contents

Il sommario è un pulsante 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 per cui sono definite etichette esplicite. Sui sistemi desktop, se l'elenco è più lungo della superficie disponibile sullo schermo, a destra viene visualizzata una barra di scorrimento.

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

.s7ecatalogsearchviewer .s7tableofcontents

Proprietà CSS del sommario

margin-top
Offset dalla parte superiore della barra di controllo.
margin-left
Distanza dal pulsante successivo a sinistra o dal lato sinistro della barra di controllo se questo pulsante è il primo di una riga.
width
Larghezza del pulsante del sommario.
height
Altezza del pulsante del sommario.
background-image
Immagine visualizzata per un determinato stato del pulsante.
background-position

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

Vedi anche Spunti CSS.

NOTE
Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.

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

Esempio: impostare un pulsante del 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 viene visualizzata un'immagine diversa per ciascuno dei quattro stati dei pulsanti:

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

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

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel

Proprietà CSS del pannello a discesa

background-color
Colore di sfondo del pannello a discesa.
margine
Offset interno tra i bordi del pannello e il contenuto.
box-shadow
Ombra esterna attorno al pannello.
NOTE
Non è possibile controllare le dimensioni o la posizione del pannello a discesa dagli stili CSS; il componente ne gestisce il layout a livello di programmazione.

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

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

L’aspetto dei singoli elementi è controllato dal seguente selettore di classe CSS:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item

Proprietà CSS dell'elemento

font-family
Nome font.
font-size
Dimensione font.
height
Altezza dell'elemento.
riempimento
Spaziatura interna.
NOTE
L'elemento dell'elenco a discesa supporta state selettore di attributi, che può essere utilizzato per applicare skin diversi agli stati al passaggio del mouse e agli elementi selezionati.

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

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogsearchviewer .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:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index

Proprietà CSS dell’indice della pagina

min-width
Larghezza minima degli elementi.
max-width
Larghezza massima elemento.
padding-right
Distanza tra l'indice e l'etichetta della pagina.
NOTE
È possibile nascondere completamente l’indice della pagina impostando display:none per s7index Classe CSS.

Esempio 1: impostare 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:

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

Esempio 2 - nascondere l’indice della pagina:

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

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

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label

Proprietà CSS dell’etichetta pagina

min-width
Larghezza minima degli elementi.
max-width
Larghezza massima elemento.

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

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

Se il numero di elementi che possono rientrare verticalmente nel pannello a discesa è superiore a quello del 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 dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar

Proprietà CSS della barra di scorrimento

width
Larghezza della barra di scorrimento.
top
Scostamento della barra di scorrimento verticale dalla parte superiore dell'area del pannello.
bottom
Scostamento della barra di scorrimento verticale dalla parte inferiore dell'area del pannello.
destra
La barra di scorrimento orizzontale si sposta dal bordo destro dell'area del pannello.

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

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

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

Proprietà CSS del brano di scorrimento

width
Larghezza della traccia.
background-color
Colore di sfondo del brano.

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

.s7ecatalogsearchviewer .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 del pollice non cambia in modo dinamico a seconda della quantità di contenuto. Puoi configurare l’altezza del pollice e altri aspetti con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

Proprietà CSS della barra di scorrimento

width
Larghezza del pollice.
height
Altezza del pollice.
riempimento superiore
Spaziatura verticale tra la parte superiore del brano.
padding-bottom
Spaziatura verticale tra la parte inferiore del brano.
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 al up, down, over, e disabled stati del pollice.

Esempio: 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:

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

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7tableofcontents .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 del pulsante di scorrimento verso l’alto e verso il basso

width
Larghezza pulsante.
height
Altezza pulsante.
background-image
Immagine visualizzata per un determinato stato del pulsante.
background-position

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

Vedi anche Spunti CSS.

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

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

Esempio: impostare pulsanti di scorrimento di 28 x 32 pixel con grafica diversa per ogni stato:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8