Question

我使用Text.link "https://somewebsite.com" (toText "SomeWebsite")为Elm中的网站创建链接。我希望能够设置结果文本的颜色。

尽管Text.link "https://somewebsite.com" (Text.color white <|toText "SomeWebsite")的类型签名是Text.color white <|Text.link "https://somewebsite.com" (toText "SomeWebsite")，但我已尝试link和link : String -> Text -> Text，但两者均无效。这两个片段都编译完成。

我查看了elm-lang.org的来源，其链接看起来像是他们的样式（它们似乎有不同于默认深蓝色的颜色，没有下划线）并且没有找到任何可以解释它是如何在那里完成的事情。

如何为榆树中的链接文字上色？

Answer 1

以下内容将创建一个指向红色的谷歌链接：

import Text (..)

main = toText "Google" 
    |> style  {defaultStyle | color <- red, height <- Just 20 } 
    |> link "http://google.com"
    |> leftAligned

现场演示here。

不幸的是，这并没有给你真正的风格＆＃34;风格＆＃34;当你将鼠标悬停在它上面时这个链接有点无聊。

elm-lang网站的页面顶部有以下样式：

<style type="text/css">
  a:link {text-decoration: none; color: rgb(15,102,230);}
  a:visited {text-decoration: none}
  a:active {text-decoration: none}
  a:hover {text-decoration: underline; color: rgb(234,21,122);}
  body { font-family: "Lucida Grande","Trebuchet MS","Bitstream Vera Sans",Verdana,Helvetica,sans-serif !important; }
  p, li { font-size: 14px !important;
          line-height: 1.5em !important; }
</style>

这为它的链接提供了你在那里看到的样式。

但是，仍然可以使用Graphics.Input中的customButton来获取此类样式。

import Graphics.Input as Input

click = Input.input ()

linkFormat = { defaultStyle | color <- blue }
hoverFormat = { linkFormat | bold <- True }

customLink url text = 
    let text' = Text.toText text
        regular = Text.style linkFormat text' |> leftAligned
        hover = Text.style hoverFormat text' |> leftAligned
        down = Text.style linkFormat text' |> leftAligned
    in link url <| Input.customButton click.handle () regular hover down

main = customLink "http://google.com" "Google"

现场演示here。

这里需要注意的一点是我没有使用Text.link。我只使用link中的Graphics.Element函数，该函数默认导入并且类型为String -> Element -> Element。

我希望这有帮助！

Answer 2

这不再适用于Elm 0.13，顺便说一句。它首先说明了Graphics lib和Text.link中的链接是不明确的，所以我通过预先添加Text来限定它。链接，然后它抱怨它“找不到变量＆＃39; Text.link＆＃39;。＆＃39;当我将其限定为Graphics.Element.link时，也会发生同样的事情。

看起来很奇怪，我无法通过在Elm 0.13中添加模块限定符来限定某些内容。

要在0.13完成此操作，我发现你可以做到以下几点。

    import Text

    main = link "http://www.google.com" <| leftAligned <| Text.color red <| toText "Google"

http://share-elm.com/sprout/5430943ee4b017b21db2f86c

Answer 3

Demo在Elm-0.18中

module Main exposing (main)

import Html as H exposing (Html)
import Html.Attributes as HA


main : Html msg
main =
    H.a
        [ HA.href "https://en.wikipedia.org"
        , HA.style [ ( "color", "green" ) ]
        ]
        [ H.text "wikipedia" ]

如何更改Elm中链接的颜色？

3 个答案: