Replies: 1 comment 7 replies
-
Beta Was this translation helpful? Give feedback.
-
|
Thanks @amoghyermalkar123 I gotta say, it's quite an unintuitive design decision to be using dynamic styles via creating a CSS class. Pretty much any HTML templating language since the 90s has been able to just create dynamic inline styles. |
Beta Was this translation helpful? Give feedback.
-
|
It seems that the reason for this is to ensure sanitised CSS only in templ (at least that's my reading of the docs), but, how about abusing the templ.Attributes spreading to achieve it? templ Index() {
<h1 { styles("blue")... }>Templ Components</h1>
}
func styles(bgColor string) templ.Attributes {
return templ.Attributes{"style": fmt.Sprintf("color:red;background-color:%s", bgColor)}
}btw, the error I see when trying to have a calculated EDIT: Just also tried this and it seems to work as well: templ Index() {
<h1 { templ.Attributes{"style":"color:"+"green"}... }>Templ Components</h1>
}I can only presume that this works as the attributes are sanitised in some way... |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @pharrisee the attributes solution works well. Not sure why CSS would need to be sanitized to be honest. Another point regarding the Finally, creating new classes for every variation of some values can be highly inefficient compared to inline styles. In my benchmark I got approx 3x performance with inline styles. |
Beta Was this translation helpful? Give feedback.
-
|
For reference this is what ended up working: templ Tiles(tiles []Tile) {
for _, tile := range tiles {
<div class="tile" {templ.Attributes{"style":"top:" + tile.x + "px;left:" + tile.y + "px;"}...}></div>
}
} |
Beta Was this translation helpful? Give feedback.
-
Seems as this is similar to the way react does style attributes but this allows you to insert go variables into the code. |
Beta Was this translation helpful? Give feedback.
-
I'm having an issue where I need a dynamic
styleattribute string:But
templ generatereturns an error:The error doesn't make much sense (sorry). After trial and error I figured out the issues seems to be the dynamic
styleattribute. From the docs it seems I should be able to use strings for dynamic HTML attributes:What am I doing wrong?
Beta Was this translation helpful? Give feedback.
All reactions