Incrustar recurso compartido

La herramienta de incrustación de elementos compartidos consiste en un botón agregado al panel Compartir en redes sociales y el cuadro de diálogo modal que se muestra cuando se activa la herramienta. La posición del botón la gestiona completamente la herramienta Compartir en Social.

El aspecto del botón para incrustar compartir se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embedshare

Propiedades CSS de la herramienta para compartir incrustado

width

Ancho del botón.

height

Altura del botón.

background-image

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

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

Es posible quitar el botón del panel Compartir en Social estableciendo la propiedad display:none CSS en su clase CSS.

La información de objeto 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 configurar un botón de incrustación compartida de 28 x 28 píxeles y mostrar una imagen diferente para cada uno de los cuatro estados de botón diferentes:

.s7ecatalogviewer .s7embedshare { 
 width:28px; 
 height:28px; 
} 
.s7ecatalogviewer .s7embedshare[state='up'] { 
background-image:url(images/v2/EmbedShare_dark_up.png); 
} 
.s7ecatalogviewer .s7embedshare[state='over'] { 
background-image:url(images/v2/EmbedShare_dark_over.png); 
} 
.s7ecatalogviewer .s7embedshare[state='down'] { 
background-image:url(images/v2/EmbedShare_dark_down.png); 
} 
.s7ecatalogviewer .s7embedshare[state='disabled'] { 
background-image:url(images/v2/EmbedShare_dark_disabled.png); 
}

La superposición de fondo que cubre la página web cuando el cuadro de diálogo está activo se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7backoverlay

Propiedades CSS de la superposición de fondo

opacidad

Opacidad de superposición de fondo.

background-color

Color de superposición de fondo.

Ejemplo: para configurar una superposición de fondo para que sea gris con un 70 % de opacidad:

.s7ecatalogviewer .s7embeddialog .s7backoverlay { 
 opacity:0.7; 
 background-color:#222222; 
}

De forma predeterminada, el cuadro de diálogo modal se muestra centrado en la pantalla en los sistemas de escritorio y toma todo el área de la página web en dispositivos táctiles. En todos los casos, el componente gestiona la colocación y el tamaño del cuadro de diálogo. El cuadro de diálogo se controla con el siguiente selector de clase CSS:

.s7embeddialog .s7dialog

Propiedades CSS del cuadro de diálogo

border-radius

Radio del borde del cuadro de diálogo, en caso de que el cuadro de diálogo no ocupe todo el explorador.

background-color

Color de fondo del cuadro de diálogo.

width

Se debe desactivar o establecer en 100 %, en cuyo caso el cuadro de diálogo toma toda la ventana del navegador (este modo es preferible en dispositivos táctiles).

height

Se debe desactivar o establecer en 100 %, en cuyo caso el cuadro de diálogo toma toda la ventana del navegador (este modo es preferible en dispositivos táctiles).

Ejemplo: para configurar el cuadro de diálogo de modo que utilice toda la ventana del navegador y tenga un fondo blanco en los dispositivos táctiles:

.s7ecatalogviewer .s7touchinput .s7embeddialog .s7dialog { 
 width:100%; 
 height:100%; 
background-color: #ffffff; 
}

El encabezado del cuadro de diálogo consta de un icono, un texto de título y un botón de cierre. El contenedor del encabezado se controla con

.s7ecatalogviewer .s7embeddialog .s7dialogheader

Propiedades CSS del encabezado del cuadro de diálogo

relleno

Relleno interior para el contenido del encabezado.

El icono y el texto del título se envuelven en un contenedor adicional controlado con

.s7ecatalogviewer .s7embeddialog .s7dialogheader .s7dialogline

Propiedades CSS de la línea de diálogo

relleno

Relleno interior para el icono y el título del encabezado

El icono de encabezado se controla con el siguiente selector de clase CSS

.s7ecatalogviewer .s7embeddialog .s7dialogheadericon

Propiedades CSS del icono de encabezado del cuadro de diálogo

width

Ancho del icono.

height

Altura del icono.

background-image

Imagen de icono.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

El título del encabezado se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialogheadertext

Propiedades CSS del texto del encabezado del cuadro de diálogo

font-peso

Peso de fuentes.

font-size

Altura de fuente.

font-family

Familia de fuentes.

relleno

Relleno de texto interno.

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

.s7ecatalogviewer .s7embeddialog .s7closebutton

Propiedades CSS del botón de cierre

parte superior

Posición vertical del botón con respecto al contenedor del encabezado.

derecha

Posición horizontal del botón con respecto al contenedor del encabezado.

width

Ancho del botón.

height

Altura del botón.

relleno

Relleno interior del botón.

background-image

Imagen de botón para cada estado.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

La información de objeto 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 configurar el encabezado del cuadro de diálogo con relleno, icono de 24 x 14 píxeles, título de 16 puntos en negrita y botón de cierre de 28 x 28 píxeles, situado dos píxeles desde la parte superior y dos píxeles desde la derecha del contenedor de diálogo:

.s7ecatalogviewer .s7embeddialog .s7dialogheader { 
 padding: 10px; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogheader .s7dialogline { 
 padding: 10px 10px 2px; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogheadericon { 
    background-image: url("images/sdk/dlgembed_cap.png"); 
    height: 14px; 
    width: 24px; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogheadertext { 
    font-size: 16pt; 
    font-weight: bold; 
    padding-left: 16px; 
} 
.s7ecatalogviewer .s7embeddialog .s7closebutton { 
 top:2px; 
 right:2px; 
 padding:8px; 
 width:28px; 
 height:28px; 
} 
.s7ecatalogviewer .s7embeddialog .s7closebutton[state='up'] { 
 background-image:url(images/sdk/close_up.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7closebutton[state='over'] { 
 background-image:url(images/sdk/close_over.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7closebutton[state='down'] { 
 background-image:url(images/sdk/close_down.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7closebutton[state='disabled'] { 
 background-image:url(images/sdk/close_disabled.png); 
}

El pie de página del cuadro de diálogo consiste en el botón "Cancelar". El contenedor de pie de página se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialogfooter

Propiedades CSS del pie de página del cuadro de diálogo

borde

Borde que puede utilizar para separar visualmente el pie de página del resto del cuadro de diálogo.

El pie de página tiene un contenedor interior que mantiene el botón. Se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialogbuttoncontainer

Propiedades CSS del contenedor del botón del cuadro de diálogo

relleno

Relleno interior entre el pie de página y el botón.

El botón Seleccionar todo se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialogactionbutton

El botón solo está disponible en sistemas de escritorio.

Propiedades CSS del botón Seleccionar todo

width

Ancho del botón.

height

Altura del botón.

color

Color del texto del botón para cada estado.

background-color

Color de fondo del botón para cada estado.

NOTA

El botón Seleccionar todo admite el selector de atributos state, que se puede utilizar para aplicar diferentes apariencias a distintos estados de botones.

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

.s7ecatalogviewer .s7embeddialog .s7dialogcancelbutton

Propiedades CSS del botón Cancelar del cuadro de diálogo

width

Ancho del botón.

height

Altura del botón.

color

Color del texto del botón para cada estado.

background-color

Color de fondo del botón para cada estado.

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

Además, ambos botones comparten la misma clase CSS común que puede contener la configuración CSS que es la misma para otros botones de cuadro de diálogo:

.s7ecatalogviewer .s7embeddialog .s7dialogfooter .s7button

Propiedades CSS del botón

font-peso

Peso de fuente del botón.

font-size

Tamaño de fuente del botón.

font-family

Familia de fuentes de botón.

line-height

Altura del texto dentro del botón. Afecta a la alineación vertical.

box-Shadow

Sombra paralela.

margin-right

Margen del botón derecho.

La información de objeto 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 configurar un pie de página de cuadro de diálogo con un botón Cancelar de 64 x 34, un botón Seleccionar todo de 82 x 34 y un color de texto y de fondo diferentes para cada estado de botón:

.s7ecatalogviewer .s7embeddialog .s7dialogfooter { 
    border-top: 1px solid #909090; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogbuttoncontainer { 
    padding-bottom: 6px; 
    padding-top: 10px; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogfooter .s7button { 
    box-shadow: 1px 1px 1px #999999; 
    color: #FFFFFF; 
    font-size: 9pt; 
    font-weight: bold; 
    line-height: 34px; 
    margin-right: 10px; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogcancelbutton { 
 width:64px; 
 height:34px; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogcancelbutton[state='up'] { 
 background-color:#666666; 
 color:#dddddd; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogcancelbutton[state='down'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogcancelbutton[state='over'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogactionbutton { 
 width:82px; 
 height:34px; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogactionbutton[state='up'] { 
 background-color:#333333; 
 color:#dddddd; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogactionbutton[state='down'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogactionbutton[state='over'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7ecatalogviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
}

El área de diálogo principal (entre el encabezado y el pie de página) contiene contenido de cuadro de diálogo desplazable y el panel de desplazamiento de la derecha. En todos los casos, el componente administra la anchura de esta área, no es posible configurarla en CSS. El área de diálogo principal se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialogviewarea

Propiedades CSS del área de visualización del cuadro de diálogo

height

Altura del área del cuadro de diálogo principal. Solo debe especificarse cuando el cuadro de diálogo funciona en modo de escritorio. No es aplicable cuando el cuadro de diálogo está ajustado para ocupar toda la ventana del explorador.

background-color

Color de fondo del área del cuadro de diálogo principal.

margin

Margen exterior.

Ejemplo: para configurar un área de cuadro de diálogo principal con una altura de 300 píxeles, tenga un margen de diez píxeles y utilice un fondo blanco:

.s7ecatalogviewer .s7embeddialog .s7dialogviewarea { 
 background-color:#ffffff; 
 margin:10px; 
 height:300px; 
}

Todo el contenido del formulario (como las etiquetas y los campos de entrada) reside dentro de un contenedor controlado con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialogbody

Si la altura de este contenedor parece ser mayor que el área del cuadro de diálogo principal, el componente activa automáticamente un desplazamiento vertical.

Propiedades CSS del cuerpo del cuadro de diálogo

relleno

Relleno interior.

Ejemplo: para configurar el contenido del formulario con un margen de diez píxeles:

.s7ecatalogviewer .s7embeddialog .s7dialogbody { 
    padding: 10px; 
}

Todas las etiquetas estáticas del formulario de cuadro de diálogo se controlan con

.s7ecatalogviewer .s7embeddialog .s7dialoglabel

Esta clase no es adecuada para controlar el tamaño o la posición de la etiqueta, ya que se puede aplicar a textos en varios lugares de la interfaz de usuario del formulario.

Propiedades CSS de la etiqueta del cuadro de diálogo.

font-peso

Peso de fuentes de etiquetas.

font-size

Tamaño de fuente de la etiqueta.

font-family

Familia de fuentes de etiquetas.

color

Color del texto de la etiqueta.

Las etiquetas de los cuadros de diálogo se pueden localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo: para configurar todas las etiquetas para que sean grises, negrita con una fuente de nueve píxeles:

.s7ecatalogviewer .s7embeddialog .s7dialoglabel { 
    color: #666666; 
    font-size: 9pt; 
    font-weight: bold; 
}

El tamaño de la copia de texto que se muestra encima del código incrustado se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialoginputwide

Propiedades CSS del campo ancho de entrada del cuadro de diálogo

width

Ancho del campo de entrada.

relleno

Relleno interior.

Ejemplo: para establecer que la copia de texto tenga 430 píxeles de ancho y un relleno de diez píxeles en la parte inferior:

.s7ecatalogviewer .s7embeddialog .s7dialoginputwide { 
    padding-bottom: 10px; 
    width: 430px; 
}

El código incrustado se ajusta en contenedor y se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialoginputcontainer

Propiedades CSS del contenedor de entrada del cuadro de diálogo

width

Ancho del contenedor de código incrustado.

borde

Borde alrededor del contenedor de código incrustado.

relleno

Relleno interior.

Ejemplo: para definir un borde gris de un píxel alrededor del texto del código incrustado, póngalo 430 píxeles de ancho y tenga un margen de diez píxeles:

.s7ecatalogviewer .s7embeddialog .s7dialoginputcontainer { 
    border: 1px solid #CCCCCC; 
    padding: 10px; 
    width: 430px; 
}

El texto del código incrustado real se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialoginputcontainer

Propiedades CSS del contenedor de entrada del cuadro de diálogo

ajuste de palabras

Estilo de ajuste de palabras.

Ejemplo: para configurar el código incrustado para utilizar break-word ajuste de palabras:

.s7ecatalogviewer .s7embeddialog .s7dialogmessage { 
    word-wrap: break-word; 
}

La etiqueta de tamaño incrustado y la lista desplegable se encuentran en la parte inferior del cuadro de diálogo y se colocan en un contenedor controlado con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialogembedsizepanel

Propiedades CSS del panel Tamaño incrustado del cuadro de diálogo

relleno

Relleno interior.

Ejemplo: para configurar un panel de tamaño incrustado para que tenga diez píxeles de relleno:

.s7ecatalogviewer .s7embeddialog .s7dialogembedsizepanel { 
    padding: 10px; 
}

El tamaño y la alineación de la etiqueta de tamaño incrustado se controlan con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialogembedsizepanel

Propiedades CSS del panel Tamaño incrustado del cuadro de diálogo

vertical-align

Alineación de etiqueta vertical.

width

Ancho de etiqueta.

Ejemplo: para definir que la etiqueta de tamaño incrustado esté alineada en la parte superior y tenga una anchura de 80 píxeles:

.s7ecatalogviewer .s7embeddialog .s7dialogembedsizelabel { 
    vertical-align: top; 
    width: 80px; 
}

El ancho del cuadro combinado de tamaño incrustado se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7combobox

Propiedades CSS del cuadro combinado

width

Ancho del cuadro combinado.

NOTA

El cuadro combinado admite el selector de atributos expanded con valores posibles de true y false. true se utiliza cuando el cuadro combinado muestra uno de los tamaños incrustados predefinidos, por lo que debe tener toda la anchura disponible. false se utiliza cuando la opción de tamaño personalizado está seleccionada en el cuadro combinado, por lo que debe reducirse para permitir espacio para los campos de entrada de anchura y altura personalizados.

Ejemplo: para que el cuadro combinado de tamaño incrustado tenga una anchura de 300 píxeles cuando se muestre un elemento predefinido y una anchura de 110 píxeles cuando se muestre un tamaño personalizado:

.s7ecatalogviewer .s7embeddialog .s7combobox[expanded="true"] { 
    width: 300px; 
} 
.s7ecatalogviewer .s7embeddialog .s7combobox[expanded="false"] { 
    width: 110px; 
}

La altura del texto del cuadro combinado se define mediante un elemento interno especial y se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxtext

Propiedades CSS del texto del cuadro combinado

height

Altura del texto del cuadro combinado.

Ejemplo: para establecer la altura de texto del cuadro combinado de tamaño incrustado en 40 píxeles:

.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxtext { 
    height: 40px; 
}

El cuadro combinado tiene un botón "desplegable" a la derecha y se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton

Propiedades CSS del botón de cuadro combinado

parte superior

Posición vertical del botón dentro del cuadro combinado.

derecha

Posición horizontal del botón dentro del cuadro combinado.

width

Ancho del botón.

height

Altura del botón.

background-image

Imagen de botón para cada estado.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

Ejemplo: para establecer un botón desplegable en 28 x 28 píxeles y tener una imagen independiente para cada estado:

.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton { 
 width:28px; 
 height:28px; 
} 
.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] { 
 background-image:url(images/sdk/cboxbtndn_up.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] { 
 background-image:url(images/sdk/cboxbtndn_over.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] { 
 background-image:url(images/sdk/cboxbtndn_over.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] { 
 background-image:url(images/sdk/cboxbtndn_up.png); 
}

El panel con la lista de los tamaños incrustados que se muestra al abrir el cuadro combinado se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7comboboxdropdown

El tamaño y la posición del panel están controlados por el componente. No es posible cambiarlo mediante CSS.

Propiedades CSS de la lista desplegable de cuadro combinado

borde

Borde del panel.

Ejemplo: para configurar el panel de cuadro combinado de modo que tenga un borde gris de un píxel:

.s7ecatalogviewer .s7embeddialog .s7comboboxdropdown { 
    border: 1px solid #CCCCCC; 
}

Un solo elemento en un panel desplegable que se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dropdownitemanchor

Propiedades CSS del anclaje del elemento desplegable

background-color

Fondo del elemento.

Ejemplo: para establecer que el elemento del panel del cuadro combinado tenga un fondo blanco:

.s7ecatalogviewer .s7embeddialog .s7dropdownitemanchor { 
    background-color: #FFFFFF; 
}

Marca de verificación que se muestra a la izquierda del elemento seleccionado dentro del panel de cuadro combinado y que se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7checkmark

Propiedades CSS de la casilla de verificación

width

Ancho del icono.

height

Altura del icono.

background-image

Imagen del elemento.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

Ejemplo: para establecer el icono de marca de verificación en 25 x 25 píxeles:

.s7ecatalogviewer .s7embeddialog .s7checkmark { 
    background-image: url("images/sdk/cboxchecked.png"); 
    height: 25px; 
    width: 25px; 
}

Cuando se selecciona la opción "Tamaño personalizado" en el cuadro combinado de tamaño incrustado, el cuadro de diálogo muestra dos campos de entrada adicionales a la derecha para permitir que el usuario introduzca un tamaño incrustado personalizado. Estos campos se envuelven en un contenedor que se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialogcustomsizepanel

Propiedades CSS del panel de tamaño personalizado del cuadro de diálogo

izquierda

Distancia del cuadro combinado de tamaño incrustado.

Ejemplo: para establecer el tamaño personalizado del panel de campos de entrada en 20 píxeles a la derecha del cuadro combinado:

.s7ecatalogviewer .s7embeddialog .s7dialogcustomsizepanel { 
    left: 20px; 
}

Cada campo de entrada de tamaño personalizado se envuelve en un contenedor que procesa un borde y establece el margen entre los campos. Se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialogcustomsize

Propiedades CSS del cuadro de diálogo tamaño personalizado

borde

Borde alrededor del campo de entrada.

width

Ancho del campo de entrada.

margin

Margen del campo de entrada.

relleno

Relleno de campo de entrada.

Ejemplo: para configurar los campos de entrada de tamaño personalizado para que tengan un borde gris de un píxel, un margen, un margen y un margen de 70 píxeles de ancho:

.s7ecatalogviewer .s7embeddialog .s7dialogcustomsize { 
    border: 1px solid #CCCCCC; 
    margin-right: 20px; 
    padding-left: 2px; 
    padding-right: 2px; 
    width: 70px; 
}

Si se necesita desplazamiento vertical, la barra de desplazamiento se procesa en el panel situado cerca del borde derecho del cuadro de diálogo, que se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7dialogscrollpanel

Propiedades CSS del panel de desplazamiento del cuadro de diálogo

width

Ancho del panel de desplazamiento.

Ejemplo: configurar un panel de desplazamiento para que tenga una anchura de 44 píxeles

.s7ecatalogviewer .s7embeddialog .s7dialogscrollpanel { 
    width: 44px; 
}

El aspecto del área de la barra de desplazamiento se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7scrollbar

Propiedades CSS de la barra de desplazamiento

width

Ancho de la barra de desplazamiento.

parte superior

Desplazamiento de la barra de desplazamiento vertical desde la parte superior del panel de desplazamiento.

parte inferior

Desplazamiento de la barra de desplazamiento vertical desde la parte inferior del panel de desplazamiento.

derecha

Desplazamiento de la barra de desplazamiento horizontal desde el borde derecho del panel de desplazamiento.

Ejemplo: para configurar una barra de desplazamiento de 28 píxeles de ancho y con un margen de ocho píxeles desde la parte superior, derecha e inferior del panel de desplazamiento:

.s7ecatalogviewer .s7embeddialog .s7scrollbar { 
    bottom: 8px; 
    right: 8px; 
    top: 8px; 
    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 .s7embeddialog .s7scrollbar .s7scrolltrack

Propiedades CSS de la guía de la barra de desplazamiento

width

Ancho de la pista.

background-color

Rastree el color de fondo.

Ejemplo: para configurar una pista de barra de desplazamiento con una anchura de 28 píxeles y un fondo gris:

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolltrack { 
width:28px; 
background-color: #B2B2B2; 
}

El pulgar de la barra de desplazamiento se mueve verticalmente dentro de un área de seguimiento de desplazamiento. Su posición vertical está totalmente controlada por la lógica del componente. Sin embargo, la altura de la miniatura no cambia dinámicamente según la cantidad de contenido. La altura de la miniatura y otros aspectos se pueden configurar con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb

Propiedades CSS de la miniatura de la barra de desplazamiento

width

Ancho de la miniatura.

height

Altura del dedo pulgar.

padding-top

El margen vertical entre la parte superior de la pista.

relleno-inferior

El margen vertical entre la parte inferior de la pista.

background-image

Imagen mostrada para un estado de miniatura determinado.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

Thumb admite el selector de atributos state, que se puede utilizar para aplicar diferentes apariencias a diferentes estados de pulgar: up, down, over y disabled.

Ejemplo: para configurar una miniatura de la barra de desplazamiento de 28 x 45 píxeles, tiene un margen de diez píxeles en la parte superior e inferior y tiene una ilustración diferente para cada estado:

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb { 
    height: 45px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    width: 28px; 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] { 
 background-image:url("images/sdk/scrollbar_thumb_up.png"); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] { 
 background-image:url("images/sdk/scrollbar_thumb_down.png"); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] { 
 background-image:url("images/sdk/scrollbar_thumb_over.png"); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] { 
 background-image:url("images/sdk/scrollbar_thumb_disabled.png"); 
}

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

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

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

Propiedades CSS de los botones de desplazamiento superior e inferior

width

Ancho del botón.

height

Altura del botón.

background-image

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

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

Estos botones admiten el selector de atributos state, que se puede utilizar para aplicar diferentes apariencias a diferentes estados de botón: up, down, over y disabled.

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

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

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] { 
background-image:url(images/sdk/scroll_up_up.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/sdk/scroll_up_over.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/sdk/scroll_up_down.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_up_disabled.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/sdk/scroll_down_up.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/sdk/scroll_down_over.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/sdk/scroll_down_down.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_down_disabled.png); 
}

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free