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

Ben Pious 发表于 Dev

本·虔诚

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

我曾尝试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的源代码，该源代码的链接看起来像是已样式化（它们的颜色似乎与默认的深蓝色不同，并且没有下划线），并且没有找到任何可以解释的内容那里是怎么做的。

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

乔

以下将创建一个指向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。我只是使用默认情况下从中导入并具有type的link函数。Graphics.ElementString -> Element -> Element

我希望这有帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。