Created
February 18, 2021 17:36
-
-
Save PascalLeMerrer/0e3074a889ebb5bdbc3b99d602638d95 to your computer and use it in GitHub Desktop.
Custom container in Elm Infinite List
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
infiniteListConfig : State a -> IL.Config (Item a) (Msg a) | |
infiniteListConfig state = | |
IL.config | |
{ itemView = viewRow state | |
, itemHeight = IL.withConstantHeight state.config.lineHeight | |
, containerHeight = Basics.round state.containerHeight | |
} | |
|> IL.withOffset 300 | |
|> IL.withCustomContainer customContainer | |
customContainer : List ( String, String ) -> List (Html.Html msg) -> Html.Html msg | |
customContainer styles children = | |
Html.div | |
[ Html.Attributes.style "margin" "0px" | |
, Html.Attributes.style "padding" "0px" | |
, Html.Attributes.style "box-sizing" "border-box" | |
, Html.Attributes.style "display" "flex" | |
, Html.Attributes.style "flex-direction" "column" | |
, Html.Attributes.style "background-color" "#ffdf2a" | |
-- to fill all remaining height | |
, Html.Attributes.style "flex" "2" | |
, Html.Attributes.style "width" "100%" | |
] | |
children |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment