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

在过去的几天里，我一直在学习榆树，这是一次令人耳目一新的经历。太多了，我不想再回到JS土地，：-（

我的问题是，我仍然没有找到使用elm生成web应用程序的方法，我希望得到一些指导和建议：

非常适合组织应用程序的结构。
与你一起可以处理与你交谈的问题

但是我如何构建和设计UI？
让我们举一个具体的例子： 它被实现为一个div列表，以及一些处理下拉和多选的JS

到目前为止，我发现的备选方案有：

包括Semantic的CSS和JS（它需要JQuery）并用于钩住小部件的JS事件

只包含语义的CSS，并尝试在Elm中构建功能

两者都在Elm中构建功能和样式

忘记语义，在引导中使用circuithub/elm引导html重做站点

有没有其他替代品，或者我没有的可以重用的小部件

这个集装箱确实很吓人。 其他小部件需要这么多工作吗

同样，我很想在我的项目中使用Elm，但我自己既没有知识也没有时间来编写所有的小部件

对于上下文，我使用的语义小部件有：

• 两份汉堡包菜单，屏幕两侧各一份
• 有样式的选择
• 公开三角形，隐藏/显示更多内容
• 一种类似旋转木马的图像显示，在底部有上一个/下一个和点

再次感谢您为Elm所做的工作，以及您能给我的任何建议

---

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

首先，作为TabbedPages容器的作者，我想为它的复杂性道歉。这个组件实际上是一个实验，看看如何使用elm和elm架构以及内联样式。简言之，该组件的思想是允许对于tabs+swipeable pages组件，其中选项卡和页面的内容都是未知的，并且整个内容都是使用内联样式设计的。这可能是制作组件的最困难路线，尽管它有其优点

至于实现小部件，可以将Elm看作是编写Html的一种方法（就像超级高级的Jade）。这意味着您可以编写Html，为每个div提供一些类，并用CSS（或您选择的任何预处理）对这些类进行样式化。这意味着，不，您的小部件不需要像tabbedpage那样多的工作

最好的做法可能是在Elm中包含CSS，并可能重做JS部分。这将为您提供Elm提供的大量保证，而无需为开发组件付出太多成本

至于野生成分，不幸的是，由于Elm还年轻，目前没有太多。这在未来可能会改变，但目前情况并非如此

最后，对于汉堡包菜单，Elm中有两个提供svg图标的很棒的包

在这两个图标之间，有不到1000个图标可供选择（我想，我还没有算），它们只是函数，因此非常易于使用。它们生成

Svg

，这只是

Html

类型的另一个名称，因此您可以互换使用这两个图标

简言之，目前最好的方法是用Elm编写html和逻辑，用CSS（或Sass/Less/Stylus/等等）编写样式。您的大部分逻辑只包括切换放在div中的类，比如jQuery

为此，我建议遵循Elm体系结构：

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）

我也想知道这一点，关于使用引导，您可以使用CSS类，但这可能会变得混乱

最后，您将编写单独的CSS文件，并使用更少的或SASS、Stylus或其他编译为CSS的语言

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

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

---

我会使用端口来包装外部JS组件。

我知道这个问题很久以前就得到了回答，但我想我应该为Elm 0.17和0.18添加0.02美元。请查看，和

---

这是一个流畅而详尽的界面。

链接都断开了这就是我所做的。我发现语义用户界面非常适合使用没有JS位的样式。