git.iko.soy/typeable/elm-ui
on f4cd4da help sign in
typeable/elm-ui/src/Element/Keyed.elm
70 lines 1.9 kB history raw
1module Element.Keyed exposing (el, column, row)
3{-| Notes from the `Html.Keyed` on how keyed works:
5---
7A keyed node helps optimize cases where children are getting added, moved, removed, etc. Common examples include:
9 - The user can delete items from a list.
10 - The user can create new items in a list.
11 - You can sort a list based on name or date or whatever.
13When you use a keyed node, every child is paired with a string identifier. This makes it possible for the underlying diffing algorithm to reuse nodes more efficiently.
15This means if a key is changed between renders, then the diffing step will be skipped and the node will be forced to rerender.
17---
19@docs el, column, row
21-}
23import Element exposing (Attribute, Element, fill, height, shrink, width)
24import Internal.Model as Internal
25import Internal.Style exposing (classes)
28{-| -}
29el : List (Attribute msg) -> ( String, Element msg ) -> Element msg
30el attrs child =
31 Internal.element
32 Internal.asEl
33 Internal.div
34 (width shrink
35 :: height shrink
36 :: attrs
37 )
38 (Internal.Keyed [ child ])
41{-| -}
42row : List (Attribute msg) -> List ( String, Element msg ) -> Element msg
43row attrs children =
44 Internal.element
45 Internal.asRow
46 Internal.div
47 (Internal.htmlClass (classes.contentLeft ++ " " ++ classes.contentCenterY)
48 :: width shrink
49 :: height shrink
50 :: attrs
51 )
52 (Internal.Keyed children)
55{-| -}
56column : List (Attribute msg) -> List ( String, Element msg ) -> Element msg
57column attrs children =
58 Internal.element
59 Internal.asColumn
60 Internal.div
61 (Internal.htmlClass
62 (classes.contentTop
63 ++ " "
64 ++ classes.contentLeft
65 )
66 :: height shrink
67 :: width shrink
68 :: attrs
69 )
70 (Internal.Keyed children)