elm-uiのInputまとめ

公開:2020/09/26
更新:2020/10/02
3 min読了の目安(約2700字TECH技術記事

結構忘れてしまうので自分用にまとめていきます。
それぞれ 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
    }