The following is an example screen where the label components were created then all given the same Style Class, which has settings for text weight, font family, background color, and border.
To delete a Style Class, right-click on the style class name in the Project Browser, then select Delete. When a Style Class is deleted, it is no longer applied to any components it was previously applied to. The component returns to the default style settings with the exception of any inline styles. Inline styles will remain applied to the component.
To rename a Style Class, right-click on the Style Class name in the Project Browser, then select Rename. Once a Style Class is renamed, it will no longer be applied to any components it was previously applied to.
You can lock a Style Class from inside Designer by opening the Project Browser, right-clicking on the Style Class, and selecting the Protect option to protect it. Once it's protected, it cannot be changed except by someone that has the permission to unprotect it and modify it. For more information on protecting project resources see Project Security in Designer.
Perspective allows you to select more than one Style Class for a component. Multiple Style Classes are applied in alphabetical order. Style classes further along in the alphabet will override earlier style classes. The overrides occur only for properties that are set in multiple classes.
In the example below, Bravo style class is blue, bold, italic, and 13px text with some borders. Charlie style class is red, bold, and 16px text.
When both styles are applied together, the color and text size in Charlie style class override Bravo. However, the italics and borders from Bravo remain because Charlie does not have those properties set.
You can also apply inline styles to components that have a style class. The inline style properties override any properties in the style class. For example, if the style class has a properties of 22pt bold text with a color of blue, but there is an inline style property of 18 pt bold text with a color of orange, the component will receive the inline style properties. In this example, we applied the Alpha style to a label and the applied inline styles of a bottom and right border.
The following properties appear when the Animated checkbox is set to True.
|Duration||Number of seconds for each animation stop.|
|Direction||Options are normal, reverse, alternate, and alternate reverse.|
|Iterations||Number of times you want the animation to run. Enter an integer, or check the infinite box to have the animation run continually.|
|Timing||Options are linear, ease, easeIn, easeOut, stepStart, stepEnd, and exaggerate.|
|Delay||Delay, in number of seconds.|
Options are none, forwards, backwards, or both.
|0% to 100%||Animation stops. All of the animation and style settings can be set for each stop. Additional stops can be added by right-clicking on the bar in between 0% and 100%.|
Sets the styles for an animation stop. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous.
Displays the style names and settings as you add them to a component.
In the Background color field, enter a color code or click on the color wheel to select a background color for the first animation stop. We chose #FF8A8A, a light red.
In this example, we use the InAlarm style class and Label component we set up in the previous example.
State of the component. Options are as follows:
If checked, the Element State can be animated. The animate options are as follows:
In this example, we have a Style Class called HoverLabel. The base style for this class has some text settings and border settings. We applied the class to two Label components on view. Let's set up an element state that will change the background color of the component if a user hovers over the component with a mouse.
|min-width||Sets the minimum width in pixels. If the viewport is larger than the specified width (in pixels), this rule will be applied. If the viewport is smaller than the minimum width, this rule has no effect. For example, a setting of min-width 361 means this rule is active if the screen is at least 361 pixels wide.|
|max-width||Sets the maximum width in pixels. If the viewport is smaller than the maximum width, it will automatically change the height of the element. If the viewport is larger than the maximum width, rule has no effect. For example, a setting of max-width 360 means this rule is active if the screen is at most 360 pixels wide or smaller.|
|orientation||This rule will apply based on whether the browser window is in landscape mode (that is, its width is greater than its height) or portrait mode (its height is greater than its width). Options are portrait or landscape.|
|min-aspect-ratio||Sets a minimum width-to-height aspect ratio. Enter value as a ratio or width-to-height, for example 8/5.|
|max-aspect-ratio||Sets a maximum width-to-height aspect ratio. Enter value as a ratio or width-to-height, for example 8/5..|
Applies the style settings when the device supports hovering. Options are hover or none.
The style settings to apply during the media query. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous.
For the following example, we placed a Label component with no style class on a view.