Table des matières table-of-contents

La table des matières est un bouton positionné dans la barre de contrôle principale. Lorsqu’il est activé, un panneau déroulant s’affiche avec une liste d’index et de libellés de page.

En fonction de la configuration, la liste peut contenir toutes les pages présentes dans le catalogue ou uniquement celles dont les libellés explicites sont définis. Sur les systèmes de bureau, si la liste est plus longue que l’espace disponible dans l’écran, une barre de défilement s’affiche à droite.

La position et la taille du bouton de table des matières dans l’interface utilisateur de la visionneuse sont contrôlées à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7tableofcontents

Propriétés CSS de la table des matières

margin-top
Décalage par rapport au haut de la barre de contrôle.
margin-left
Distance au bouton suivant sur la gauche ou sur le côté gauche de la barre de contrôle, s’il s’agit du premier bouton d’une ligne.
width
Largeur du bouton de la table des matières.
height
Hauteur du bouton de table des matières.
background-image
Image affichée pour un état de bouton donné.
background-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

NOTE
Ce bouton prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

L’info-bulle de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer un bouton de table des matières positionné à 4 pixels à partir du bas et à 43 pixels à partir de la gauche de la barre de contrôle principale. La taille est de 28 x 28 pixels et une image différente s’affiche pour chacun des quatre états de bouton différents :

.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’aspect du panneau déroulant est contrôlé à l’aide du sélecteur de classe CSS suivant :

 .s7ecatalogviewer .s7tableofcontents .s7panel

Propriétés CSS du panneau déroulant

background-color
Couleur de fond du panneau déroulant.
margin
Décalage interne entre les limites du panneau et le contenu.
box-shadow
Ombre portée autour du panneau.
NOTE
Il n’est pas possible de contrôler la taille ou la position du panneau déroulant à partir de CSS ; le composant gère sa disposition par programmation.

Exemple : configurez un panneau déroulant avec un arrière-plan noir semi-transparent, une marge de 5 pixels autour du contenu et une ombre portée :

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

L’aspect de l’élément individuel est contrôlé à l’aide du sélecteur de classe CSS suivant :

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7item

Propriétés CSS de l’élément

font-family
Nom de la police.
font-size
Taille de police.
height
Hauteur de l'élément.
padding
Marge intérieure interne.
NOTE
L’élément de liste déroulante prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages au survol et aux états d’élément sélectionnés.

Exemple : configurez un élément de liste déroulante avec une police Helvetica® 14 pixels et une hauteur de 19 pixels. Lorsque vous sélectionnez un élément, son arrière-plan est gris foncé et son arrière-plan gris clair :

.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 élément qui affiche l’index de page est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index

Propriétés CSS de l’index de page

min-width
Largeur minimale de l’élément.
max-width
Largeur maximale de l’élément.
padding-right
Distance entre l’index de page et le libellé de page.
NOTE
Il est possible de masquer entièrement l’index de page en définissant display:none pour la classe CSS s7index.

Exemple 1 : configurez un index de page avec une largeur minimale de 40 pixels, une largeur maximale de 70 pixels et une marge de 5 pixels sur le côté droit :

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

Exemple 2 : masquer l’index de page :

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

Le libellé de page est contrôlé à l’aide du sélecteur de classe CSS suivant :

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7label

Propriétés CSS de l’étiquette de page

min-width
Largeur minimale de l’élément.
max-width
Largeur maximale de l’élément.

Exemple : configurez un index de page d’une largeur minimale de 40 pixels et d’une largeur maximale de 240 pixels :

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

S’il y a plus d’éléments que ce qui peut tenir verticalement dans le panneau déroulant et que le système est un poste de travail, le composant effectue le rendu d’une barre de défilement verticale sur le côté droit du panneau. L’aspect de la zone de barre de défilement est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7tableofcontents .s7scrollbar

Propriétés CSS de la barre de défilement

width
Largeur de la barre de défilement.
top
Décalage de la barre de défilement verticale par rapport au haut de la zone du panneau.
bottom
Décalage de la barre de défilement verticale par rapport au bas de la zone du panneau.
droit
Décalage de la barre de défilement horizontale à partir du bord droit de la zone de panneau.

Exemple : configurez une barre de défilement de 28 pixels de large sans marge pour la zone supérieure, droite ou inférieure du panneau :

.s7ecatalogviewer .s7tableofcontents .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:28px;
}

Le suivi de la barre de défilement est la zone entre les boutons de défilement supérieur et inférieur. Le composant définit automatiquement la position et la hauteur du suivi. Le suivi est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

Propriétés CSS du suivi de défilement

width
Largeur du suivi.
background-color
Couleur d’arrière-plan du suivi.

Exemple : configurez une piste de barre de défilement de 28 pixels de large et avec un arrière-plan gris semi-transparent :

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

La barre de défilement se déplace verticalement dans la zone de suivi de défilement. Sa position verticale est contrôlée par la logique du composant. Toutefois, la hauteur de la miniature ne change pas dynamiquement en fonction de la quantité de contenu. Vous pouvez configurer la hauteur du pouce et d’autres aspects à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

Propriétés CSS du curseur de barre de défilement

width
Largeur du pouce.
height
La hauteur du pouce.
padding-top
Marge intérieure verticale entre le haut de la piste.
padding-bottom
Marge intérieure verticale entre le bas de la piste.
background-image
Image affichée pour un état de pouce donné.
background-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

NOTE
La miniature prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages aux états de miniature up, down, over et disabled.

Exemple : configurez une barre de défilement de 28 x 45 pixels, avec des marges de 10 pixels en haut et en bas, et une illustration différente pour chaque état :

.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’aspect des boutons de défilement haut et bas est contrôlé à l’aide des sélecteurs de classe CSS suivants :

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

Il n’est pas possible de positionner les boutons de défilement à l’aide des propriétés CSS top, left, bottom et right ; à la place, la logique de la visionneuse les positionne automatiquement.

Propriétés CSS du bouton de défilement vers le haut et vers le bas

width
Largeur du bouton.
height
Hauteur du bouton.
background-image
Image affichée pour un état de bouton donné.
background-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

NOTE
Le bouton prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages aux états de bouton up, down, over et disabled.

L’info-bulle de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : configurez des boutons de défilement de 28 x 32 pixels et ayant des illustrations différentes pour chaque état :

.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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8