git.iko.soy/typeable/elm-ui
on master help sign in
placeholder examples
a73daccMatthew Griffith
cases/resolved/MultilineInput.elm+85−5
compare with master
unifiedsplit
@@ -5,7 +5,7 @@ import Element exposing (..)
5import Element.Background as Background
5import Element.Background as Background
6import Element.Border as Border
6import Element.Border as Border
7import Element.Font as Font
7import Element.Font as Font
8−import Element.Input exposing (labelAbove, multiline)
8+import Element.Input as Input exposing (labelAbove, multiline)
9import Html exposing (Html)
9import Html exposing (Html)
10import Html.Events exposing (onClick)
10import Html.Events exposing (onClick)
11
11
@@ -38,6 +38,18 @@ update msg model =
38 model
38 model
39
39
40
40
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+
41testtxt =
53testtxt =
42 """orem Ipsum is simply dummy text of the printing
54 """orem Ipsum is simply dummy text of the printing
43and typesetting industry. Lorem Ipsum has been the industry's
55and typesetting industry. Lorem Ipsum has been the industry's
@@ -81,7 +93,7 @@ view model =
81 , centerX
93 , centerX
82 ]
94 ]
83 [ rowTest "Heights"
95 [ rowTest "Heights"
84− [ multiline []
96+ [ multiline [ background ]
85 { onChange = MLChanged
97 { onChange = MLChanged
86 , text = testtxt
98 , text = testtxt
87 , placeholder = Nothing
99 , placeholder = Nothing
@@ -89,7 +101,7 @@ view model =
89 , label =
101 , label =
90 label "Default"
102 label "Default"
91 }
103 }
92− , multiline [ height shrink ]
104+ , multiline [ background, height shrink ]
93 { onChange = MLChanged
105 { onChange = MLChanged
94 , text = testtxt
106 , text = testtxt
95 , placeholder = Nothing
107 , placeholder = Nothing
@@ -97,7 +109,7 @@ view model =
97 , label =
109 , label =
98 label "Height shrink"
110 label "Height shrink"
99 }
111 }
100− , multiline [ height fill ]
112+ , multiline [ background, height fill ]
101 { onChange = MLChanged
113 { onChange = MLChanged
102 , text = testtxt
114 , text = testtxt
103 , placeholder = Nothing
115 , placeholder = Nothing
@@ -105,7 +117,7 @@ view model =
105 , label =
117 , label =
106 label "Height Fill"
118 label "Height Fill"
107 }
119 }
108− , multiline [ height (px 200) ]
120+ , multiline [ background, height (px 200) ]
109 { onChange = MLChanged
121 { onChange = MLChanged
110 , text = testtxt
122 , text = testtxt
111 , placeholder = Nothing
123 , placeholder = Nothing
@@ -197,6 +209,74 @@ view model =
197 , label = label "Height 200, Padding 0"
209 , label = label "Height 200, Padding 0"
198 }
210 }
199 ]
211 ]
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+ ]
200 ]
280 ]
201
281
202
282