Wie kommt man Stil in Elm

Question

ich mit Elm fange an, und wenn Sie Stil festlegen möchten, können Sie einfach einbetten auf Ihrer Komponente: Html.Attribute.style List (String, String)

Aber ich kann nicht einen Weg zu bekommen finden der Stil statt festgelegt. Was ich eigentlich brauche, ist das line-height (CSS-Attribut) eines bestimmten Html msg. Ich habe ein wenig über die Verwendung eines benutzerdefinierten Decoders gelesen (mit Json.Decode.at), aber ich habe es immer noch nicht verstanden.

Answer 1

Mateus, Ich beginne gerade mit Elm, also nimm das für das, was es wert ist.

Wenn Sie ein Ereignis empfangen, können Sie das Ereignisziel abfragen, um Informationen darüber oder ein relatives Element zu erhalten. Offenbar fehlte ein Ereignis gibt es (derzeit) nicht eine Möglichkeit, „zu erreichen in“ der DOM bei Werten herausziehen nolens volens (siehe * 1 unten)

Ressourcen:

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

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

Zurück zu Ihrer Frage, stellt sich heraus, was als Stil-set [(key1, val1) ... (keyn, valn)] wird in {key1 gedreht: val1, ... keyn: valn }. (Ich finde dies durch Debugging Ulms transpiled Code ... dann Dokumentation siehe woanders darüber; gehen Sie Abbildung.)

Siehe unten, um Zeilenhöhe speziell zu erhalten. Ich denke, es könnte nützlicher sein, eine Liste aller Stile zu bekommen. Überarbeitete Probe folgt:

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)