2

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

我已经尝试过Text.link "https://somewebsite.com" (Text.color white <|toText "SomeWebsite")and Text.color white <|Text.link "https://somewebsite.com" (toText "SomeWebsite")，尽管类型签名linkis ，但两者都不起作用link : String -> Text -> Text。这两个片段都可以编译。

我查看了 elm-lang.org 的源代码，其中的链接看起来像是经过了样式设置（它们的颜色似乎与默认的深蓝色不同，并且没有下划线），但没有找到任何解释它是如何在那里完成的。

如何为 Elm 中的链接文本着色？

4

3 回答 3

4

以下将创建一个红色的 google 链接：

import Text (..)

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

现场演示在这里。

不幸的是，当您将鼠标悬停在链接上时，这并不能让您真正“设计”链接，这有点令人遗憾。

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>

这为其链接提供了您在此处看到的样式。

但是，仍然可以使用customButtonfrom获得这种类型的样式Graphics.Input。

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"

现场演示在这里。

这里要注意的一件事是我没有使用Text.link. 我只是使用默认导入的link函数，Graphics.Element类型为String -> Element -> Element.

我希望这有帮助！

于 2014-06-17T13:49:09.443 回答
0

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

我无法通过在 Elm 0.13 中添加模块限定符来限定某些东西，这似乎很奇怪。

为了在 0.13 中实现这一点，我发现您可以执行以下操作。 

    导入文本


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

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

于 2014-10-05T00:31:03.267 回答
0

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" ]
于 2018-07-24T10:44:29.290 回答