elm-uiのInputまとめ

結構忘れてしまうので自分用にまとめていきます。
それぞれ Ellie でサンプルを用意しています。

随時加筆編集していきます。

一部サンプルに自作の hexColor というパッケージを利用しています。

( Figma 使っていると hex の方がカラーコードコピーしてくるのに楽なんですよね)

ボタン

とりあえず表示

https://ellie-app.com/b56yQxwfyy2a1

Input.button [] { label = text "Button", onPress = Nothing }

paddingで押しやすく

https://ellie-app.com/b56w9PyYD8Da1

Input.button
    [ padding 10
    ]
    { label = text "Button", onPress = Nothing }

カウンターのサンプル

https://ellie-app.com/b56PNwrm6Cfa1

テキスト

width は fill にしておくと楽。

1行

とりあえず表示

Input.text []
    { onChange = Input
    , text = ""
    , placeholder = Nothing
    , label = Input.labelHidden ""
    }

placeholder

https://ellie-app.com/b56Cv52grqxa1

Just <| Input.placeholder [] <| text "ここに入力してね"のような形式でスタイリングできる。

Input.text [ width fill ]
    { onChange = Input
    , text = model
    , placeholder = Just <| Input.placeholder [] <| text "ここに入力してね"
    , label = Input.labelHidden ""
    }

• 色も変えられるので便利

https://ellie-app.com/b5nm68bYyxka1

labelについて

• 基本 5 種類

非表示

https://ellie-app.com/b56Cv52grqxa1

label = Input.labelHidden ""

上

https://ellie-app.com/b5nRZwPMLXca1

label = Input.labelAbove [] <| text "ラベル"

下

https://ellie-app.com/b5nSLrRJbq3a1

label = Input.labelBelow [] <| text "ラベル"

左

https://ellie-app.com/b5nTkB9gtZza1

label = Input.labelLeft [] <| text "ラベル"

右

https://ellie-app.com/b5nTN9nkG2qa1

label = Input.labelRight [] <| text "ラベル"

複数行

• いわゆる textarea
• height でサイズ変更

https://ellie-app.com/b56pgDVpbyYa1

Input.multiline [ width fill, height <| px 100 ]
    { onChange = Input
    , text = model
    , placeholder = Nothing
    , label = Input.labelHidden ""
    , spellcheck = False
    }