97 lines
2.9 KiB
Plaintext
97 lines
2.9 KiB
Plaintext
|
package testcssusage
|
||
|
|
|
||
|
|
import (
|
||
|
|
"fmt"
|
||
|
|
"math"
|
||
|
|
)
|
||
|
|
|
||
|
|
templ StyleTagsAreSupported() {
|
||
|
|
<style>
|
||
|
|
.test {
|
||
|
|
color: #ff0000;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="test">Style tags are supported</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
// CSS components.
|
||
|
|
|
||
|
|
const red = "#00ff00"
|
||
|
|
|
||
|
|
css cssComponentGreen() {
|
||
|
|
color: { red };
|
||
|
|
}
|
||
|
|
|
||
|
|
templ CSSComponentsAreSupported() {
|
||
|
|
<div class={ cssComponentGreen() }>CSS components are supported</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
// Both CSS components and constants are supported.
|
||
|
|
// Only string names are really required. There is no need to use templ.Class or templ.SafeClass.
|
||
|
|
templ CSSComponentsAndConstantsAreSupported() {
|
||
|
|
<div class={ cssComponentGreen(), "classA", templ.Class("&&&classB"), templ.SafeClass("classC"), "d e" } type="button">Both CSS components and constants are supported</div>
|
||
|
|
// The following is also valid, but not required - you can put the class names in directly.
|
||
|
|
<div class={ templ.Classes(cssComponentGreen(), "classA", templ.Class("&&&classB"), templ.SafeClass("classC")), "d e" } type="button">Both CSS components and constants are supported</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
// Maps can be used to determine if a class should be added or not.
|
||
|
|
templ MapsCanBeUsedToConditionallySetClasses() {
|
||
|
|
<div class={ map[string]bool{"a": true, "b": false, "c": true} }>Maps can be used to determine if a class should be added or not.</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
// The templ.KV function can be used to add a class if a condition is true.
|
||
|
|
|
||
|
|
css d() {
|
||
|
|
font-size: 12pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
css e() {
|
||
|
|
font-size: 14pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
templ KVCanBeUsedToConditionallySetClasses() {
|
||
|
|
<div class={ "a", templ.KV("b", false), "c", templ.KV(d(), false), templ.KV(e(), true) }>KV can be used to conditionally set classes.</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
// Pseudo attributes can be used without any special syntax.
|
||
|
|
templ PseudoAttributesAndComplexClassNamesAreSupported() {
|
||
|
|
<div class={ "bg-violet-500", "hover:bg-red-600", "hover:bg-sky-700", "text-[#50d71e]", "w-[calc(100%-4rem)" }>Pseudo attributes and complex class names are supported.</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
// Class names are HTML escaped.
|
||
|
|
templ ClassNamesAreHTMLEscaped() {
|
||
|
|
<div class={ "a\" onClick=\"alert('hello')\"" }>Class names are HTML escaped.</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
// CSS components can be used with arguments.
|
||
|
|
|
||
|
|
css loading(percent int) {
|
||
|
|
width: { fmt.Sprintf("%d%%", percent) };
|
||
|
|
}
|
||
|
|
|
||
|
|
templ CSSComponentsCanBeUsedWithArguments() {
|
||
|
|
<div class={ loading(50) }>CSS components can be used with arguments.</div>
|
||
|
|
<div class={ loading(100) }>CSS components can be used with arguments.</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
css windVaneRotation(degrees float64) {
|
||
|
|
transform: { templ.SafeCSSProperty(fmt.Sprintf("rotate(%ddeg)", int(math.Round(degrees)))) };
|
||
|
|
}
|
||
|
|
|
||
|
|
templ Rotate(degrees float64) {
|
||
|
|
<div class={ windVaneRotation(degrees) }>Rotate</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
// Combine all tests.
|
||
|
|
templ TestComponent() {
|
||
|
|
@StyleTagsAreSupported()
|
||
|
|
@CSSComponentsAreSupported()
|
||
|
|
@CSSComponentsAndConstantsAreSupported()
|
||
|
|
@MapsCanBeUsedToConditionallySetClasses()
|
||
|
|
@KVCanBeUsedToConditionallySetClasses()
|
||
|
|
@PseudoAttributesAndComplexClassNamesAreSupported()
|
||
|
|
@ClassNamesAreHTMLEscaped()
|
||
|
|
@CSSComponentsCanBeUsedWithArguments()
|
||
|
|
@Rotate(45)
|
||
|
|
}
|