Estilo de un contenedor
Los estilos se pueden aplicar a un contenedor a través del tema de estilo de mashup o directamente en el panel Propiedades de estilo. El uso de propiedades de estilo sustituye el estilo del tema global para un widget específico. Por defecto, a los contenedores se les aplica estilos mediante el tema de estilo de mashup, pero también se pueden utilizar definiciones de estilo. La propiedad UseTheme del panel Propiedades permite controlar el modo de aplicación de tema para el contenedor.
Para mostrar las propiedades de los temas de estilo de un contenedor, realice lo siguiente:
1. Seleccione un contenedor del panel Explorador.
◦ Como alternativa, pulse en un área vacía dentro de un contenedor.
2. Pulse en el panel Propiedades de estilo.
3. Expanda el estado Base. Las propiedades de estilo se muestran en la sección Container.
Se puede cambiar de la aplicación de tema de estilo a las definiciones de estilo. Para utilizar las definiciones de estilo, realice lo siguiente:
1. Seleccione un contenedor.
2. En el panel Propiedades, despeje la casilla de verificación UseTheme.
3. Pulse en el panel Propiedades de estilo.
Ahora se muestran las definiciones de estilo del contenedor en lugar de las propiedades de estilo.
CSS personalizada
Se pueden aplicar distintas combinaciones de estilos a los contenedores, como CSS personalizada, temas de estilo y propiedades de estilo. A continuación se muestra una lista de la prioridad de la regla de estilo, de mayor a menor:
|
Prioridad
|
Método de estilo
|
Descripción
|
|---|---|---|
|
Más alto
|
Propiedad de estilo
|
Los estilos que se aplican a un contenedor mediante el panel Propiedades de estilo. Se pueden utilizar propiedades de estilo para desestimar los estilos por defecto que se aplican desde el tema de estilo.
|
|
CSS personalizada de mashup
|
Reglas CSS que se aplican en la ficha CSS personalizada de una entidad de mashup. Una regla CSS mashup sustituye la regla CSS del tema de estilo cuando ambas reglas tienen la misma especificidad.
|
|
|
CSS personalizada de tema de estilo
|
Reglas CSS que se aplican en la ficha CSS personalizada de una entidad de tema de estilo.
|
|
|
Más baja
|
Tema de estilo
|
Los estilos que se heredan del tema de estilo que se aplica al mashup. Los temas se pueden utilizar para aplicar estilos por defecto coherentes a todos los contenedores de un mashup.
|
En general, la CSS de nivel de mashup tiene mayor prioridad que la CSS del tema de estilo. Sin embargo, la prioridad puede cambiar en función de la especificidad de las reglas de CSS. Por ejemplo, se puede aumentar la especificidad de las reglas de CSS personalizada añadiendo la regla !important a una propiedad de la siguiente manera:
.containerClass > .widget-content {
margin: 50px !important;
padding: 25px !important;
}
margin: 50px !important;
padding: 25px !important;
}
 |
Se recomienda encarecidamente utilizar los temas de estilos y las propiedades de estilo en lugar de escribir reglas de CSS personalizada.
|
Propiedades de estilo
Se pueden especificar las siguientes propiedades de estilo.
|
Propiedad
|
Descripción
|
|---|---|
|
background
|
El color de fondo del contenedor.
|
|
border-color
|
El color de las líneas de borde.
|
|
border-radius
|
El radio de las esquinas del borde. La propiedad se aplica a las cuatro esquinas del contenedor.
|
|
border-style
|
El estilo de las líneas de borde. Se puede definir en Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, Inherit o None.
|
|
border-width
|
El ancho de las líneas de borde.
|
Las propiedades de estilo se pueden utilizar para configurar el relleno del contenedor en ThingWorx 9.3.3 o una versión posterior con las siguientes propiedades:
• padding-bottom
• padding-left
• padding-right
• padding-top
Para obtener más información, consulte Configuración de los márgenes y el relleno de los contenedores.
Personalización de las propiedades de estilo de contenedor
En la siguiente tabla se muestran los valores de propiedad de estilo para el elemento flexcontainer, en comparación con los valores personalizados de un contenedor con estilo.
|
Estilo/propiedad
|
Por defecto
|
Con estilo
|
|---|---|---|
|
Propiedades
|
• background—#ffffff
• border-color—inherit
• border-radius—None
• border-style—None
• border-width—None
|
• background—#cccccc
• border-color—#AAE09F
• border-radius—4px
• border-style—Solid
• border-width—4px
|
|
Vista previa
|
 |
 |
|
|
Los valores de propiedad de estilo por defecto se derivan del tema de estilo de mashup.
|