Barra de control principal main-control-bar
La barra de control principal es el área rectangular de los sistemas de escritorio y tabletas que contiene todos los controles de la interfaz de usuario (excepto los botones de página grande) disponibles para el visor de búsqueda en el catálogo electrónico.
En los teléfonos móviles, sigue conservando los botones Miniaturas, Tabla de contenido, Descargar, Imprimir, Favoritos, Compartir en redes sociales, Pantalla completa y Cerrar. Sin embargo, los botones Primera página y Última página y el Indicador de página se quitan 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 ocupa toda la anchura del visor disponible. Es posible cambiar el color, la altura y la posición vertical en 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:
.s7ecatalogsearchviewer .s7controlbar
Ejemplo: para configurar una barra de control principal gris de 36 píxeles de alto situada en la parte superior del contenedor del visor.
.s7ecatalogsearchviewer .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 espacio suficiente 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 tocar o hacer clic en este botón, se desplazan todos los elementos de la barra de control a la izquierda o a la derecha, en función del 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á activada para la barra de control principal y desactivada para la barra de control secundaria. La función se activa y desactiva mediante el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer
Cuando se establece en estático, la característica de desplazamiento está deshabilitada.
Establezca esta propiedad en absoluto para habilitar la característica de desplazamiento.
El botón de desplazamiento se agrega a un elemento contenedor especial que coloca el botón correctamente. Permite aplicar un estilo diferente al área que rodea al botón y al resto del fondo de la barra de control en caso de que el alto del botón de desplazamiento sea menor que el alto de la barra de control.
El aspecto de este contenedor de botones de desplazamiento se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer
Puede cambiar el tamaño y la apariencia del botón de desplazamiento mediante CSS.
El aspecto de este botón se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton
Coloque dentro del icono de ilustración si se utilizan iconos CSS.
Consulte también Sprites CSS.
state y selected, que pueden utilizarse para aplicar diferentes aspectos a diferentes estados de botones. En particular, state="selected" corresponde al estado inicial del botón de desplazamiento cuando es posible desplazar el contenido de la barra de control hacia la izquierda. state="default" corresponde al estado en el que el contenido se desplaza completamente hacia la izquierda y el botón de desplazamiento sugiere que se vuelva al estado inicial.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 habilitar la característica de desplazamiento en la barra de control principal para teléfonos móviles. Y 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 se selecciona o no se selecciona:
.s7ecatalogsearchviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer {
position: absolute;
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer {
width:64px;
background-color: rgb(0, 0, 0);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton {
width:64px;
height:64px;
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] {
background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] {
background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] {
background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] {
background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] {
background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] {
background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png);
}