You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
-
4:06Styles
-
4:47Style Classes
-
3:14Animated Style Classes
-
4:58Dynamic Style Classes
Take Topic Challenge
Supplemental Videos
-
1:54Element States
-
2:09Media Query
-
3:10Perspective Themes
LESSON
Element States
Description
Learn how to use Element States to control how the style of your Perspective component changes based on specific session conditions.
Video recorded using: Ignition 8.0
Transcript
(open in window)[00:00] In this lesson, we'll talk about Element States on style classes. So I have two Labels here. Both of them are using this style class called HoverLabel. I would like to be able to change the background color on these Labels when I hover over them. This would be a good use of an Element State. Element States live on style classes, so let's head over to our Project Browser and under the Perspective Module, under the Styles folder, we have our HoverLabel, which I'll double click on. So we have our base rules here that are making some changes to my components. But if I press the Add button, we can add an Element State. So an Element State is an additional styling configuration you can make on a style class, that takes effect when the component is in a certain state. So for example, from the little drop-down here, if I scroll down, I can select hover. So when I'm hovering my mouse cursor in front of the component, we can apply these styling changes. So how about for the background? Let's change it to a different color. So I'll click my drop-down. I'll go for this first little blue here, and we'll press okay. Let's try this in a session, so we'll go ahead and we'll save our project. I'll go to Tools, Launch Perspective, and I'll launch a session. Now you can test this out in the Designer, but of course, it's always a good idea to try things out in your session, and you can see that it's working. So when I move my mouse cursor in front of a Label, it's changing the background color. That about wraps up our video on Element States. Again, they're a fantastic way to change the style configuration on a component based on the state of the component.