Tutorial de CSS personalizada
 |
No se recomienda usar CSS personalizada. Consulte Applying Custom CSS Styling to Web Component Widgets para obtener más información.
|
Requisitos previos
Antes de comenzar, realice los siguientes pasos:
• Asegúrese de que utiliza ThingWorx 8.4
• Descargue los ficheros de tutorial de ejemplo.
• Importe los siguientes ficheros de ejemplo en ThingWorx Platform:
◦ Mashups_CustomCssTutorialMashup
◦ Things_SampleCssFileRepo
Carga de un fichero CSS personalizado en un almacén de ThingWorx
1. En Composer, pulse en Gestionar en el panel de navegación izquierdo.
2. En Almacenes, seleccione el almacén SampleCSSFileRepo. Se enumeran todos los ficheros y las carpetas que se encuentran en el almacén.
3. En Acciones para la carpeta SampleCSSFileRepo, pulse en los puntos suspensivos (...) y, a continuación, seleccione Cargar. Se abre un cuadro de diálogo.
4. Seleccione tutorial-buttons.CSS del sistema y, a continuación, pulse en Cargar.
El fichero CSS se carga en el almacén de cosa SampleCSSFileRepo.
Adición de una clase CSS personalizada a un mashup
1. Abra el mashup Mashups_CustomCssTutorialMashup en Mashup Builder y, a continuación, pulse en Ver mashup. El mashup consta de un conjunto de botones en un conjunto de campos a los que se aplican las reglas de CSS.
2. En el panel Explorador, seleccione Mashup.
3. En el panel Propiedades, añada myMashupClass al campo CustomClass.
4. Pulse en la ficha CSS personalizada e introduzca el siguiente código CSS:
.myMashupClass .widget-fieldset .widget-button {
box-shadow: 5px 5px 5px #888888;
}
box-shadow: 5px 5px 5px #888888;
}
5. Pulse en Guardar y, a continuación, visualice el mashup. Aparecen las sombras paralelas para los botones del widget de conjunto de campos.
Adición de CSS personalizadas a un mashup
1. En el panel Explorador de Mashup Builder, seleccione button-3.
2. En el panel Propiedades, añada myButtonClass al campo CustomClass.
3. Para añadir un bloque de reglas CSS, pulse en la ficha CSS personalizada e introduzca el siguiente código CSS:
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}
text-transform: uppercase;
}
4. Pulse en Guardar y, a continuación, visualice el mashup. El segundo botón todavía tiene la sombra paralela, pero el texto aparece en mayúsculas.
Enlace de la propiedad CustomClass de un widget
1. En Mashup Builder, abra el panel Explorador y seleccione eventsrouter-6.
2. Enlace la salida de eventsrouter-6 a la propiedad CustomClass de button-4.
3. Pulse en la ficha CSS personalizada e introduzca el siguiente código CSS:
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}
.myBoundButtonClass1 .widget-button,
.myBoundButtonClass1 .widget-button .button-element {
border-radius: 15px 0 15px 0;
}
.myBoundButtonClass2 .widget-button,
.myBoundButtonClass2 .widget-button .button-element {
border-radius: 0 15px 0 15px;
}
text-transform: uppercase;
}
.myBoundButtonClass1 .widget-button,
.myBoundButtonClass1 .widget-button .button-element {
border-radius: 15px 0 15px 0;
}
.myBoundButtonClass2 .widget-button,
.myBoundButtonClass2 .widget-button .button-element {
border-radius: 0 15px 0 15px;
}
4. Pulse en Guardar y, a continuación, visualice el mashup.
5. Pulse en el primer botón Aplicar para añadir myBoundButtonClass1 al tercer botón del widget de conjunto de campos y, a continuación, pulse en el segundo botón Aplicar. El radio del borde del botón cambia en función de la clase CSS que se aplica.
Importación de un fichero CSS personalizado
En el siguiente procedimiento se describe cómo importar un fichero CSS desde un almacén de ThingWorx. El fichero permite aplicar cambios de animación y opacidad a los widgets de botón dentro del widget de conjunto de campos:
@keyframes buttonSlideIn {
0% { left: 100px; opacity: 0 }
100% { left: 0; opacity: 1 }
}
.widget-fieldset .widget-button {
animation: buttonSlideIn 2s;
opacity: 0.5;
}
.widget-fieldset .widget-button:hover {
opacity: 1;
0% { left: 100px; opacity: 0 }
100% { left: 0; opacity: 1 }
}
.widget-fieldset .widget-button {
animation: buttonSlideIn 2s;
opacity: 0.5;
}
.widget-fieldset .widget-button:hover {
opacity: 1;
1. En Composer, pulse en la ficha CSS personalizada e introduzca el siguiente código CSS:
@import url("/Thingworx/FileRepositories/SampleCssFileRepo/tutorial-buttons.css");
2. Pulse en Guardar y, a continuación, visualice el mashup. Los botones se animan, se mueven desde la derecha y se desvanecen. Una vez completada la animación (2 segundos), la opacidad de los botones está al 50 % hasta que se pasa por encima de ellos.