d

    dvdandroid

    7 months ago
    how to add hover to property using
    org.jetbrains.compose.web.css.StyleScope
    ? ex:
    Span({
      style { // this is org.jetbrains.compose.web.css.StyleScope, not org.jetbrains.compose.web.css.CSSBuilder
        property("color", "#fff") // <-- hover??
      }
    })
    compose
    1.1.0-alpha05
    o

    Oleksandr Karpovich [JB]

    7 months ago
    d

    dvdandroid

    7 months ago
    yeah, but i don't need (would not use) a stylesheet object for a single hover can't understand why there are 2 different apis: the one i would like to use: https://github.com/JetBrains/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt#L43 i think should use
    org.jetbrains.compose.web.css.CSSBuilder
    interface instead of
    org.jetbrains.compose.web.css.StyleScope
    the one you are suggesting: https://github.com/JetBrains/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleSheet.kt#L48
    org.jetbrains.compose.web.css.CSSBuilder
    (so hover etc..)
    David Herman

    David Herman

    7 months ago
    That's not Compose for Web's fault, that's html / css
    Basically some things you can only define in style sheets
    You can search up and read about psuedo elements and pseudo classes
    These simply aren't allowed in inline styles, which is what you are using here. In other words, your code above would translate to this element:
    <span style="color:#fff" />
    The style is defined "inline", e.g. inside the tag, vs. say
    <span class="external-style" />
    where the style info is now detached and associated with that class name and can be defined elsewhere (often a style sheet).
    It's weird for us because, in the world of Compose for Web, we're just writing Kotlin, and everything looks like code. But in the world of html / css, stylesheets are encouraged and inline styles are discouraged (because I'd assume separation of concerns / decoupling -- in theory you can swap a new stylesheet in / out and completely change the look and feel of a well written site)
    FWIW, I'm working on my own layer on top of Compose for Web which approaches this in a slightly different direction. It's called Kobweb if you wanted to check it out. With Kobweb, you could do something like this for your above example:
    val MyHoverableSpanStyle = ComponentStyle("hoverable-span") {
      base { Modifier.color(Colors.White) }
      hover { Modifier.backgroundColor(Colors.Yellow) }
    }
    
    Span(MyHoverableSpanStyle.toModifier().asAttributesBuilder()) { ... }
    I'll leave things there for now -- let me know if you had any followup questions!