Overrides Property
The property allows an element’s properties to be updated automatically based on active media or container breakpoints.
When a breakpoint becomes active, the values defined in overrides override the element’s default values, enabling responsive behavior without JavaScript.
#
How It Works
- Each key in the overrides object represents a breakpoint. See Breakpoints for details.
- The corresponding value is an object containing the properties that will be applied when that breakpoint is active.
#
Syntax
A general example of how the property can be used.
<plus-element
overrides='{
"sm": { "prop1": "value1" },
"md": { "prop1": "value2" },
"@lg": { "prop2": "value3" },
"@xl": { "prop3": "value4" },
}'
></plus-element>
#
Example
This example shows a plus-stack that is vertical by default and is automatically changed to horizontal when the container is small.
<plus-stack
vertical
overrides='{
"@sm": { "vertical": false }
}'
>
<div>1</div>
<div>2</div>
</plus-stack>