when creating a personal widget you can control an by either “original” CSS or by “F7 CSS”
(e.g. border-color vs --f7-button-border-color).
Is there any advantage of one over the other?
Hey @Oliver2,
‘f7-css’ is also ‘original’ css, just in form of a framework7 specific css-variable. These variables may apply to multiple elements in a document and makes editing easier.
It depends - there are many component styles, you only can access via f7-css-variables (for example, the hover color of a button --f7-button-hover-bg-color etc etc…)
Further more you can use these variables to set styles for the whole page at a central point. To stay on the example of your mentioned `f7-button-border-color’:
In the case of this variable, it will assign the current theme-color as the button border-color (--f7-button-border-color: var(--f7-theme-color)
So you can change the theme-color for your complete widget (if applied to the root element), without rewriting css for each button.
YAML example
uid: test
component: f7-card
config:
style:
--f7-theme-color: green
slots:
default:
- component: f7-button
config:
text: "Button #1"
outline: true
- component: f7-button
config:
text: "Button #2"
outline: true
- component: f7-button
config:
text: "Button #3"
outline: true
But if you just want to apply styling to a single component, it does not realy matter if you use the f7-css-variables or plain css, afaik.
Many thanks Rainer, this makes things much clearer now.!
border-color will only work on the element where you put the style configuration.
CSS variables like --f7-button-border-color will be inherited to descendants in the tree, either by your own components or by f7 components (or their OH derivatives) that make use of these variables.
By the way you can configure your own CSS variables to leverage this possibility, for example:
config:
style:
--my-color: =props.color
slots:
...
...
...
config:
style:
background-color: var(--my-color)