Tabla de contenido table-of-contents

La tabla de contenido es un botón situado en la barra de control principal. Cuando se activa, aparece un panel desplegable con una lista de índices y etiquetas de página.

En función de la configuración, la lista puede contener todas las páginas que están presentes en el catálogo o solo aquellas páginas que tienen etiquetas explícitas definidas. En sistemas de escritorio, si la lista es más larga que el espacio disponible en la pantalla, se muestra una barra de desplazamiento a la derecha.

La posición y el tamaño del botón de tabla de contenido en la interfaz de usuario del visor se controlan con el siguiente selector de clases CSS:

.s7ecatalogviewer .s7tableofcontents

Propiedades CSS de la tabla de contenido

margen superior
Desplazamiento desde la parte superior de la barra de control.
margen restante
Distancia al siguiente botón de la izquierda o al lado izquierdo de la barra de control, si es el primer botón de una fila.
ancho
Ancho del botón de la tabla de contenido.
altura
Altura del botón de tabla de contenido.
imagen de fondo
Imagen que se muestra para un estado de botón determinado.
posición de fondo

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte también Sprites CSS.

NOTE
Este botón es compatible con el selector de atributos state, que se puede utilizar para aplicar diferentes aspectos a diferentes estados de botones.

La información del objeto del botón se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: Para configurar un botón de tabla de contenido que se coloque a 4 píxeles de la parte inferior y a 43 píxeles de la izquierda de la barra de control principal. El tamaño es de 28 x 28 píxeles y se muestra una imagen diferente para cada uno de los cuatro estados de botón diferentes:

.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);
}

El aspecto del panel desplegable se controla con el siguiente selector de clase CSS:

 .s7ecatalogviewer .s7tableofcontents .s7panel

Propiedades CSS del panel desplegable

color de fondo
Color de fondo del panel desplegable.
margen
Desplazamiento interno entre los límites del panel y el contenido.
box-shadow
Sombra paralela alrededor del panel.
NOTE
No se puede controlar el tamaño o la posición del panel desplegable desde CSS; el componente administra su diseño mediante programación.

Ejemplo: configuración de un panel desplegable con un fondo negro semitransparente, un margen de 5 píxeles alrededor del contenido y una sombra paralela:

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

El aspecto del elemento individual se controla con el siguiente selector de clase CSS:

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7item

Propiedades CSS del elemento

font-family
Nombre de la fuente.
tamaño de fuente
Tamaño de fuente.
altura
Altura del artículo.
relleno
Relleno interno.
NOTE
El elemento de lista desplegable es compatible con el selector de atributos state, que se puede utilizar para aplicar distintos aspectos a los estados de elemento seleccionado y desplazamiento.

Ejemplo: configuración de un elemento desplegable con una fuente Helvetica® de 14 píxeles y 19 píxeles de altura. Un elemento tiene un fondo gris oscuro al pasar el ratón por encima y un fondo gris claro al seleccionarlo:

.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 que muestra el índice de página se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index

Propiedades CSS del índice de página

de ancho mínimo
Ancho mínimo del elemento.
de ancho máximo
Ancho máximo del elemento.
relleno-derecho
Distancia entre el índice de página y la etiqueta de página.
NOTE
Es posible ocultar completamente el índice de página estableciendo display:none para la clase CSS s7index.

Ejemplo 1: Configurar un índice de página con una anchura mínima de 40 píxeles, una anchura máxima de 70 píxeles y un margen de 5 píxeles en el lado derecho:

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

Ejemplo 2 - ocultar índice de página:

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

La etiqueta de página se controla con el siguiente selector de clase CSS:

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7label

Propiedades CSS de la etiqueta de página

de ancho mínimo
Ancho mínimo del elemento.
de ancho máximo
Ancho máximo del elemento.

Ejemplo: Configuración de un índice de página con una anchura mínima de 40 píxeles y una anchura máxima de 240 píxeles:

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

Si hay más elementos de los que pueden caber verticalmente en el panel desplegable y el sistema es un escritorio, el componente procesa una barra de desplazamiento vertical en el lado derecho del panel. El aspecto del área de la barra de desplazamiento se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar

Propiedades CSS de la barra de desplazamiento

ancho
Ancho de la barra de desplazamiento.
principales
Desplazamiento vertical de la barra desde la parte superior del área del panel.
inferior
Desplazamiento vertical de la barra desde la parte inferior del área del panel.
derecho
Desplazamiento horizontal de la barra desde el borde derecho del área del panel.

Ejemplo: configure una barra de desplazamiento que tenga 28 píxeles de ancho y no tenga un margen para el área superior, derecha o inferior del panel:

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

La pista de la barra de desplazamiento es el área entre los botones de desplazamiento superior e inferior. El componente establece automáticamente la posición y la altura de la pista. El seguimiento se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

Propiedades CSS de la pista de desplazamiento

ancho
El ancho de la pista.
color de fondo
El color de fondo de la pista.

Ejemplo: configure una pista de barras de desplazamiento que tenga 28 píxeles de ancho y un fondo gris semitransparente:

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

El pulgar de la barra de desplazamiento se mueve verticalmente dentro del área de la pista de desplazamiento. Su posición vertical se controla mediante la lógica del componente. Sin embargo, la altura de la miniatura no cambia dinámicamente según la cantidad de contenido. Puede configurar la altura de la miniatura y otros aspectos con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

Propiedades CSS de la miniatura de la barra de desplazamiento

ancho
La anchura del pulgar.
altura
La altura del pulgar.
relleno superior
El margen vertical entre la parte superior de la pista.
relleno inferior
El margen vertical entre la parte inferior de la pista.
imagen de fondo
Imagen que se muestra para un estado de miniatura determinado.
posición de fondo

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte también Sprites CSS.

NOTE
La miniatura admite el selector de atributos state, que se puede utilizar para aplicar distintas apariencias a los estados de la miniatura up, down, over y disabled.

Ejemplo: configure una miniatura de la barra de desplazamiento de 28 x 45 píxeles, con márgenes de 10 píxeles en la parte superior e inferior y con ilustraciones diferentes para cada estado:

.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);
}

El aspecto de los botones de desplazamiento superior e inferior se controla con los siguientes selectores de clase CSS:

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

No es posible colocar los botones de desplazamiento utilizando las propiedades CSS top, left, bottom y right; en su lugar, la lógica del visor los coloca automáticamente.

Propiedades CSS del botón de desplazamiento hacia arriba y hacia abajo

ancho
Ancho del botón.
altura
La altura del botón.
imagen de fondo
Imagen que se muestra para un estado de botón determinado.
posición de fondo

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte también Sprites CSS.

NOTE
El botón admite el selector de atributos state, que se puede utilizar para aplicar distintas máscaras a los estados de los botones up, down, over y disabled.

La información del objeto del botón se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: configurar botones de desplazamiento de 28 x 32 píxeles con ilustraciones diferentes para cada estado:

.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