Please teach me the different between Style Classes vs ExtendedClass. Many Thanks!
Hello Tony Dai Ka HD,
Check this documentation link:
Best regards,
Ana
Hello Ana, I think you don't get me yet, I mean both of it all from reactive mode. Not traditional.
Example: you try to the drop-down search wiget and you will see the property named ExtendedClass not Style Classes
I think the link to OutSystems documentation Ana provided covers your question pretty extensively. It doesn't matter if you are developing Reactive or Traditional app, documentation tells you what are the expected differences when using CSS classes depending on your selected app type.
In addition, you can check the documentation on creating / reusing screen blocks or how to use specific Patterns (like the dropdown search you mentioned).
As you have noticed, there is a difference between platform basic UI widgets and web block widgets (=patterns). If you think this in terms of underlying web technologies, platform provided "basic" elements/widgets can be mapped to HTML elements and web blocks/patterns are quite equal to react components. When you are dealing with basic UI widget, you can change or set basically any attribute for generated html element to any value using "Attributes" section of that widget. "Style classes" property in these basic UI widgets is just a convenience shorthand for HTML element "style" attribute (which you can also overwrite using "Attributes" section).
When you are developing or using a pre-made web block/pattern, the usual convention is to expose some key styling properties as a parameter named "ExtendedClass", so anyone using these web block widgets can change the looks of the widget using their own CSS classes.
In short - For both "Style Classes" and "ExtendedClass" properties, the expected value is (usually) a case sensitive CSS class name, which is defined in your CSS stylesheet.
Hello,
In practice, they're the same thing. Whatever you put in there will end up as a CSS class in the final HTML element's "class" attribute.
"Style classes" is used for the built-in elements you can use in your applications, like inputs, labels, expressions, and so on. "Extended class" is usually an input parameter to a custom block that allows you to customize that block's look-and-feel.
Hi,
The ExtendedClass you mentioned is the input of the block, that you can customize that Widget styles.