标签: elm-ui

我正在玩elm-ui，我正在努力实现（在我看来）简单的任务，但我正在努力。
我想显示一个圆形图像，就像我们在 iOS 或其他几个平台上的联系表单中都知道的那样。

据我所知，有两个库叫做elm-ui：
- mdgriffith/elm-ui
- gdotdesign/elm-ui
我正在使用第一个。

我正在玩，Element.Border但只是在背景中添加了一个边框。

import Element exposing (image)
import Element.Border as Border

image
  [ Border.rounded 50
  , Border.width 5
  ]
  { src = "img.png"
  , description = "Some text..."
  }

我还尝试使用 asvg来显示一个圆圈并用图像作为背景填充它。但是现在我很难将背景设置为颜色以外的任何东西。

import Element exposing (html)
import Svg exposing (svg)
import Svg.Attributes exposing (cx, cy, fill, height, r, width)

html
  (svg
      [ width "100"
      , height "100"
      ]
      [ circle
          [ cx "50"
          , cy …

我正在将 Elm 与 mdgriffiths/elm-ui 结合使用，我真的很享受它。现在，我正在尝试创建一个居中的、包裹的元素行：

我可以做到这一点：

使用此代码：

button : String -> String -> Element Msg
button label url =
    link
        [ height (px 150)
        , width (px 150)
        , Border.width 1
        , Background.color (rgb255 255 255 255)
        ]
        { url = url
        , label =
            Element.paragraph
                [ Font.center ]
                [ textEl [] label ]
        }


row : Element Msg
row =
    Element.wrappedRow
        [ Element.spacing 25
        , Element.centerX
        , Element.centerY
        , width (fill |> Element.maximum 600)
        , Font.center
        ]
        [ button …

我希望将鼠标悬停在按钮上时进行简单的擦除。我想出用mouseOver鼠标悬停时更改背景的方法，但我不确定如何创建从一个背景到另一个背景的擦除。我知道elm-simple-animation，但我对 Elm 太陌生，无法理解文档。

谢谢！

如果我需要作弊并使用 css 类来实现 Elm-UI 不支持的内容（backdrop-filter例如），我该怎么做。我搜索了 slack 并发现了htmlAttribute <| Html.Attributes.style "filter" "blur(xyz)"，但我不明白如何将其应用到 Element 。谢谢你！

单击按钮时如何消除按钮周围的蓝色阴影？

我正在使用 Elm 和mdgriffith/elmui构建一个网络应用程序。

点击前按钮图片：

点击后：

榆木代码：

module Main exposing (main)                                        

import Browser                                                     
import Element as E                                                
import Element.Input as Ei                                         
import Element.Border as Eb                                        

main = E.layout [ E.padding 30 ] <|                                
    Ei.button []                                                   
        { onPress = Nothing                                        
        , label = E.text "A button"                                
        }           

（在 Ellie 中运行它）

如果可能的话，我不想使用任何 CSS。

编辑：

我不认为这是重复的，因为我的问题是关于如何使用 elm-ui 而不是 CSS 来做到这一点。

当按下 Enter 时，我需要让我的应用程序发送一条消息。我有一个元素，如：

Input.text [] { onChange = UpdateText, text = model.text, placeholder=Nothing }

按下回车键时如何使其提交？

注意：Q/A 从Elm-Slack复制以方便查找。

基本上我想在悬停时使文本删除线。这不容易与

el [ mouseOver [Font.strike] ] (text "some text")

就像它会

el [ mouseOver [Background.color someColor] ] (text "some other text")

因为Font.strike是Attribute msgwhileBackground.color是类型Attr decorative msg

有没有人知道如何用类似的东西来实现描述的行为Font.strike？

elm-ui如果不可能，我也会接受非解决方案。

我是 ELM 的新手，我想在不使用任何库（例如 Bootstrap 或 ELM-UI）的情况下创建模态。我在网上找到了这个简单的例子，它也使用了 JSON 解码。是否有可能在没有任何框架/库和 JSON 解码的情况下让模态工作？如何修改代码以简单地获得工作模式？

module Main exposing (main)

import Browser
import Html exposing (Html, Attribute, button, div, span, text)
import Html.Events exposing (onClick, on)
import Html.Attributes exposing (class, style)
import Json.Decode as Decode


type alias Model =
    { isVisible : Bool, count : Int }


initialModel : Model
initialModel =
    { isVisible = False, count = 0 }


type Msg
    = Show
    | Hide
    | Increment
    | Decrement


update : Msg -> Model -> …