如何獲得風格榆樹

Question

我開始用榆木，當你想設置風格，你可以簡單地把它嵌入您的組件上：Html.Attribute.style List (String, String)

但我不能找到一個辦法得到風格而不是集合。實際上，我需要的是特定Html msg的line-height（CSS屬性）。我讀了一點關於使用自定義解碼器（與Json.Decode.at），但我仍然沒有得到它。

Answer 1

馬特烏斯，我剛剛開始瓦特/榆樹，所以拿這是值得的。

當您收到一個事件時，您可以詢問事件目標以獲取有關它的信息或相關元素。顯然，在沒有沒有（目前）的方式來「深入到」在拉出值不管三七二十一的DOM事件（見* 1以下）

資源：

* 1：https://medium.com/@debois/elm-the-dom-8c9883190d20

* 2：https://robots.thoughtbot.com/building-custom-dom-event-handlers-in-elm

回到你的問題，變成了什麼設置爲風格[（KEY1，VAL1）...（keyn，VALN）被變成{鍵：VAL1，... keyn：VALN }。 （我通過調試elm的編譯代碼找到了這個...然後在其他地方看到關於它的文檔;請看圖）

請參閱下面的內容以獲取行高。我想，獲取所有樣式的列表可能會更有用。修改後的示例如下：

import Html exposing (..) 
import Html.Attributes exposing (..) 
import Html.Events exposing (on) 
import Json.Decode 


main = 
    beginnerProgram { model = "", view = view, update = update } 

type Msg = Attr StyleStruct 

type alias StyleStruct = 
    {lineHeight: String} 


view model = 
    div [] 
    [ button [ id "btn" 
     , class "cls" 
     , style [("color", "green"), ("line-height", "3em")] 
     , myOnClick Attr ] 
     [ text "Show line-height" ] 
    , div [] [ text ("(" ++ model ++ ")")] 
    ] 

update msg model = 
    case msg of 
    Attr v1 -> 
     toString v1 

targetStyle = 
    Json.Decode.map StyleStruct 
    (Json.Decode.at ["target", "style"] styleStructDecoder) 

styleStructDecoder = 
    Json.Decode.at ["line-height"] Json.Decode.string 


myOnClick : (StyleStruct -> msg) -> Html.Attribute msg 
myOnClick tagger = 
    on "click" (Json.Decode.map tagger targetStyle)