如何在Elm中实现样式

Question

如何在Elm中实现样式

csspropertiesattributeselm

3

我正在学习 Elm，当你想要设置样式时，可以简单地将其嵌入到你的组件中：Html.Attribute.style List (String, String)

但是我无法找到一种方法来获取样式而不是设置。实际上，我需要的是特定 Html msg 的 line-height（CSS 属性）。我阅读了一些关于使用自定义解码器（使用 Json.Decode.at）的文章，但仍然没有理解。

- Mateus Felipe

你能否详细解释一下你想要达到什么效果？你需要 line-height 用于什么？ - Frank Schmitt

我正在尝试实现一个流体文本框（高度根据行数增加）。通常我们通过计算行高来实现，因为css默认没有这个功能。https://github.com/ohanhi/autoexpand 是一个例子，但它在这里不起作用，而且我不喜欢它的工作方式。此外，我也不理解代码。 - Mateus Felipe

1

说句实话，我认为CSS没有“行高”单位是很奇怪的。如果我们可以写成 div {height: 3lines}，那么生活会变得轻松得多。相反，他们发明了越来越多的度量单位，这些单位对我们已经拥有的东西没有任何新的贡献。 - Mr Lister

我认为他们应该有类似于overflow: set-the-width-according-to-content-overflow的东西。 - Mateus Felipe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pakx · Accepted Answer

Mateus，我刚开始使用elm，所以请根据实际情况考虑我的建议。

当您收到事件时，可以询问事件目标以获取有关它或相关元素的信息。显然，在没有事件的情况下，目前没有办法随意“进入”DOM并提取值（参见下面的*1）。

资源：

*1：https://medium.com/@debois/elm-the-dom-8c9883190d20 *2：https://robots.thoughtbot.com/building-custom-dom-event-handlers-in-elm 回到您的问题，结果显示设置为style [(key1，val1)...（keyn，valn）]的内容将转换为{key1: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)