CSS Properties missing some property values

[zaid-ajaj]

CSS Properties missing some property values

[Zaid-Ajaj]

I've added the rest of the missing style properties you were talking about: the border stuff for every side. Now you can specify sides inidividually:

style.borderBottomWidth 20
style.borderBottomWidth (length.em 10)
style.borderBottomColor colors.red
style.borderBottomStyle borderStyle.dashed

Update Feliz and they should be available, if there any more properties that I've missed, please let me know!

[Zaid-Ajaj]

I noticed with margin I could do: style.margin length.auto

This indeed the way to do it! I all will length.inherit and length.none to them

From what I've read it sounds like you can only specify length.em once and the others must be int, does the length propagate for them?

No, but you can specify different lengths of different formats for each side:

style.margin(<top>, <right>, <bottom>, <left>)

What value do you want to get?

I've also noticed things like BorderBottom don't exist, but I'm not sure how I can modify only the bottom value given the overloads we have now.

borderBottom isn't added yet this is because there were a lot of overloads

borderBottomColor
borderBottomStyle
borderButtomWidth
borderTopColor 
borderTopStyle 
// etc.

I can definitely add them but if you are willing to add them as well with a PR, that would be awesome ❤️

I really love what you've done so far! It's a pleasure to use.

Thanks a lot!

[Shmew]

The main issue I ran into with the current way of specifying style.margin is that if we don't know the other sides there isn't a way to just set one value. I'm using MaterialUI and so many different things could factor into what is setting the margin. If I want to modify specifically the behavior of the bottom margin, I need to know what the other values are, or use a custom attribute to set just margin-bottom.

Ah cool, it would be nice to be able to just do:

style.margin(length.em 1, length.em 0)

Instead have to do this:

style.margin(length.em 1, length.em 0, length.em 1, length.em 0)

People probably would expect it since that's something you can do in CSS (like I did).

I started working on bindings for plotly.js and react-plotly.js and saw this and so I'm going to try to write them in this style. Once that's done if those aren't implemented I'll probably do that.

[cmeeren]

Off-topic:

I'm using MaterialUI

Are you using Feliz.MaterialUI? Just curious if anyone's using it yet.

[Shmew]

Yep! Just started with it, I'd love an example of how to use muiThemeProvider and cssBaseline.
I'm getting an error when I try to use them, but I think I know how to figure it out.

[cmeeren]

Glad to know someone's using it! You might be helped by this project, which was just converted to Feliz. Feel free to post in the Feliz.MaterialUI repo if you have questions or suggestions 👍

[Zaid-Ajaj]

Ah cool, it would be nice to be able to just do:

Looks like I was missing an overload, should be added now!

a custom attribute to set just margin-bottom.

You can already specify margin-bottom on it's own

style.marginBottom (length.em 1)