榆树:你将如何构build和风格的用户界面?

在过去的几天里,我学习了榆树,这是一个令人耳目一新的经历。 太多了,我不想回到JS的土地上,:-(。

我的问题是,我仍然没有看到用榆树生成一个Web应用程序的方法,我会喜欢一些指导和build议:

evancz / start-app非常适合组织应用程序的结构。
evancz /榆树的效果可以处理与Firebase的对话。

但是,我将如何构build和deviseUI?
我们来举一个具体的例子:一个来自Semantic-UI的风格化的select部件 。
它是作为一个div列表,连同一些JS来处理下拉和多选。

我目前find的select是:

  1. 包括Semantic的CSS和JS(它需要JQuery),并使用端口来挂钩到小部件的JS事件。
  2. 只包括Semantic的CSS,并尝试在Elm中构buildfunction。
  3. 两者都在Elm (adam-r-kowalski / Elm-Css)中构buildfunction和风格。
  4. 忘记语义并使用circuithub / elm-bootstrap-html在Bootstrap中重做网站。

还有其他的select,或者我可以重复使用的小部件吗?

TheSeamau5 / TabbedPages容器肯定是吓人的。 其他小工具是否需要这么多工作?

再次,我很乐意使用Elm作为我的项目,但是我没有知识,也没有时间自己写所有的小部件。

对于上下文,我从Semantic使用的小部件是:

  • 两个汉堡包菜单,每一个在屏幕的两侧。
  • 一个风格的select。
  • 披露三angular形,隐藏/显示更多的内容。
  • 一个类似卡鲁塞尔的图像显示,prev / next和底部的点。

再次感谢您投入榆树的工作,并有任何build议可以给我。

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

我知道这个问题很久以前就回答了,但是我认为我会为0.17和0.18添加0.02美元。 查看Material Design Lite组件,0.17 , 分叉0.18 。

现场演示网站是光滑和详尽的。

首先,作为TabbedPages容器的作者,我想为复杂性道歉。 这个组件实际上是一个实验,看看使用Elm和Elm Architecture以及内联样式有什么可能。 简而言之,组件的思想是允许一个tab + swipeable页面组件,其中的标签和页面的内容都是未知的,整个事物使用内联样式进行样式化。 这可能是制造组件最困难的途径,尽pipe它有其优点。

至于实现小部件,可以把榆树当作创作Html的手段(就像超级先进的翡翠)。 这意味着你可以写HTML,并给每个div一些类和样式CSS(或任何预处理器或你select)的类。 这意味着,不,您的小部件不需要像TabbedPages那么多的工作。

最好的行动方式可能是包括CSS,并可能重做在榆树的JS部分。 这将给你很多来自Elm的保证,而不必花费太多的成本来处理组件。

至于在野外的组成部分,不幸的是目前并不多,因为榆树还年轻。 这可能会在未来发生变化,但目前情况并非如此。

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

  1. TheSeamau5 /榆树材料-图标
  2. jystic /榆树-字体真棒

在两者之间有一个小小于1000的图标可供select(我想,我还没有真正计算),它们只是function,所以它们非常容易使用。 他们产生的Svg只是Htmltypes的另一个名称,所以你可以交换使用两个。

总之,最好的方法是在Elm中创作你的html和逻辑,在CSS(或者Sass / Less / Stylus /等等)中创build你的样式。 而你的逻辑大部分只是简单地把你放在div中的类切换,就像使用jQuery一样。

为此,我build议遵循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),当人们开始掌握它的时候,你可能会开始看到一些博客文章和组件。 (不幸的是,如果你想join发现的乐趣,这就是发生了什么事情,但是,如果你想join发现的乐趣,榆树社区是非常欢迎,它是很有趣的,因为它似乎每个人都在一起学习:D)

我也想知道这一点,关于使用Bootstrap,你可以使用CSS类,但可以得到混乱。

最后,您将编写单独的CSS文件,并使用LESS或SASS或Stylus或编译为CSS的其他语言。

所以在你的Elm代码中,使用CSS类:

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

我会去与端口来包装外部JS组件。