如何在榆树中添加辅助文本？

问题描述

我有一个下拉菜单，它使用键盘向下箭头将文本显示为 moredetails，单击它会展开，我可以看到必填字段。我想要实现的是在辅助字段扩展时单击按钮一次我想将文本更改为“较少细节”，我能够实现直到扩展键盘向下箭头标记变为键盘向上箭头标记。 这是我的代码

Html.span 
   [ Attributes.class "details" ]
   [ Html.a
      [ Attributes.href "#",Events.onClick (ExpandDetails tx.id)]
      [ Html.text "More detail",Html.i 
          [ Attributes.class "material-icons" ]
          [ if expanded then
               Html.text "keyboard_arrow_up"
            else
               Html.text "keyboard_arrow_down"
          ]
      ]
   ]

我可以一直到如果展开显示向下箭头，但随之而来的是我需要将文本从更多细节更改为更少细节，点击更少细节时它应该回到更多细节。

解决方法

如果我理解正确，您可以在下拉代码之前在 let expression 中定义按钮和文本。类似的东西：

    let
        ( dropdownButton,dropdownText ) =
            if expanded then
                ( "keyboard_arrow_up","Less details" )

            else
                ( "keyboard_arrow_down","More details" )
    in
    Html.span [ Attributes.class "details" ]
        [ Html.a
            [ Attributes.href "#",Events.onClick (ExpandDetails tx.id)
            ]
            [ Html.text dropdownText,Html.i [ Attributes.class "material-icons" ]
                [ Html.text dropdownButton ]
            ]
        ]

,

这是另一种选择。

将链接移动到以 String 为参数的函数中。

viewDetails : Tx -> Bool -> Html Msg
viewDetails tx expanded =
    let
        lessOrMoreLink =
            if expanded then
                viewExpandLink "Less" "keyboard_arrow_up"
            else
                viewExpandLink "More" "keyboard_arrow_down"
    in
    Html.span
        [ Attributes.class "details" ]
        [ lessOrMoreLink tx.id ]


viewExpandLink : String -> String -> Int -> Html Msg
viewExpandLink txt arrow id =
    Html.a
        [ Attributes.href "#",Events.onClick (ExpandDetails id)
        ] 
        [ Html.text (txt ++ " details"),Html.i
            [ Attributes.class "material-icons" ]
            [ Html.text arrow ]
        ]