Barra de control principal

La barra de control principal es el área rectangular de los sistemas de escritorio y las tabletas que contienen todos los controles de interfaz de usuario (excepto los botones de Página grande) disponibles para el visor del catálogo electrónico.

En los teléfonos móviles, mantiene las miniaturas, la tabla de contenido, la descarga, la impresión, los favoritos, el uso compartido en medios sociales, la pantalla completa y los botones Cerrar. Sin embargo, los botones Primera página y Última página y el indicador de página se eliminan de la barra de control principal y se agregan a la barra de control secundaria en su lugar. De forma predeterminada, la barra de control principal se muestra en la parte superior del área del visor en sistemas de escritorio y teléfonos móviles, y se mueve a la parte inferior del área del visor en tabletas. Siempre toma toda la anchura del visor disponible. Es posible cambiar su color, altura y posición vertical en el CSS, en relación con el contenedor del visor.

El aspecto de la barra de control principal se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7controlbar

CSS, propiedad

Descripción

parte superior

Posición desde la parte superior del visor.

parte inferior

Posición desde la parte inferior del visor.

height

Altura de la barra de control principal.

background-color

Color de fondo de la barra de control principal.

Ejemplo - para configurar una barra de control principal gris de 36 píxeles de altura y situada en la parte superior del contenedor del visor.

.s7ecatalogviewer .s7controlbar {
 top: 0px;
 height: 36px;
 background-color: rgba(0, 0, 0, 0.5);
}

La barra de control principal admite una función de desplazamiento opcional. Se activa si la anchura del visor es demasiado pequeña y no hay suficiente espacio para ajustar todos los botones preestablecidos en la barra de control. En este caso, aparece un botón de flecha de dos estados en el lado derecho de la barra de control. Al pulsar o hacer clic en este botón, se desplazan todos los elementos de la barra de control a la izquierda o a la derecha, según el estado del botón de desplazamiento. El caso de uso principal de esta función son los dispositivos móviles con pantallas pequeñas en orientación vertical.

La función de desplazamiento está habilitada para la barra de control principal y deshabilitada para la barra de control secundaria. La función está activada y desactivada con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer

CSS, propiedad

Descripción

position

Cuando se configura como static la función de desplazamiento está desactivada.

Establezca esta propiedad como absoluto para activar la función de desplazamiento.

El botón de desplazamiento se agrega a un elemento contenedor especial que posiciona el botón correctamente. Permite aplicar un estilo al área alrededor del botón de forma diferente al resto del fondo de la barra de control en caso de que la altura del botón de desplazamiento sea menor que la altura de la barra de control.

El aspecto de este contenedor de botones de desplazamiento se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7controlbar .s7scrollbuttoncontainer

CSS, propiedad

Descripción

width

Normalmente debe ser igual o mayor que la anchura del propio botón de desplazamiento.

background-color

Color de fondo del contenedor.

Puede cambiar el tamaño y el aspecto del propio botón de desplazamiento mediante CSS.

El aspecto de este botón se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7controlbar .s7scrollleftrightbutton

CSS, propiedad

Descripción

width

Anchura del botón.

height

Altura del botón.

imagen de fondo

Imagen que se muestra para un estado de botón determinado.

posición de fondo

Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

Este botón admite la variable state y selected selectores de atributos, que pueden utilizarse para aplicar diferentes aspectos a distintos estados de botones. En particular, state="selected" corresponde al estado del botón de desplazamiento inicial cuando es posible desplazar el contenido de la barra de control hacia la izquierda. El atributo state="default" corresponde al estado cuando el contenido se desplaza hasta la izquierda y el botón de desplazamiento sugiere devolverlo al estado inicial.

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

Ejemplo - Para habilitar la función de desplazamiento en la barra de control principal para teléfonos móviles. Además, configure un botón de desplazamiento de 64 x 64 píxeles que muestre una imagen diferente para cada uno de los 4 estados de botón diferentes cuando esté seleccionado o no seleccionado:

.s7ecatalogviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer {
 position: absolute;
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer {
 width:64px;
 background-color: rgb(0, 0, 0);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton {
 width:64px;
 height:64px;
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] {
 background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] {
 background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] {
 background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] {
 background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png);
}

En esta página