85da35f · typeable/elm-ui

4import Element exposing (..)

5import Element.Background as Background

6import Element.Border as Border

7+import Element.Font as Font

7import Element.Input exposing (labelAbove, multiline)

8import Element.Input exposing (labelAbove, multiline)

8import Html exposing (Html)

9import Html exposing (Html)

9import Html.Events exposing (onClick)

10import Html.Events exposing (onClick)

38

39

40

40testtxt =

41testtxt =

41− "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?"

42−

43−

44−testtxtnewlines =

45 """orem Ipsum is simply dummy text of the printing

42 """orem Ipsum is simply dummy text of the printing

46and typesetting industry. Lorem Ipsum has been the industry's

43and typesetting industry. Lorem Ipsum has been the industry's

47standard dummy text ever since the 1500s, when an unknown

44standard dummy text ever since the 1500s, when an unknown

52, 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?"""

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?"""

53

50

54

51

52+rowTest header els =

53+ column [ width fill, spacing 24 ]

54+ [ el [] (text header)

55+ , row

56+ [ width fill

57+ , height (px 800)

58+ , spacing 50

59+ , centerX

60+ , Border.width 1

61+ ]

62+ els

63+ ]

64+

65+

66+label str =

67+ labelAbove

68+ [ width (px 100)

69+ , Font.italic

70+ ]

71+ (text str)

72+

73+

55view : Model -> Html Msg

74view : Model -> Html Msg

56view model =

75view model =

57 layout [] <|

76 layout [] <|

58 column

77 column

59− [ width (px 1200)

78+ [ width (px 1500)

60 , padding 100

79 , padding 100

61− , spacing 50

80+ , spacing 500

62 , centerX

81 , centerX

63 ]

82 ]

64− [ column

83+ [ rowTest "Heights"

65− [ width (px 700)

84+ [ multiline []

66− , padding 100

85+ { onChange = MLChanged

67− , spacing 50

86+ , text = testtxt

68− , centerX

87+ , placeholder = Nothing

69− ]

88+ , spellcheck = False

89+ , label =

90+ label "Default"

91+ }

70− [ multiline [ spacing 3 ]

92+ , multiline [ height shrink ]

71 { onChange = MLChanged

93 { onChange = MLChanged

72 , text = testtxt

94 , text = testtxt

73 , placeholder = Nothing

95 , placeholder = Nothing

74 , spellcheck = False

96 , spellcheck = False

75 , label =

97 , label =

76− labelAbove

98+ label "Height shrink"

77− [ width (px 100)

78− , Background.color (Element.rgb 0.5 0.5 0.5)

79− ]

80− <|

81− text "Default height"

82 }

99 }

83− , multiline [ spacing 0, padding 10, height shrink ]

100+ , multiline [ height fill ]

84 { onChange = MLChanged

101 { onChange = MLChanged

85 , text = testtxt

102 , text = testtxt

86 , placeholder = Nothing

103 , placeholder = Nothing

87 , spellcheck = False

104 , spellcheck = False

88 , label =

105 , label =

89− labelAbove

106+ label "Height Fill"

90− [ Background.color (Element.rgb 0.5 0.5 0.5)

91− , width (px 100)

92− ]

93− <|

94− text "Shrink - no nl"

95 }

107 }

96− , multiline [ spacing 3, height shrink ]

108+ , multiline [ height (px 200) ]

97 { onChange = MLChanged

109 { onChange = MLChanged

98− , text = testtxtnewlines

110+ , text = testtxt

99 , placeholder = Nothing

111 , placeholder = Nothing

100 , spellcheck = False

112 , spellcheck = False

101− , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"

113+ , label =

114+ label "Height 200px"

102 }

115 }

103 ]

116 ]

104− , row [ width fill, height (px 400), spacing 40 ]

117+ , rowTest "Widths"

105− [ multiline [ spacing 3 ]

118+ [ multiline []

106 { onChange = MLChanged

119 { onChange = MLChanged

107 , text = testtxt

120 , text = testtxt

108 , placeholder = Nothing

121 , placeholder = Nothing

109 , spellcheck = False

122 , spellcheck = False

110 , label =

123 , label =

111− labelAbove

112− [ width (px 100)

113− , Background.color (Element.rgb 0.5 0.5 0.5)

114− ]

115− <|

116− text "Default height"

124+ label "Default"

117 }

125 }

118− , multiline [ spacing 0, padding 10, height shrink ]

126+ , multiline [ width fill ]

119 { onChange = MLChanged

127 { onChange = MLChanged

120 , text = testtxt

128 , text = testtxt

121 , placeholder = Nothing

129 , placeholder = Nothing

122 , spellcheck = False

130 , spellcheck = False

123 , label =

131 , label =

124− labelAbove

132+ label "Width fill"

125− [ Background.color (Element.rgb 0.5 0.5 0.5)

126− , width (px 100)

127− ]

128− <|

129− text "Shrink - no nl"

130 }

133 }

131− , multiline [ spacing 3, height shrink ]

134+ , multiline [ width shrink ]

132 { onChange = MLChanged

135 { onChange = MLChanged

133− , text = testtxtnewlines

136+ , text = testtxt

134 , placeholder = Nothing

137 , placeholder = Nothing

135 , spellcheck = False

138 , spellcheck = False

136− , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"

139+ , label =

140+ label "Width Shrink"

141+ }

142+ , multiline [ width (px 300) ]

143+ { onChange = MLChanged

144+ , text = testtxt

145+ , placeholder = Nothing

146+ , spellcheck = False

147+ , label = label "width 300"

137 }

148 }

138 ]

149 ]

139− , row

150+ , rowTest "Spacing"

140− [ width fill

151+ [ multiline []

141− , height (px 400)

142− , spacing 40

143− , Border.width 1

144− ]

145− [ multiline [ padding 20, spacing 20, height fill ]

146 { onChange = MLChanged

152 { onChange = MLChanged

147 , text = testtxt

153 , text = testtxt

148 , placeholder = Nothing

154 , placeholder = Nothing

149 , spellcheck = False

155 , spellcheck = False

150 , label =

156 , label =

151− labelAbove

152− [ width (px 100)

153− , Background.color (Element.rgb 0.5 0.5 0.5)

154− ]

155− <|

156− text "Default height"

157+ label "Default"

157 }

158 }

158− , multiline [ spacing 0, padding 10, height shrink ]

159+ , multiline [ spacing 30, padding 60 ]

159 { onChange = MLChanged

160 { onChange = MLChanged

160 , text = testtxt

161 , text = testtxt

161 , placeholder = Nothing

162 , placeholder = Nothing

162 , spellcheck = False

163 , spellcheck = False

163 , label =

164 , label =

164− labelAbove

165+ label "Spacing 30"

165− [ Background.color (Element.rgb 0.5 0.5 0.5)

166− , width (px 100)

167− ]

168− <|

169− text "Shrink - no nl"

170 }

166 }

171− , multiline [ spacing 3, height shrink ]

167+ , multiline [ spacing 0 ]

172 { onChange = MLChanged

168 { onChange = MLChanged

173− , text = testtxtnewlines

169+ , text = testtxt

174 , placeholder = Nothing

170 , placeholder = Nothing

175 , spellcheck = False

171 , spellcheck = False

176− , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"

172+ , label = label "Spacing 0"

177 }

173 }

178 ]

174 ]

179− , row

175+ , rowTest "Scrollable viewport with different paddings "

180− [ width fill

181− , height (px 800)

176+ [ multiline [ height (px 200), padding 30 ]

182− , spacing 40

183− , Border.width 1

184− ]

185− [ multiline [ spacing 3, height fill ]

186 { onChange = MLChanged

177 { onChange = MLChanged

187 , text = testtxt

178 , text = testtxt

188 , placeholder = Nothing

179 , placeholder = Nothing

189 , spellcheck = False

180 , spellcheck = False

190 , label =

181 , label =

191− labelAbove

182+ label "Height 200, Padding 30"

192− [ width (px 100)

193− , Background.color (Element.rgb 0.5 0.5 0.5)

194− ]

195− <|

196− text "Default height"

197 }

183 }

198− , multiline [ spacing 0, padding 10, height shrink ]

184+ , multiline [ height (px 200), padding 60 ]

199 { onChange = MLChanged

185 { onChange = MLChanged

200 , text = testtxt

186 , text = testtxt

201 , placeholder = Nothing

187 , placeholder = Nothing

202 , spellcheck = False

188 , spellcheck = False

203 , label =

189 , label =

204− labelAbove

190+ label "Height 200, Padding 60"

205− [ Background.color (Element.rgb 0.5 0.5 0.5)

206− , width (px 100)

207− ]

208− <|

209− text "Shrink - no nl"

210 }

191 }

211− , multiline [ spacing 3, height shrink ]

192+ , multiline [ height (px 200), padding 0 ]

212 { onChange = MLChanged

193 { onChange = MLChanged

213− , text = testtxtnewlines

194+ , text = testtxt

214 , placeholder = Nothing

195 , placeholder = Nothing

215 , spellcheck = False

196 , spellcheck = False

216− , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"

197+ , label = label "Height 200, Padding 0"

217 }

198 }

218 ]

199 ]

219 ]

200 ]