Styles applied based on database content result

At a glance

The community member is pulling text ("Easy", "Medium", "Hard") from a database and wants to apply Webstudio tags to style the results based on the value (Easy = green, Medium = yellow, Hard = red). Another community member suggests binding the data to the "Show" property on three instances with different styles. The original poster then asks how to do this, and another community member provides a hint that the syntax is JavaScript and refers to an article on the Webstudio expression editor. The original poster thanks the community member for the information.

Useful resources

vvoxelRaptor

I'm pulling text ("Easy", "Medium", "Hard") from a database. I want to apply Webstudio tags to style the results based on the value. Basically: Easy = green, Medium = yellow, Hard = red. How would you do this?
Example image:

4 comments

BBogdan

You can bind your data to "Show" property on three instances with different styles

vvoxelRaptor

Thanks @TrySound . I see there is an expression editor tied to the show property. How would you do this? If not null then show? Not sure of the syntax here. Thanks.

BBogdan

Syntax is javascript
Check this article
https://createtoday.io/posts/webstudio-expression-editor-cheat-sheet

vvoxelRaptor

Thanks! I'll check it out.

Add a reply

Join the Webstudio community

Styles applied based on database content result