如何在榆木中获得时尚 [英] How to get style in Elm

问题描述

我从Elm开始，当您要设置样式时，可以将其嵌入到组件中:Html.Attribute.style List (String, String)

I'm starting with Elm and when you want to set style you can simply embed it on your component: Html.Attribute.style List (String, String)

但是我找不到一种方法来 获取 而不是设置样式.实际上，我需要的是特定Html msg的line-height(CSS属性).我读过一些有关使用自定义解码器(与Json.Decode.at一起使用)的信息，但我仍然没明白.

But I can't find a way to get the style instead of set. What I need, actually, is the line-height (CSS attribute) of a specifc Html msg. I read a little about using a custom decoder (with Json.Decode.at) but I still didn't get it.

推荐答案

Mateus，我刚开始使用榆木，因此请考虑一下它的价值.

Mateus, I'm just starting w/ elm so take this for what it's worth.

收到事件时，可以询问事件目标以获取有关该事件或相关元素的信息.显然，缺少一个事件，(目前)没有一种方法可以随意"地拉出值(请参阅下面的* 1)

When you receive an event you can interrogate the event target to get information about it, or a relative element. Apparently, absent an event there isn't (currently) a way to "reach into" the DOM at pull out values willy-nilly (see *1 below)

资源:

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

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

回到您的问题，原来设置为[[key1，val1)...(keyn，valn)]的样式变成了{key1:val1，... keyn:valn}. (我是通过调试elm的已编译代码来找到的……然后在其他地方查看它的文档；转到图.)

Back to your question, turns out what's set as style [(key1, val1)...(keyn, valn)] gets turned into {key1:val1, ...keyn:valn}. (I find this by debugging elm's transpiled code ... then see documentation elsewhere about it; go figure.)

请参见下文以获取行高.我想获得所有样式的列表可能会更有用.修改后的示例如下:

See below to get line-height specifically. I suppose it could be more useful to get a list of all styles. Revised sample follows:

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)

这篇关于如何在榆木中获得时尚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！