Il sommario è un pulsante posizionato 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
margine superiore |
Offset dalla parte superiore della barra di controllo. |
margine sinistro |
La distanza dal pulsante successivo a sinistra o dal lato sinistro della barra di controllo, se si tratta del primo pulsante di una riga. |
width |
Larghezza del pulsante del sommario. |
height |
Altezza del pulsante del sommario. |
immagine di sfondo |
Immagine visualizzata per un determinato stato del pulsante. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Vedi anche Sprite CSS . |
Questo pulsante supporta state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.
La descrizione comando del pulsante può essere localizzata. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio: per 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 28 x 28 pixel e per ciascuno dei quattro stati dei pulsanti 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
colore di sfondo |
Colore di sfondo del pannello a discesa. |
margine |
Offset interno tra i bordi del pannello e il contenuto. |
ombra |
Ombreggiatura intorno al pannello. |
Non è possibile controllare le dimensioni o la posizione del pannello a discesa da CSS; il componente gestisce il layout a livello di programmazione.
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 del singolo elemento viene controllato con il seguente selettore di classe CSS:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item
Proprietà CSS dell’elemento
font-family |
Nome carattere. |
font-size |
Dimensione del carattere. |
altezza |
Altezza dell'oggetto. |
spaziatura interna |
Spaziatura interna. |
La voce dell’elenco a discesa supporta la state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse agli stati degli elementi selezionati e al passaggio del mouse.
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
larghezza minima |
Larghezza minima dell’elemento. |
larghezza massima |
Larghezza massima dell’elemento. |
margine destro |
Distanza tra l’indice della pagina e l’etichetta della pagina. |
È possibile nascondere completamente l'indice della pagina impostando display:none
per s7index
Classe CSS.
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
larghezza minima |
Larghezza minima dell’elemento. |
larghezza massima |
Larghezza massima dell’elemento. |
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;
}
Se nel pannello a discesa sono presenti più elementi di quelli che possono essere inseriti verticalmente e il sistema è 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
larghezza |
Larghezza della barra di scorrimento. |
top |
Offset della barra di scorrimento verticale dalla parte superiore dell’area del pannello. |
bottom |
Offset della barra di scorrimento verticale dal fondo dell'area del pannello. |
right |
Offset della barra di scorrimento orizzontale dal bordo destro dell'area del pannello. |
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
larghezza |
Larghezza del binario. |
colore di sfondo |
Colore di sfondo del brano. |
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
larghezza |
Larghezza pollice. |
altezza |
L'altezza del pollice. |
imbottitura superiore |
Spaziatura verticale tra la parte superiore della traccia. |
imbottitura inferiore |
Spaziatura verticale tra il fondo della traccia. |
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 al up
, down
, over
e disabled
stati del pollice.
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 CSS top
, left
, bottom
e right
proprietà; invece, la logica del visualizzatore li posiziona automaticamente.
Proprietà CSS del pulsante di scorrimento verso l’alto e verso il basso
larghezza |
Larghezza del pulsante. |
altezza |
Altezza del pulsante. |
immagine di sfondo |
Immagine visualizzata per un determinato stato del pulsante. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Vedi anche Sprite CSS . |
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. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
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);
}