as I got the syntax to use props in background-image from JustinG (thanks again), I have a additional question
This is the syntax I use
background-image: ='linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url(\/static\/images\/' + props.image + '.jpg)'
Is it possible to depends the background image on the themeOptions.dark state
White = show background image
Dark = hide background image
background-image: "=themeOptions.dark === 'dark' ? 'show not' : 'show'"
Thanks and regards
Sure is! You’re even most of the way there already. Your current
background-image value just evaluates to a string. The example ternary expression you’ve put also just evaluates to a string; it simply decides which string to use based on the condition at the beginning. So one option is to just copy your current value into the part of the ternary expression that says
'show' and put a version of the string without the
url(...) in the
'show not' portion.
This, however, gets a little long because it duplicates all the linear-gradient stuff. Fortunately, it’s pretty easy to condense this down. You can just keep the linear-gradient stuff as is and just use the ternary expression to decide whether to add the
url(...) or not. Taking into account the necessary quote formatting, with some extra
() for readability, it would look something like this:
background-image: "='linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8))' + ((themeOptions.dark == 'dark') ? '' : ', url(\/static\/images\/' + props.image + '.jpg)')"
Good morning JustinG,
what a cool solution. And again so explained that I can really take a lot.
Thanks a thousand again, works perfectly
Best regards and have a good day
This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.