Elm：你将如何构建和设计UI？

Question

在过去的几天里，我一直在学习Elm，这是一次令人耳目一新的经历。以至于我不想回到JS领域，:-(。

我的问题是，我仍然没有看到用elm制作Web应用程序的方法，我希望能得到一些指导和建议： evancz/start-app非常适合组织应用程序的结构。
evancz/effects与elmfire一起可以处理与Firebase的通信。

但是我该如何构建和设计UI呢？
让我们以一个具体的例子为例：Semantic-UI中的样式选择小部件。
它被实现为一系列div和一些JS来处理下拉菜单和多选。

到目前为止，我发现的替代方案有：

1. 引入Semantic的CSS和JS（需要JQuery），并使用ports连接到小部件的JS事件。
2. 仅引入Semantic的CSS，尝试在Elm中构建功能。
3. 同时在Elm (adam-r-kowalski/Elm-Css)中构建功能和样式。
4. 忘记Semantic，使用circuithub/elm-bootstrap-html在Bootstrap中重新设计网站。

还有其他可重用的小部件或替代方案吗？

TheSeamau5/TabbedPages容器确实令人望而生畏。 其他小部件是否需要同样多的工作量？

再次强调，我希望在我的项目中使用Elm，但我没有足够的知识和时间来编写所有的小部件。

为了背景，我正在使用Semantic中的以下小部件：

• 屏幕两侧各有一个汉堡菜单。
• 经过样式美化的下拉选择框。
• 披露三角形，隐藏/显示更多内容。
• 类似旋转木马的图像展示方式，底部有 prev/next 和点标记。

再次感谢您为 Elm 做出的努力和任何您可以给我的建议。

PS：我也在 Elm 的邮件列表中发布了这个问题。

- alesch

---

效果的链接都失效了。 - SwiftsNamesake

Answer 1

首先，作为TabbedPages容器的作者，我要为其复杂性道歉。该组件实际上是一个使用Elm和Elm Architecture以及内联样式来尝试什么是可能的实验。简而言之，该组件的想法是允许在选项卡和可滑动页面之间进行切换，其中选项卡和页面的内容均未知，并且整个组件都使用内联样式进行设计。这可能是制作组件最难的方法之一，尽管它有其优点。

至于实现小部件，将Elm视为撰写Html的一种方法（就像超级高级的Jade）。这意味着您只需编写html并为每个div添加一些类，然后在CSS中为这些类设置样式（或任何您选择的预处理器）。这意味着，不，您的小部件不需要像TabbedPages那样多的工作。

最好的做法可能是包含CSS，并在Elm中重新制作JS部分。这将为您提供大量Elm的保证，而不会在处理组件时付出太高的代价。

至于在开发中使用的组件，不幸的是目前没有太多组件可以使用，因为Elm还很年轻。这可能会在未来发生改变，但当前情况并非如此。

最后，对于汉堡菜单，Elm中有两个非常棒的包可以提供svg图标：

1. TheSeamau5/elm-material-icons
2. jystic/elm-font-awesome

在这两个包之间，有大约不到1000个可供选择的图标（我想，我没有真正数过），它们只是函数，因此非常容易使用。它们产生Svg，这只是Html类型的另一个名称，因此您可以轻松地交替使用这两者。

简而言之，目前的最佳方法是使用Elm编写您的html和逻辑，并在CSS（或Sass/Less/Stylus等）中编写样式。您的大部分逻辑将仅由切换放置在div中的类组成，就像使用jQuery一样。

为此，我建议遵循Elm Architecture：

init : Options -> Model

update : Action -> Model -> Model
-- or update : Action -> Model -> (Model, Effects Action) 
-- if you need effects like http

view : Address Action -> Model -> Html

至于内联样式，目前不必太担心。这是一个正在进行中的工作，并且在这个领域正在发生很多突破性进展（比如 elm-css），当人们开始掌握它时，你可能会开始看到一些博客文章和组件出现。（不幸的是，当你尝试使用最新技术时，就会发生这种情况......不过，如果你想加入发现的乐趣，Elm社区非常欢迎，而且因为似乎每个人都在一起学习，所以很有趣:D）

- Hassan Hayat

Answer 2

我知道这个问题早就有人回答了，但是我想为 Elm 0.17 和 0.18 增加我的意见。查看 Material Design Lite 组件，适用于 0.17，以及适用于 0.18 的分支。

演示网站非常流畅且详尽。

- banncee

Answer 3

我也对此感到困惑，关于使用Bootstrap，你可以使用CSS类，但这可能会变得混乱。

最终你需要编写单独的CSS文件，并使用LESS、SASS、Stylus或其他编译成CSS的语言。

因此，在你的Elm代码中，使用CSS类：

div [ class "whatever" ] [ text "Hello world" ]

我建议使用端口来封装外部JS组件。

- user9903

---

这是我的做法。我发现Semantic UI非常适合使用样式而不需要JS位。 - Kasey Speakman