@@ -5,7 +5,7 @@ import Element exposing (..)
55import Element.Background as Background
66import Element.Border as Border
77import Element.Font as Font
8−import Element.Input exposing (labelAbove, multiline)
8+import Element.Input as Input exposing (labelAbove, multiline)
99import Html exposing (Html)
1010import Html.Events exposing (onClick)
1111
@@ -38,6 +38,18 @@ update msg model =
3838 model
3939
4040
41+examplePlaceholder =
42+ Input.placeholder [ Font.color (rgb 0.2 0.2 0.8) ] (text "My placeholder...")
43+
44+
45+examplePlaceholderLong =
46+ Input.placeholder [ Font.color (rgb 0.2 0.2 0.8) ] (text "My placeholderMy placeholderMy placeholderMy placeholderMy placeholderMy placeholderMy placeholderMy placeholder...")
47+
48+
49+background =
50+ Background.color (rgb 0 1 0)
51+
52+
4153testtxt =
4254 """orem Ipsum is simply dummy text of the printing
4355and typesetting industry. Lorem Ipsum has been the industry's
@@ -81,7 +93,7 @@ view model =
8193 , centerX
8294 ]
8395 [ rowTest "Heights"
84− [ multiline []
96+ [ multiline [ background ]
8597 { onChange = MLChanged
8698 , text = testtxt
8799 , placeholder = Nothing
@@ -89,7 +101,7 @@ view model =
89101 , label =
90102 label "Default"
91103 }
92− , multiline [ height shrink ]
104+ , multiline [ background, height shrink ]
93105 { onChange = MLChanged
94106 , text = testtxt
95107 , placeholder = Nothing
@@ -97,7 +109,7 @@ view model =
97109 , label =
98110 label "Height shrink"
99111 }
100− , multiline [ height fill ]
112+ , multiline [ background, height fill ]
101113 { onChange = MLChanged
102114 , text = testtxt
103115 , placeholder = Nothing
@@ -105,7 +117,7 @@ view model =
105117 , label =
106118 label "Height Fill"
107119 }
108− , multiline [ height (px 200) ]
120+ , multiline [ background, height (px 200) ]
109121 { onChange = MLChanged
110122 , text = testtxt
111123 , placeholder = Nothing
@@ -197,6 +209,74 @@ view model =
197209 , label = label "Height 200, Padding 0"
198210 }
199211 ]
212+ , rowTest "Placeholders"
213+ [ multiline []
214+ { onChange = MLChanged
215+ , text = ""
216+ , placeholder = Just examplePlaceholder
217+ , spellcheck = False
218+ , label =
219+ label "Default"
220+ }
221+ , multiline [ height shrink ]
222+ { onChange = MLChanged
223+ , text = ""
224+ , placeholder = Just examplePlaceholder
225+ , spellcheck = False
226+ , label =
227+ label "Height shrink"
228+ }
229+ , multiline [ height fill ]
230+ { onChange = MLChanged
231+ , text = ""
232+ , placeholder = Just examplePlaceholder
233+ , spellcheck = False
234+ , label =
235+ label "Height Fill"
236+ }
237+ , multiline [ height (px 200) ]
238+ { onChange = MLChanged
239+ , text = ""
240+ , placeholder = Just examplePlaceholder
241+ , spellcheck = False
242+ , label =
243+ label "Height 200px"
244+ }
245+ ]
246+ , rowTest "Long Placeholders"
247+ [ multiline []
248+ { onChange = MLChanged
249+ , text = ""
250+ , placeholder = Just examplePlaceholderLong
251+ , spellcheck = False
252+ , label =
253+ label "Default"
254+ }
255+ , multiline [ height shrink ]
256+ { onChange = MLChanged
257+ , text = ""
258+ , placeholder = Just examplePlaceholderLong
259+ , spellcheck = False
260+ , label =
261+ label "Height shrink"
262+ }
263+ , multiline [ height fill ]
264+ { onChange = MLChanged
265+ , text = ""
266+ , placeholder = Just examplePlaceholderLong
267+ , spellcheck = False
268+ , label =
269+ label "Height Fill"
270+ }
271+ , multiline [ height (px 200) ]
272+ { onChange = MLChanged
273+ , text = ""
274+ , placeholder = Just examplePlaceholderLong
275+ , spellcheck = False
276+ , label =
277+ label "Height 200px"
278+ }
279+ ]
200280 ]
201281
202282