This repo aims to gather knowledge from https://elmlang.slack.com #elm-ui or elsewhere.
PRs welcomed.
- examples directory.
- web interface to control mpv https://github.com/rofrol/elm-mpv-webui
- slider https://github.com/rofrol/elm-mpv-webui/blob/master/webui-page/src/Slider.elm
- more examples https://github.com/bburdette/elm-ui-examples
- even more examples https://github.com/objarni/elm-ui-examples
- "elm-ui Patterns" by Alex Korban https://korban.net/elm/elm-ui-patterns/
- ellies catalog: search for "elm-ui" https://janiczek-ellies.builtwithdark.com/
mthiems 2:33 AM
@VPagani I've seen this before, and I think this may be a bug in the current version of elm-ui. It seems the input DOM element needs a text-align: inherit style, as the text-align: center is on a parent div instead of on the input itself. Here's an Ellie illustrating one option for a workaround that makes it work:
https://ellie-app.com/6GQLrcSt7hWa1
mgriffith:bulb: 3:06 AM Ah, yeah, the current way to do that is to capture your spacing a font values in a palette file and always use those. Then you could do things like set the padding based on font size or whatever you’d like.
https://elmlang.slack.com #elm-ui
blackeuler 4:46 AM Is there any strategy when it comes to structing the code? I feel like I have a lot of code in the one file all mainly for the view of the page.
mgriffithbulb 4:58 AM First suggestion is to take all values and put them in one file (colors, spacing/padding values, font sizes and font families). I usually call this file UI After that, if you find a reusable part of a view, I’d put it in it’s own sub module. So, buttons go in UI.Button. Though it’s also fine to have big files.
https://elmlang.slack.com #elm-ui
row [ width fill ]
[ paragraph
[ Font.color model.style.color
, Font.size 40
, Html.Attributes.style "word-break" "break-all" |> htmlAttribute
]
[ text model.status.filename ]
]'overflow-wrap: break-word' will not work when paragraph inside row so this solution https://stackoverflow.com/questions/3058866/how-to-force-a-line-break-in-a-long-word-in-a-div/3059128#3059128 is bad for flexbox.
You can't
Examples in source code https://github.com/mdgriffith/elm-ui/blob/1.1.5/src/Element/Events.elm#L177 but are not exported
Examples in source code but on exported https://github.com/mdgriffith/elm-ui/blob/1.1.5/src/Element/Events.elm#L115
colorToRgbaString color =
let
floatTo256 f =
if f >= 1 then
255
else
floor (f * 256)
rgba =
Element.toRgb color
floatToString f =
String.pad 2 '0' (String.fromInt (floatTo256 f))
in
"rgba("
++ floatToString rgba.red
++ ", "
++ floatToString rgba.green
++ ", "
++ floatToString rgba.blue
++ ", "
++ floatToString rgba.alpha
++ ")"colorToRgbaAttr color =
let
{ red, green, blue, alpha } =
toRgb color
rgb =
[ red, green, blue ] |> List.map ((*) 255 >> String.fromFloat) |> List.intersperse ", " |> List.foldl (++) ""
in
Html.Attributes.style "color" ("rgba(" ++ rgb ++ "," ++ String.fromFloat alpha ++ ")")wrap each button in an Element.el
https://ellie-app.com/5NtSNBJ4bzFa1
mdgriffith/elm-ui#47 (comment)
Sophie [Yesterday at 10:24 PM]
Is there a way to specify em values in elm-ui?
jhbrown [12 hours ago] There is not. Just px and percents.
https://elmlang.slack.com #elm-ui
jesse 7 minutes ago We primarily use elm-ui and also have external Sass styling too and it’s fine jesse 6 minutes ago You may need to use https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#noStaticStyleSheet
https://elmlang.slack.com #news-and-links
Use Border instead:
[ Border.color <| rgba255 255 255 255 255
, Border.widthEach
{ bottom = 1
, left = 0
, top = 0
, right = 0
}
, mouseOver [ Border.color <| rgb255 255 0 0 ]
]Spacing is the distance between contained elements. You are looking for "padding" on the container (to specify how near to the borders of the container the contained elements can be).