Skip to content

Version 0.29.0

Latest
Compare
Choose a tag to compare
@chasefleming chasefleming released this 18 Sep 16:58
5dfb799

🚀 New Features

Pseudo-Elements Support in StyleManager

This enhancement allows developers to define styles for CSS pseudo-elements such as ::before, ::after, and others directly within Go code, enabling richer and more dynamic web interfaces.

Pseudo-Elements in CompositeStyle

You can now specify styles for pseudo-elements using the PseudoElements field in your style definitions. Here’s how to use it:

styleMgr := stylemanager.NewStyleManager()

compositeClassName := styleMgr.AddCompositeStyle(styles.CompositeStyle{
    Default: styles.Props{
        styles.Color: "black",
    },
    PseudoElements: map[string]styles.Props{
        styles.PseudoBefore: {
            styles.Content:     `"*"`,
            styles.Display:     "inline-block",
            styles.MarginRight: "5px",
            styles.Color:       "red",
        },
        styles.PseudoAfter: {
            styles.Content: `" Read more..."`,
            styles.Color:   "gray",
        },
    },
})

Usage in HTML Elements

paragraph := elem.P(
    attrs.Props{
        attrs.Class: compositeClassName,
    },
    elem.Text("This is a paragraph with pseudo-elements."),
)

Generated CSS

.cls_abcde { 
    color: black; 
}
.cls_abcde::before { 
    content: "*"; 
    display: inline-block; 
    margin-right: 5px; 
    color: red; 
}
.cls_abcde::after { 
    content: " Read more..."; 
    color: gray; 
}

🙏 Thanks to Contributors