git.iko.soy/typeable/elm-ui
on master help sign in
Multiline Input case
94ce612Matthew Griffith
cases/elm.jsonnew file+25
@@ -0,0 +1,25 @@
1+{
2+ "type": "application",
3+ "source-directories": [
4+ "open",
5+ "../src/"
6+ ],
7+ "elm-version": "0.19.0",
8+ "dependencies": {
9+ "direct": {
10+ "elm/browser": "1.0.0",
11+ "elm/core": "1.0.0",
12+ "elm/html": "1.0.0",
13+ "elm/json": "1.0.0",
14+ "elm/virtual-dom": "1.0.0"
15+ },
16+ "indirect": {
17+ "elm/time": "1.0.0",
18+ "elm/url": "1.0.0"
19+ }
20+ },
21+ "test-dependencies": {
22+ "direct": {},
23+ "indirect": {}
24+ }
25+}
cases/open/MultilineInput.elmnew file+89
@@ -0,0 +1,89 @@
1+module Main exposing (main)
2+
3+import Browser
4+import Element exposing (..)
5+import Element.Input exposing (labelLeft, multiline)
6+import Html exposing (Html)
7+import Html.Events exposing (onClick)
8+
9+
10+type alias Model =
11+ { count : Int }
12+
13+
14+initialModel : Model
15+initialModel =
16+ { count = 0 }
17+
18+
19+type Msg
20+ = Increment
21+ | Decrement
22+ | MLChanged String
23+
24+
25+update : Msg -> Model -> Model
26+update msg model =
27+ case msg of
28+ Increment ->
29+ { model | count = model.count + 1 }
30+
31+ Decrement ->
32+ { model | count = model.count - 1 }
33+
34+ MLChanged s ->
35+ model
36+
37+
38+testtxt =
39+ "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?"
40+
41+
42+testtxtnewlines =
43+ """orem Ipsum is simply dummy text of the printing
44+and typesetting industry. Lorem Ipsum has been the industry's
45+standard dummy text ever since the 1500s, when an unknown
46+printer took a galley of type and scrambled it to make a type specimen book.
47+It has survived not only five centuries, but also the leap into electronic
48+typesetting
49+, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?"""
50+
51+
52+view : Model -> Html Msg
53+view model =
54+ layout [] <|
55+ column
56+ [ width (px 500)
57+ , spacing 50
58+ ]
59+ [ multiline []
60+ { onChange = MLChanged
61+ , text = testtxt
62+ , placeholder = Nothing
63+ , spellcheck = False
64+ , label = labelLeft [ width (px 200) ] <| text "Default height"
65+ }
66+ , multiline [ height shrink ]
67+ { onChange = MLChanged
68+ , text = testtxt
69+ , placeholder = Nothing
70+ , spellcheck = False
71+ , label = labelLeft [ width (px 200) ] <| text "Shrink - no nl"
72+ }
73+ , multiline [ height shrink ]
74+ { onChange = MLChanged
75+ , text = testtxtnewlines
76+ , placeholder = Nothing
77+ , spellcheck = False
78+ , label = labelLeft [ width (px 200) ] <| text "Shrink - w/nl"
79+ }
80+ ]
81+
82+
83+main : Program () Model Msg
84+main =
85+ Browser.sandbox
86+ { init = initialModel
87+ , view = view
88+ , update = update
89+ }