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 ]
]- https://ellie-app.com/7f8nvkjCrD6a1
- mdgriffith/elm-ui#158
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).