今日覚えること
Element.el
とElement.Attribute msg
型
el : List (Attribute msg) -> Element msg -> Element msg
はじめに
#1
では文字列をただ表示しただけでした。
今日はアプリケーションらしく見た目を飾ってみましょう
Attribute msg
型
elm-uiでは要素の修飾をAttribute msg
型でおこないます
パッケージサイトをみてください。Element.Background
やElement.Border
, Element.Font
に見た目に関わるAttribute関数が置いてあります
今日はElement.Background.color
関数を使って背景色をつけてみます
テキストに背景色をつける
Element.el
は雑にいうとdivです。text
にはAttribute
が指定できないのでel
を噛ましてそこに指定していきます
el [] <| text "Hello, world."
text
をel
でつつんで
el [ Background.color <| rgb255 255 169 85 ] <| text "Hello, world."
背景色を指定します
サイズを変更する
これだけじゃさみしいのでサイズも変更してみましょう
el [ Background.color <| rgb255 255 169 85
, width <| px 200
, height <| px 200
]
<| text "Hello, world."
Element.width
とElement.height
を使って要素のサイズを指定することできます、
今回はピクセルでサイズを指定してみました。200×200の四角形になりました
終わり
今日は要素をスタイリングしてみました
宿題
- 要素にボーダーを付けてみましょう
- 文字サイズを32pxにしてみましょう
#elm_ui_from_0
をつけてTwitterでつぶやいてみてね